<div *ngIf="object" class="fl-content fl-content-min-height">
  <div layoutDirection="row" layoutAlign="space-between start">
    <div layoutDirection="column" appFlex="50">
      <p class="fl-detail" i18n>Name: {{ object.name }}</p>
      <p class="fl-detail" i18n>
        TLD:
        <a *ngIf="authSvc.feature('ui.plugins.domains.tld-link'); else noTLDLink" class="active-link"
           routerLink="{{config.getPanelUrl('domains/tlds/' + object.tld.id)}}">
          {{ object.tld.name }}
        </a>
        <ng-template #noTLDLink>
          {{ object.tld.name }}
        </ng-template>
      </p>
      <p class="fl-detail" i18n>Status: {{ object.status_display }}</p>
      <p class="fl-detail" i18n>
        Dns management enabled: {{ object.dns_management | yesNo }}
      </p>
      <p class="fl-detail" i18n>
        Email forwarding enabled: {{ object.email_forwarding | yesNo }}
      </p>
      <p class="fl-detail" i18n>
        ID protection enabled: {{ object.id_protection | yesNo }}
      </p>
      <ng-container *ngIf="authSvc.feature('ui.plugins.domains.contact-info')">
        <p *ngIf="object.client_id">
          <a [routerLink]="[config.getPanelUrl('clients-users/clients'), object.client_id, 'edit']"
             class="active-link" i18n>Click here to edit client</a>
        </p>
        <p *ngIf="object.contact; else noContact">
          <a [routerLink]="[config.getPanelUrl('domains/contacts'), object.client_id, 'edit']"
             class="active-link" i18n>Click here to edit domain contact</a>
        </p>
        <ng-template #noContact>
          <p class="fl-detail" i18n>Domain has no contact associated</p>
        </ng-template>
      </ng-container>
    </div>
    <div layoutDirection="column" appFlex="50">
      <ng-container *ngIf="object.registration_period === 1; else multiYears">
        <p class="fl-detail" i18n>Registration period: {{ object.registration_period }} year</p>
      </ng-container>
      <ng-template #multiYears>
        <p class="fl-detail" i18n>Registration period: {{ object.registration_period }} years</p>
      </ng-template>
      <p class="fl-detail" *ngIf="object.price_display" i18n>Price: {{ object.price_display }}</p>
      <p class="fl-detail" i18n>
        Registration date:
        <span>{{ object.registration_date | nullValue }}</span>
      </p>
      <p class="fl-detail" i18n>
        Expiry date:
        <span>{{ object.expiry_date | nullValue }}</span>
      </p>
      <p class="fl-detail" i18n>
        Registrar lock active:
        <span *ngIf="object.registrar_locked">Yes</span>
        <span *ngIf="!object.registrar_locked">No</span>
      </p>
      <p class="fl-detail" i18n>Last registrar: {{ object.last_registrar_name }}</p>
    </div>
  </div>
  <ng-container *ngIf="authSvc.feature('ui.plugins.domains.change-registrar')">
    <h3 i18n>
      Select a registrar:
    </h3>
    <form *ngIf="domainRegistrars" layoutDirection="row" [formGroup]="registrarFrom">
      <mat-form-field>
        <mat-label i18n>Registrar</mat-label>
        <mat-select formControlName="registrar" placeholder="Select registrar ..." i18n-placeholder
                    required>
          <mat-option *ngFor="let registrar of domainRegistrars" [value]="registrar.id">
            {{ registrar.name }}
          </mat-option>
        </mat-select>
        <mat-error i18n>This field is required</mat-error>
      </mat-form-field>
      <button mat-button color="primary" class="fl-margin-top" (click)="saveRegistrar()" i18n>Save</button>
    </form>
  </ng-container>
  <div *ngIf="domainInfo && domainInfo.actions">
    <h3 i18n>Available actions:</h3>
    <div *ngIf="domainInfo.actions.length > 0; else noActions" layoutDirection="row" layoutAlign="start">
      <div *ngFor="let action of domainInfo.actions">
        <button mat-button color="primary" (click)="executeAction(action.name, action.display_name)"
                [disabled]="actionIsRunning">
          {{ action.display_name }}
        </button>
      </div>
    </div>
    <ng-template #noActions>
      <p class="fl-detail" i18n>No actions available.</p>
    </ng-template>

    <div *ngIf="actionStatusMessage">
      <div *ngIf="actionSucceeded">
        <p class="fl-green-color">{{ actionStatusMessage }}</p>
      </div>
      <div *ngIf="!actionSucceeded">
        <p class="fl-red-color">{{ actionStatusMessage }}</p>
      </div>
    </div>
  </div>
</div>
