<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-button (click)="dismiss()">
        <ion-icon slot="icon-only" name="close"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-title>Config</ion-title>
    <ion-buttons *ngIf="!loadingText && hasConfig" slot="end" class="ion-padding-end">
      <ion-button fill="clear" (click)="resetDefaults()">
        <ion-icon slot="start" name="refresh"></ion-icon>
        Reset Defaults
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding">

  <!-- loading -->
  <text-spinner *ngIf="loadingText; else loaded" [text]="loadingText"></text-spinner>

  <!-- not loading -->
  <ng-template #loaded>

    <ion-item *ngIf="hasConfig && !pkg.installed?.status.configured && !configForm.dirty">
      <ion-label>
        <ion-text color="success">To use the default config for {{ pkg.manifest.title }}, click "Save" below.</ion-text>
      </ion-label>
    </ion-item>

    <ng-container *ngIf="rec && showRec">
      <ion-item class="rec-item">
        <ion-label>
          <h2 style="display: flex; align-items: center;">
            <ion-icon size="small" style="margin: 4px" slot="start" color="primary" slot="start" name="ellipse"></ion-icon>
            <ion-thumbnail style="width: 3vh; height: 3vh; margin: 0px 2px 0px 5px;" slot="start">
              <img [src]="rec.dependentIcon" [alt]="rec.dependentTitle"/>
            </ion-thumbnail>
            <ion-text style="margin: 5px; font-family: 'Montserrat'; font-size: smaller;">{{ rec.dependentTitle }}</ion-text>
          </h2>
          <div style="margin: 7px 5px;">
            <p style="font-size: small; color: var(--ion-color-medium)"> {{ pkg.manifest.title }} config has been modified to satisfy {{ rec.dependentTitle }}.
              <ion-text color="dark">To accept the changes, click “Save” above.</ion-text>
            </p>
            <a style="font-size: small" *ngIf="!openRec" (click)="openRec = true">More Info</a>
            <ng-container *ngIf="openRec">
              <p style="margin-top: 10px; color: var(--ion-color-medium); font-size: small" [innerHTML]="rec.description"></p>
              <a style="font-size: x-small; font-style: italic;" (click)="openRec = false">hide</a>
            </ng-container>
            <ion-button style="position: absolute; right: 0; top: 0" color="primary" fill="clear" (click)="dismissRec()">
              <ion-icon name="close"></ion-icon>
            </ion-button>
          </div>
        </ion-label>
      </ion-item>
      <ion-item-divider></ion-item-divider>
    </ng-container>

    <!-- no config -->
    <ion-item *ngIf="!hasConfig">
      <ion-label>
        <p>No config options for {{ pkg.manifest.title }} {{ pkg.manifest.version }}.</p>
      </ion-label>
    </ion-item>

    <!-- has config -->
    <form *ngIf="hasConfig" [formGroup]="configForm" novalidate>
      <form-object
        [objectSpec]="configSpec"
        [formGroup]="configForm"
        [current]="current"
        [showEdited]="true"
      ></form-object>
    </form>
  </ng-template>
</ion-content>

<ion-footer>
  <ion-toolbar>
    <ion-buttons *ngIf="!loadingText" slot="end" class="ion-padding-end">
      <ion-button *ngIf="hasConfig" fill="outline" [disabled]="saving" (click)="save()" class="enter-click" [class.no-click]="saving">
        Save
      </ion-button>
      <ion-button *ngIf="!hasConfig" fill="outline" (click)="dismiss()" class="enter-click">
        Close
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-footer>
