<div *ngIf="object" layoutDirection="column" class="fl-content fl-content-min-height">
  <p class="fl-detail" i18n>ID: {{ object.id }}</p>
  <p class="fl-detail" i18n>Project:
    <a *ngIf="config.authService.feature('ui.openstack.zones.project-link'); else noLink" [routerLink]="config.getPanelUrl('openstack/projects')" [queryParams]="{search: object.project_id}"
       class="active-link">
      {{ object.project_id }}
    </a>
    <ng-template #noLink>
      {{ object.project_id }}
    </ng-template>
  </p>
  <ng-container *ngIf="object.service">
    <p class="fl-detail" i18n>Service:
      <a [routerLink]="config.getPanelUrl('billing/services', object.service.id)" class="active-link">
        {{ object.service.id }}
      </a>
    </p>
    <p class="fl-detail" i18n>Client:
      <a [routerLink]="config.getPanelUrl('clients-users/clients', object.service.client.id)"
         class="active-link">
        {{ object.service.client.display }}
      </a>
    </p>
  </ng-container>
  <p class="fl-detail" i18n>Created at: <app-date-displayer [date]="object.created_at" withTime></app-date-displayer></p>
  <p class="fl-detail" i18n>Updated at: <app-date-displayer [date]="object.updated_at" withTime></app-date-displayer></p>
  <p class="fl-detail" i18n>Email: {{ object.email }}</p>
  <p class="fl-detail" i18n>TTL: {{ object.ttl }}</p>
  <p class="fl-detail" i18n>Type: {{ object.type }}</p>
  <div class="fl-detail" *ngIf="object.masters" i18n>
    Masters:
    <ul *ngIf="object.masters.length; else noMasters" class="fl-margin-left">
      <li *ngFor="let master of object.masters">
        {{ master }}
      </li>
    </ul>
    <ng-template #noMasters>n/a</ng-template>
  </div>
  <p class="fl-detail" i18n>Description: {{ object.description | nullValue }} </p>
  <p class="fl-detail" *ngIf="object.attributes">
    <span i18n>Attributes: </span>
    <ng-container *ngIf="object.attributes.length; else noAttributes">
      <span *ngFor="let attr of object.attributes; let last=last">
        {{ attr }}
        <ng-container *ngIf="!last">, </ng-container>
      </span>
    </ng-container>
    <ng-template #noAttributes>n/a</ng-template>
  </p>

  <div class="fl-margin-top" i18n>
    Records (<mat-icon class="warn-sign">warning</mat-icon> to edit a recordset, click on related row)
    <hr class="hide-xs">
  </div>

  <form *ngIf="recordsList" [formGroup]="recordsForm">
    <app-form-errors #formErrors [formGroup]="recordsForm"></app-form-errors>
    <div class="fl-detail position-relative">
      <div layoutDirection="row" class="fl-bold recordsets-titles hide-xs" appLayoutGap="10px">
        <p appFlex="200px" i18n>Subdomain</p>
        <p appFlex="100px" i18n>TTL</p>
        <p appFlex="100px" i18n>Type</p>
        <p appFlex="auto" i18n>Record</p>
      </div>
      <!-- Read only recordsets -->
      <div *ngFor="let recordset of recordsList.read_only_recordsets" class="recordset-row"
           layoutDirection="row" layoutDirection-xs="column" appLayoutGap="10px">
        <div appFlex="200px" xsFlex="auto" class="fl-ellipsis-text">
          {{ recordset.name }}
        </div>
        <div appFlex="100px" xsFlex="auto">
          {{ recordset.ttl }}
        </div>
        <div appFlex="100px" xsFlex="auto" class="fl-ellipsis-text">
          {{ recordset.type }}
        </div>
        <div appFlex="auto" layoutDirection="column">
          <div class="wrap-text-content" *ngFor="let record of recordset.records">
            {{record}}
          </div>
        </div>
      </div>

      <!-- Editable recordsets -->
      <ng-container *ngFor="let recordset of displayRecordsets; let recordsetIndex=index">
        <div class="recordset-row"
             layoutDirection="row" layoutDirection-xs="column" appLayoutGap="10px"
             *ngIf="!editableRows[recordset.id]"
             (click)="startEditingRow(recordset)">
          <div appFlex="200px" xsFlex="auto" class="fl-ellipsis-text">
            {{ recordset.name }}
            <div *ngIf="recordset.status === 'ERROR'">
              <span class="fl-red-color status-error-size" i18n>Status: {{recordset.status}}</span>
            </div>
          </div>
          <div appFlex="100px" xsFlex="auto">
            {{ recordset.ttl }}
          </div>
          <div appFlex="100px" xsFlex="auto" class="fl-ellipsis-text">
            {{ recordset.type }}
          </div>
          <div appFlex="auto" layoutDirection="column">
            <div class="wrap-text-content" *ngFor="let record of recordset.records">
              {{record}}
            </div>
          </div>
        </div>
        <div *ngIf="!recordset.deleted && editableRows[recordset.id]"
             [formGroup]="recordsetGroups[recordsetIndex].recordset"
             class="recordset-row"
             [class.invalid-recordset]="recordset.status === 'ERROR'"
             layoutDirection="row" layoutDirection-lt-md="column" appLayoutGap="10px">
          <mat-form-field appFlex="200px" ltMdFlex="auto"
                          [class.mat-form-field-invalid]="recordset.status === 'ERROR'">
            <mat-label i18n>Subdomain</mat-label>
            <input matInput type="text" formControlName="name" placeholder="Subdomain" i18n-placeholder required>
            <mat-error>{{recordsetGroups[recordsetIndex].recordset.controls.name.errors | errorFormatter}}</mat-error>
            <mat-hint *ngIf="recordset.status === 'ERROR'">
              <span class="fl-red-color" i18n>Status: {{recordset.status}}</span>
            </mat-hint>
          </mat-form-field>
          <mat-form-field appFlex="100px" ltMdFlex="auto"
                          [class.mat-form-field-invalid]="recordset.status === 'ERROR'">
            <mat-label i18n>TTL</mat-label>
            <input matInput type="number" formControlName="ttl" placeholder="TTL" i18n-placeholder min="1">
            <mat-error>
              {{recordsetGroups[recordsetIndex].recordset.controls.ttl.errors | errorFormatter: minTTL}}
            </mat-error>
          </mat-form-field>
          <div appFlex="140px" ltMdFlex="auto" layoutDirection="row" appLayoutGap="5px">
            <mat-form-field [class.mat-form-field-invalid]="recordset.status === 'ERROR'">
              <mat-label i18n>Type</mat-label>
              <mat-select formControlName="type" required>
                <mat-option *ngFor="let type of recordsList.record_types" [value]="type">
                  {{type}}
                </mat-option>
              </mat-select>
              <mat-error>{{recordsetGroups[recordsetIndex].recordset.controls.type.errors | errorFormatter}}</mat-error>
            </mat-form-field>
            <div class="hide-lt-md">
              <app-icon *ngIf="recordsetGroups[recordsetIndex].recordset.controls.type.value === 'TXT'"
                        [icon]="splitTxtInfoIcon">
              </app-icon>
            </div>
          </div>
          <div layoutDirection="row" layoutDirection-lt-md="column" appFlex="70%">
            <div appFlex="70%">
              <div *ngFor="let record of recordset.records; let recordIndex=index">
                <div
                  [formGroup]="recordsetGroups[recordsetIndex].recordArray[recordIndex]"
                  *ngIf="recordsetGroups[recordsetIndex].recordArray[recordIndex]"
                  class="push-record">
                  <mat-form-field
                    *ngFor="let fieldName of recordsetGroups[recordsetIndex].fieldNames; let first = first"
                    [class.offset-2]="!first"
                    appFlex="100%"
                    [ltLgFlex]="recordsetGroups[recordsetIndex].flexLtLg"
                    [class.mat-form-field-invalid]="recordset.status === 'ERROR'">
                    <mat-label>{{fieldName}}</mat-label>
                    <input matInput type="text" [formControlName]="fieldName" placeholder="{{fieldName}}" required>
                    <mat-error i18n>This field is required</mat-error>
                  </mat-form-field>
                  <button mat-icon-button *ngIf="recordsetGroups[recordsetIndex].canDeleteRecords"
                          class="delete-record-btn"
                          (click)="deleteRecord(recordsetIndex, recordIndex)" [attr.fl-tooltip]="deleteRecordTooltip">
                    <mat-icon>delete</mat-icon>
                  </button>
                </div>
              </div>
            </div>
            <div class="fl-margin-left">
              <button mat-icon-button [attr.fl-tooltip]="addRecordTooltip"
                      (click)="addRecord(recordsetIndex)">
                <mat-icon>add</mat-icon>
              </button>
              <button mat-icon-button [attr.fl-tooltip]="saveRecordsetTooltip"
                      (click)="saveRecordset(recordset.id, recordsetIndex)">
                <mat-icon>done</mat-icon>
              </button>
              <button mat-icon-button [attr.fl-tooltip]="cancelRecordTooltip"
                      *ngIf="!recordset.created"
                      (click)="cancelEdit(recordset, recordsetIndex)">
                <mat-icon>close</mat-icon>
              </button>
              <button mat-icon-button [attr.fl-tooltip]="deleteRecordsetTooltip"
                      (click)="deleteRecordset(recordsetIndex)">
                <mat-icon>delete</mat-icon>
              </button>
            </div>
          </div>
        </div>
      </ng-container>
    </div>

    <div layoutDirection="column" layoutAlign="center center" class="fl-margin-top">
      <button mat-fab (click)="addRecordset()"
              [disabled]="!objectController.permissions['dns.update']">
        <mat-icon>add</mat-icon>
      </button>
      <span class="fl-detail" i18n>Add recordset</span>
    </div>
  </form>
  <div layoutDirection="row" layoutAlign="end center" class="fl-margin-top">
    <button mat-button mat-raised-button color="primary" (click)="saveChanges()"
            [disabled]="!permissions['dns.synchronize_records'] ||
            !recordsList.recordsets.length || !changesWereMade || isInvalid()"
            i18n>Save all changes</button>
  </div>
</div>
