<div fxLayout="column" fxFlex="100" [perfectScrollbar]>
  <div class="alert alert-info mt-1">
    <fa-icon class="mr-1 alert-icon" [icon]="faInfoCircle" />
    <span>Experimental features should be enabled with caution. Many such features may be implementation specific and not ratified for the BOLT spec. Enabling these may still result in a broken experience. Referencing relevant feature documentation is highly advised before enabling.</span>
  </div>
  <form #form="ngForm" fxLayout="column" fxLayoutAlign="start stretch" class="page-sub-title-container mt-1">
    <div fxLayout="row">
      <fa-icon class="page-title-img mr-1" [icon]="faCode" />
      <span class="page-title">Features</span>
    </div>
    <mat-accordion>
      <mat-expansion-panel *ngFor="let feature of features; index as i" class="flat-expansion-panel my-1" [expanded]="false" (opened)="onPanelExpanded(i)">
        <mat-expansion-panel-header>
          <mat-panel-title fxFlex="100" fxLayoutAlign="space-between center">
            <h4 class="font-bold-500">{{feature.name}}</h4>
            <h4 class="font-bold-500">
              <span *ngIf="feature.enabled" class="dot green"></span>
              <span *ngIf="!feature.enabled" class="dot yellow"></span>
              {{feature.enabled ? 'Enabled' : 'Disabled'}}
            </h4>
          </mat-panel-title>
        </mat-expansion-panel-header>
        <div fxLayout="column" fxFlex="100" fxLayoutAlign="start stretch">
          <form *ngIf="i === 0" #form="ngForm" fxLayout="column" fxFlex="100" fxLayoutAlign="start stretch" class="page-sub-title-container">
            <div fxFlex="100" class="alert alert-info">
              <fa-icon class="mr-1 alert-icon" [icon]="faInfoCircle" />
              <span>Please ensure that <strong>experimental-offers</strong> flag is set to true in the Core Lightning config before enabling it in RTL. Click <strong><a href="http://bolt12.org" target="_blank">here</a></strong> to learn more about Core Lightning offers.</span>
            </div>
            <h4 class="mt-2">Description</h4>
            <span>Offers is a draft specification (also referred as BOLT12) for Lightning nodes and wallets, with experimental support in Core Lightning.</span>
            <h4 class="mt-2">Links</h4>
            <span><a href="https://github.com/lightningnetwork/lightning-rfc/pull/798 " target="blank">Core lightning Bolt12</a></span>
            <mat-divider class="my-2" [inset]="true" />
            <div class="alert alert-warn">
              <fa-icon class="mr-1 alert-icon" [icon]="faExclamationTriangle" />
              <span>Do not get an Offer tattoo until spec is fully ratified!</span>
            </div>
            <mat-slide-toggle autoFocus class="my-1" tabindex="1" color="primary" name="enableOfr" [(ngModel)]="enableOffers" (change)="onUpdateFeature()">Enable Offers {{enableOffers ? '(You can find Offers under Lightning -> Transactions -> Offers)' : ''}}</mat-slide-toggle>
          </form>
          <form *ngIf="i === 1" #form="ngForm" fxLayout="column" fxFlex="100" fxLayoutAlign="start stretch" class="page-sub-title-container">
            <div *ngIf="!features[1].enabled">
              <div fxFlex="100" fxLayout="row" class="alert alert-warn">
                <fa-icon class="mr-1 alert-icon" [icon]="faExclamationTriangle" />
                <span>Please ensure that <strong>experimental-dual-fund</strong> flag is set to true in the Core Lightning config before enabling it in RTL. Click <strong><a href="https://medium.com/blockstream/setting-up-liquidity-ads-in-c-lightning-54e4c59c091d" target="_blank">here</a></strong> to learn more about Core Lightning Liquidity Ads.</span>
              </div>
            </div>
            <div *ngIf="features[1].enabled" fxLayout="column">
              <div fxFlex="100" fxLayout="row" class="alert alert-warn mb-2">
                <fa-icon class="mr-1 alert-icon" [icon]="faExclamationTriangle" />
                <span>These config changes should be configured permanently via the config file on your CLN node otherwise the policy would need to be configured again, if your node restarts.</span>
              </div>
              <div fxLayout="column" fxLayout.gt-sm="row" fxFlex="100" fxLayoutAlign.gt-sm="space-between center" fxLayoutAlign="start stretch">
                <mat-form-field fxLayout="column" fxFlex="49" fxLayoutAlign="start end">
                  <mat-label>Policy</mat-label>
                  <mat-select autofocus tabindex="1" name="policy" [(ngModel)]="selPolicyType" (selectionChange)="policyMod=null">
                    <mat-option *ngFor="let policyType of policyTypes" [value]="policyType">
                      {{policyType.id | titlecase}}
                    </mat-option>
                  </mat-select>
                </mat-form-field>
                <mat-form-field fxLayout="column" fxFlex="49">
                  <mat-label>{{selPolicyType.placeholder}}</mat-label>
                  <input #plcMod="ngModel" matInput type="number" tabindex="2" required name="plcMod" [step]="selPolicyType.id === 'fixed' ? 1000 : 10" [min]="selPolicyType.min" [max]="selPolicyType.max" [(ngModel)]="policyMod">
                  <mat-hint>{{selPolicyType.placeholder}} should be between {{selPolicyType.min}} and {{selPolicyType.max}}</mat-hint>
                  <mat-error *ngIf="!policyMod">{{selPolicyType.placeholder}} is required.</mat-error>
                  <mat-error *ngIf="policyMod < selPolicyType.min">{{selPolicyType.placeholder}} must be greater than or equal to {{selPolicyType.min}}.</mat-error>
                  <mat-error *ngIf="policyMod > selPolicyType.max">{{selPolicyType.placeholder}} must be less than or equal to {{selPolicyType.max}}.</mat-error>
                </mat-form-field>
              </div>
              <div fxLayout="column" fxLayout.gt-sm="row" fxFlex="100" fxLayoutAlign.gt-sm="space-between center" fxLayoutAlign="start stretch">
                <mat-form-field fxLayout="column" fxFlex="49">
                  <mat-label>Lease Base Fee (Sats)</mat-label>
                  <input matInput type="number" step="100" min="0" tabindex="3" required name="lease_fee_base_sat" [(ngModel)]="lease_fee_base_sat">
                  <mat-error *ngIf="!lease_fee_base_sat">Lease base fee is required.</mat-error>
                </mat-form-field>
                <mat-form-field fxLayout="column" fxFlex="49">
                  <mat-label>Lease Base Basis (bps)</mat-label>
                  <input matInput type="number" step="1" min="0" tabindex="4" required name="lease_fee_basis" [(ngModel)]="lease_fee_basis">
                  <mat-error *ngIf="!lease_fee_basis">Lease base basis is required.</mat-error>
                </mat-form-field>
              </div>
              <div fxLayout="column" fxLayout.gt-sm="row" fxFlex="100" fxLayoutAlign.gt-sm="space-between center" fxLayoutAlign="start stretch">
                <mat-form-field fxLayout="column" fxFlex="49">
                  <mat-label>Max Channel Routing Base Fee (Sats)</mat-label>
                  <input matInput type="number" step="100" min="0" tabindex="5" required name="channelFeeMaxBaseSat" [(ngModel)]="channelFeeMaxBaseSat">
                  <mat-error *ngIf="!channelFeeMaxBaseSat">Max channel routing base fee is required.</mat-error>
                </mat-form-field>
                <mat-form-field fxLayout="column" fxFlex="49">
                  <mat-label>Max Channel Routing Fee Rate (ppm)</mat-label>
                  <input matInput type="number" step="1000" min="0" tabindex="6" required name="channelFeeMaxProportional" [(ngModel)]="channelFeeMaxProportional">
                  <mat-error *ngIf="!channelFeeMaxProportional">Max channel routing fee rate is required.</mat-error>
                </mat-form-field>
              </div>
              <h4 *ngIf="flgUpdateCalled" fxLayoutAlign="start stretch" class="font-bold-500 mt-2">
                <span fxFlex="100" class="alert" [ngClass]="{'alert-danger': !!updateMsg.error, 'alert-info': !!updateMsg.data}">
                  {{(updateMsg.error && updateMsg.error !== '') ? (('Error: ' + updateMsg.error) || 'Unknown Error') : (updateMsg.data && updateMsg.data !== '') ? updateMsg.data : 'Successfully Updated the Funding Policy!'}}
                </span>
              </h4>
              <div fxLayout="row" class="my-1">
                <button class="mr-1" mat-stroked-button color="primary" tabindex="7" (click)="onResetPolicy()">Reset</button>
                <button mat-flat-button color="primary" tabindex="8" (click)="onUpdateFundingPolicy()">Update</button>
              </div>  
            </div>
          </form>
        </div>
      </mat-expansion-panel>
    </mat-accordion>      
  </form>
</div>
