<div class="pa-main-container">
  <div class="pa-main-side-panel">
    <div class="panel-header">
      <pa-button
        icon="arrow-left"
        aspect="basic"
        (click)="goBack()">
        Back
      </pa-button>
      <div class="title-l">
        {{ zoneTitle }}
      </div>
    </div>
  </div>
  <div class="pa-main-container-wide">
    <h3>{{ addZone ? 'Add zone' : 'Zone details' }}</h3>
    <form
      [formGroup]="zoneForm"
      (submit)="save()">
      @if (!addZone) {
        <pa-input
          readonly
          formControlName="id">
          Id
        </pa-input>
      }
      <pa-input formControlName="slug">Slug</pa-input>
      <pa-input formControlName="title">Title</pa-input>
      <pa-input formControlName="subdomain">Subdomain</pa-input>
      <pa-select
        formControlName="cloud_provider"
        label="Cloud provider">
        <pa-option value="GCP">GCP</pa-option>
        <pa-option value="AWS">AWS</pa-option>
      </pa-select>
      @if (!addZone) {
        <pa-input
          readonly
          formControlName="creator">
          Creator
        </pa-input>
        <pa-input
          readonly
          formControlName="created">
          Created
        </pa-input>
        <pa-input
          readonly
          formControlName="modified">
          Modified
        </pa-input>
      }
      <footer>
        <pa-button
          type="submit"
          kind="primary"
          [disabled]="zoneForm.pristine || zoneForm.invalid || isSaving">
          Save
        </pa-button>
        @if (!addZone) {
          <pa-button
            aspect="basic"
            (click)="reset()">
            Cancel
          </pa-button>
        }
      </footer>
    </form>
  </div>
</div>
