<div *ngIf="object" layoutDirection="row" appLayoutGap="5px">
  <div layoutDirection="column">
    <mat-selection-list [multiple]="false">
      <mat-list-option *ngFor="let stepData of steps | keyvalue" [value]="stepData.key"
                       [selected]="stepData.value.selected" (click)="stepChanged(stepData.key)">
        {{stepData.value.name}}
        <ng-container *ngIf="!stepData.value.valid"> *</ng-container>
      </mat-list-option>
    </mat-selection-list>
  </div>
  <form appFormSubmit (ngSubmit)="objectController.actionCallback(primaryAction)"
        [formGroup]="listenerForm" layoutDirection="column" appFlex="auto" class="fl-margin-top-small overflow-hidden">
    <!--suppress JSUnusedGlobalSymbols -->
    <app-form-errors #formErrors [formGroup]="listenerForm"></app-form-errors>
    <app-fl-backdrop *ngIf="loading"></app-fl-backdrop>

    <!-- listener details -->
    <div *ngIf="activeStep === 1" layoutDirection="column" formGroupName="listener_details">
      <p class="fl-detail" i18n>Provide the details for the listener.</p>
      <div layoutDirection="row" layoutDirection-xs="column" appLayoutGap="10px">
        <mat-form-field appFlex="50%">
          <mat-label i18n>Name</mat-label>
          <input matInput placeholder="Name" i18n-placeholder type="text" formControlName="name">
          <mat-error>{{fieldErrors['name']}}</mat-error>
        </mat-form-field>
        <mat-form-field appFlex="50%">
          <mat-label i18n>Description</mat-label>
          <input matInput placeholder="Description" i18n-placeholder type="text" formControlName="description">
          <mat-error>{{fieldErrors['description']}}</mat-error>
        </mat-form-field>
      </div>
      <div layoutDirection="row" layoutDirection-xs="column" appLayoutGap="10px">
        <mat-form-field appFlex="50%">
          <mat-label i18n>Protocol</mat-label>
          <mat-select placeholder="Protocol" i18n-placeholder formControlName="protocol" required>
            <mat-option *ngFor="let protocolName of createOptions.listener_protocols" [value]="protocolName"
                        [disabled]="(protocolName === 'TERMINATED_HTTPS') && !createOptions.certificates.length">
              {{createOptions.protocols[protocolName]}}
            </mat-option>
          </mat-select>
          <mat-error>{{fieldErrors['protocol']}}</mat-error>
        </mat-form-field>
        <mat-form-field appFlex="50%">
          <mat-label i18n>Port</mat-label>
          <input matInput type="number" placeholder="Port" i18n-placeholder formControlName="protocol_port"
                 min="1" max="65535" required>
          <mat-error>{{fieldErrors['protocol_port']}}</mat-error>
        </mat-form-field>
      </div>
      <div layoutDirection="row" layoutDirection-xs="column" appLayoutGap="10px">
        <mat-form-field appFlex="50%">
          <mat-label i18n>Client data timeout</mat-label>
          <input matInput type="number" placeholder="Client data timeout" i18n-placeholder
                 formControlName="timeout_client_data" min="0">
          <mat-error>{{fieldErrors['timeout_client_data']}}</mat-error>
        </mat-form-field>
        <mat-form-field appFlex="50%">
          <mat-label i18n>TCP inspect timeout</mat-label>
          <input matInput type="number" placeholder="TCP inspect timeout" i18n-placeholder
                 formControlName="timeout_tcp_inspect" min="0">
          <mat-error>{{fieldErrors['timeout_tcp_inspect']}}</mat-error>
        </mat-form-field>
      </div>
      <div layoutDirection="row" layoutDirection-xs="column" appLayoutGap="10px">
        <mat-form-field appFlex="50%">
          <mat-label i18n>Member connect timeout</mat-label>
          <input matInput type="number" placeholder="Member connect timeout" i18n-placeholder
                 formControlName="timeout_member_connect" min="0">
          <mat-error>{{fieldErrors['timeout_member_connect']}}</mat-error>
        </mat-form-field>
        <mat-form-field appFlex="50%">
          <mat-label i18n>Member data timeout</mat-label>
          <input matInput type="number" placeholder="Member data timeout" i18n-placeholder
                 formControlName="timeout_member_data" min="0">
          <mat-error>{{fieldErrors['timeout_member_data']}}</mat-error>
        </mat-form-field>
      </div>
      <div layoutDirection="row" layoutDirection-xs="column" appLayoutGap="10px">
        <mat-form-field appFlex="50%" xsFlex="100">
          <mat-label i18n>Connection limit</mat-label>
          <input matInput type="number" placeholder="Connection limit" i18n-placeholder
                 formControlName="connection_limit" min="-1">
          <mat-error>{{fieldErrors['connection_limit']}}</mat-error>
        </mat-form-field>
      </div>
      <ng-container *ngIf="['HTTP', 'HTTPS', 'TERMINATED_HTTPS'].includes(listenerDetails.controls.protocol.value)">
        <h2 class="fl-detail" i18n>Insert headers</h2>
        <div layoutDirection="row" layoutDirection-xs="column" appLayoutGap="10px">
          <mat-checkbox formControlName="x_forwarded_for" color="primary" appFlex="50%" i18n>
            X-Forwarded-For
          </mat-checkbox>
          <mat-checkbox formControlName="x_forwarded_port" color="primary" appFlex="50%" i18n>
            X-Forwarded-Port
          </mat-checkbox>
        </div>
        <mat-checkbox formControlName="x_forwarded_proto" color="primary" i18n>
          X-Forwarded-Proto
        </mat-checkbox>
      </ng-container>
      <ng-container *ngIf="listenerDetails.controls.protocol.value === 'TERMINATED_HTTPS'">
        <mat-form-field>
          <mat-label i18n>TLS Certificate</mat-label>
          <mat-select placeholder="TLS Certificate" i18n-placeholder formControlName="default_tls_container_ref"
                      required>
            <mat-option *ngFor="let certificate of createOptions.certificates" [value]="certificate.secret_ref">
              {{certificate.name}}
            </mat-option>
          </mat-select>
          <mat-error>{{fieldErrors['protocol']}}</mat-error>
        </mat-form-field>
        <mat-form-field>
          <mat-label i18n>TLS ciphers</mat-label>
          <textarea (keydown.control.enter)="objectController.actionCallback(primaryAction)"
                    matInput rows="3" maxlength="255"
                    placeholder="TLS ciphers" i18n-placeholder formControlName="tls_ciphers">
          </textarea>
          <mat-error>{{fieldErrors['tls_ciphers']}}</mat-error>
        </mat-form-field>
      </ng-container>
      <ng-container *ngIf="['HTTPS', 'TERMINATED_HTTPS'].includes(listenerDetails.controls.protocol.value)">
        <div layoutDirection="row" layoutDirection-xs="column" appLayoutGap="10px">
          <mat-checkbox formControlName="x_ssl_client_verify" color="primary" appFlex="50%" i18n>
            X-SSL-Client-Verify
          </mat-checkbox>
          <mat-checkbox formControlName="x_ssl_client_has_cert" color="primary" appFlex="50%" i18n>
            X-SSL-Client-Has-Cert
          </mat-checkbox>
        </div>
        <div layoutDirection="row" layoutDirection-xs="column" appLayoutGap="10px">
          <mat-checkbox formControlName="x_ssl_client_dn" color="primary" appFlex="50%" i18n>
            X-SSL-Client-DN
          </mat-checkbox>
          <mat-checkbox formControlName="x_ssl_client_cn" color="primary" appFlex="50%" i18n>
            X-SSL-Client-CN
          </mat-checkbox>
        </div>
        <div layoutDirection="row" layoutDirection-xs="column" appLayoutGap="10px">
          <mat-checkbox formControlName="x_ssl_issuer" color="primary" appFlex="50%" i18n>
            X-SSL-Issuer
          </mat-checkbox>
          <mat-checkbox formControlName="x_ssl_client_sha1" color="primary" appFlex="50%" i18n>
            X-SSL-Client-SHA1
          </mat-checkbox>
        </div>
        <div layoutDirection="row" layoutDirection-xs="column" appLayoutGap="10px">
          <mat-checkbox formControlName="x_ssl_client_not_before" color="primary" appFlex="50%" i18n>
            X-SSL-Client-Not-Before
          </mat-checkbox>
          <mat-checkbox formControlName="x_ssl_client_not_after" color="primary" appFlex="50%" i18n>
            X-SSL-Client-Not-After
          </mat-checkbox>
        </div>
      </ng-container>
    </div>

    <!-- pool details -->
    <div *ngIf="activeStep === 2" layoutDirection="column" formGroupName="pool_details">
      <p class="fl-detail" i18n>Provide the details for the pool.</p>
      <div layoutDirection="row" layoutDirection-xs="column" appLayoutGap="10px">
        <mat-form-field appFlex="50%">
          <mat-label i18n>Name</mat-label>
          <input matInput placeholder="Name" i18n-placeholder type="text" formControlName="name" required>
          <mat-error>{{fieldErrors['name']}}</mat-error>
        </mat-form-field>
        <mat-form-field appFlex="50%">
          <mat-label i18n>Description</mat-label>
          <input matInput placeholder="Description" i18n-placeholder type="text" formControlName="description">
          <mat-error>{{fieldErrors['description']}}</mat-error>
        </mat-form-field>
      </div>
      <div layoutDirection="row" layoutDirection-xs="column" appLayoutGap="10px">
        <mat-form-field appFlex="50%" xsFlex="100">
          <mat-label i18n>Algorithm</mat-label>
          <mat-select placeholder="Algorithm" i18n-placeholder formControlName="lb_algorithm" required>
            <mat-option *ngFor="let poolAlgorithm of createOptions.pool_supported_algorithms"
                        [value]="poolAlgorithm">
              {{createOptions.pool_algorithms[poolAlgorithm]}}
            </mat-option>
          </mat-select>
        </mat-form-field>
      </div>
      <div layoutDirection="row" layoutDirection-xs="column" appLayoutGap="10px" formGroupName="session_persistence">
        <mat-form-field appFlex="50%" xsFlex="100">
          <mat-label i18n>Session persistence</mat-label>
          <mat-select placeholder="Session persistence" i18n-placeholder
                      formControlName="type">
            <mat-option [value]="''" i18n>(none)</mat-option>
            <mat-option *ngFor="let s of createOptions.session_persistence_types | keyvalue"
                        [value]="s.key">
              {{s.value}}
            </mat-option>
          </mat-select>
        </mat-form-field>
        <mat-form-field *ngIf="poolDetails.getRawValue()['session_persistence']['type'] === 'APP_COOKIE'"
                        appFlex="50%" xsFlex="100">
          <mat-label i18n>Cookie name</mat-label>
          <input matInput placeholder="Cookie name" i18n-placeholder type="text" formControlName="cookie_name" required>
          <mat-error>{{fieldErrors['cookie_name']}}</mat-error>
        </mat-form-field>
      </div>
      <mat-checkbox formControlName="admin_state_up" color="primary" class="fl-margin-top" i18n>Admin state up</mat-checkbox>
    </div>

    <!-- pool members -->
    <div *ngIf="activeStep === 3">
      <p class="fl-detail" i18n>Add members to the load balancer pool.</p>
      <h2 i18n>Allocated members</h2>
      <ng-container *ngIf="poolMembers.controls.length > 0; else noMembers">
        <div formArrayName="pool_members" *ngFor="let member of poolMembers.controls; let index = index;">
          <div [formGroupName]="index" layoutDirection="row" layoutDirection-lt-md="column" appLayoutGap="10px">
            <mat-form-field>
              <mat-label i18n>IP address</mat-label>
              <input matInput placeholder="IP address" i18n-placeholder type="text" formControlName="address" required>
              <mat-error>{{fieldErrors['address']}}</mat-error>
            </mat-form-field>
            <mat-form-field>
              <mat-label i18n>Subnet</mat-label>
              <mat-select placeholder="Subnet" i18n-placeholder formControlName="subnet_id">
                <mat-option *ngFor="let subnet of createOptions.subnets" [value]="subnet.id">
                  {{subnet.name}}({{subnet.cidr}})
                </mat-option>
              </mat-select>
              <mat-error>{{fieldErrors['subnet_id']}}</mat-error>
            </mat-form-field>
            <mat-form-field>
              <mat-label i18n>Port</mat-label>
              <input matInput type="number" placeholder="Port" i18n-placeholder formControlName="protocol_port"
                     min="1" max="65535" required>
              <mat-error>{{fieldErrors['protocol_port']}}</mat-error>
            </mat-form-field>
            <mat-form-field>
              <mat-label i18n>Weight</mat-label>
              <input matInput type="number" placeholder="Weight" i18n-placeholder formControlName="weight"
                     min="1" required>
              <mat-error>{{fieldErrors['weight']}}</mat-error>
            </mat-form-field>
            <a mat-icon-button (click)="removePoolMember(index)">
              <mat-icon>delete</mat-icon>
            </a>
          </div>
        </div>
      </ng-container>
      <ng-template #noMembers>
        <p class="fl-detail" i18n>No members have been allocated</p>
      </ng-template>
      <div>
        <a mat-button color="primary" (click)="addExternalPoolMember()" i18n>
          Add external member
        </a>
      </div>
      <mat-expansion-panel class="mat-elevation-z0" #addExistingInstances>
        <mat-expansion-panel-header class="add-instances-header">
          <mat-panel-title class="fl-bold" i18n>Add existing instances</mat-panel-title>
          <mat-panel-description *ngIf="!addExistingInstances.expanded" i18n>
            Expand to see available instances
          </mat-panel-description>
        </mat-expansion-panel-header>
        <div layoutDirection="column">
          <mat-form-field [formGroup]="searchInstances">
            <mat-label i18n>Search instances</mat-label>
            <input matInput type="text" formControlName="search" placeholder="Search instances" i18n-placeholder>
          </mat-form-field>
          <div layoutDirection="row">
            <p class="fl-bold" appFlex="40%" i18n>Name</p>
            <p class="fl-bold" appFlex="40%" i18n>IP Address</p>
          </div>
          <hr class="full-width">
          <div *ngFor="let instance of filteredInstances$ | async" layoutDirection="row" layoutAlign="start center">
            <p appFlex="40%">{{instance.name}}</p>
            <p appFlex="40%">{{instance.access_ip}}</p>
            <a mat-icon-button (click)="addExistingInstance(instance)">
              <mat-icon>add</mat-icon>
            </a>
          </div>
        </div>
      </mat-expansion-panel>
    </div>

    <!-- monitor details -->
    <div *ngIf="activeStep === 4" layoutDirection="column" formGroupName="monitor_details">
      <p class="fl-detail" i18n>Provide the details for the health monitor.</p>
      <div layoutDirection="row" layoutDirection-xs="column" appLayoutGap="10px">
        <mat-form-field appFlex="33%">
          <mat-label i18n>Name</mat-label>
          <input matInput placeholder="Name" i18n-placeholder type="text" formControlName="name">
          <mat-error>{{fieldErrors['name']}}</mat-error>
        </mat-form-field>
        <mat-form-field appFlex="33%">
          <mat-label i18n>Type</mat-label>
          <mat-select placeholder="Type" i18n-placeholder formControlName="type" required>
            <mat-option *ngFor="let type of createOptions.monitor_types | keyvalue"
                        [value]="type.key">
              {{type.value}}
            </mat-option>
          </mat-select>
        </mat-form-field>
        <mat-form-field appFlex="33%">
          <mat-label i18n>Max retries down</mat-label>
          <input matInput type="number" placeholder="Max retries down" i18n-placeholder
                 formControlName="max_retries_down" min="1" required>
          <mat-error>{{fieldErrors['max_retries_down']}}</mat-error>
        </mat-form-field>
      </div>
      <div layoutDirection="row" layoutDirection-xs="column" appLayoutGap="10px">
        <mat-form-field appFlex="33%">
          <mat-label i18n>Delay(sec)</mat-label>
          <input matInput type="number" placeholder="Delay(sec)" i18n-placeholder
                 formControlName="delay" min="0" required>
          <mat-error>{{fieldErrors['delay']}}</mat-error>
        </mat-form-field>
        <mat-form-field appFlex="33%">
          <mat-label i18n>Max retries</mat-label>
          <input matInput type="number" placeholder="Max retries" i18n-placeholder
                 formControlName="max_retries" min="1" required>
          <mat-error>{{fieldErrors['max_retries']}}</mat-error>
        </mat-form-field>
        <mat-form-field appFlex="33%">
          <mat-label i18n>Timeout(sec)</mat-label>
          <input matInput type="number" placeholder="Timeout(sec)" i18n-placeholder
                 formControlName="timeout" min="0">
          <mat-error>{{fieldErrors['timeout']}}</mat-error>
        </mat-form-field>
      </div>
      <div *ngIf="['HTTP', 'HTTPS'].includes(monitorDetails.controls.type.value)"
           layoutDirection="row" layoutDirection-xs="column" appLayoutGap="10px">
        <mat-form-field appFlex="33%">
          <mat-label i18n>HTTP method</mat-label>
          <mat-select placeholder="HTTP method" i18n-placeholder formControlName="http_method">
            <mat-option *ngFor="let type of createOptions.monitor_http_methods | keyvalue"
                        [value]="type.key">
              {{type.value}}
            </mat-option>
          </mat-select>
        </mat-form-field>
        <mat-form-field appFlex="33%">
          <mat-label i18n>Expected codes</mat-label>
          <input matInput placeholder="Expected codes" i18n-placeholder type="text"
                 formControlName="expected_codes">
          <mat-error>{{fieldErrors['expected_codes']}}</mat-error>
        </mat-form-field>
        <mat-form-field appFlex="33%">
          <mat-label i18n>URL path</mat-label>
          <input matInput placeholder="URL path" i18n-placeholder type="text"
                 formControlName="url_path">
          <mat-error>{{fieldErrors['url_path']}}</mat-error>
        </mat-form-field>
      </div>
      <mat-checkbox formControlName="admin_state_up" color="primary" class="fl-margin-top" i18n>Admin state up</mat-checkbox>
    </div>
  </form>
</div>
