<form #form (ngSubmit)="submit()" [appApiAction]="formPromise">
  <ng-container *ngIf="organizations$ | async as organizations">
    <header>
      <div class="left">
        <button type="button" (click)="cancel()">{{ "cancel" | i18n }}</button>
      </div>
      <h1 class="center">
        <span class="title">{{ "moveToOrganization" | i18n }}</span>
      </h1>
      <div class="right">
        <button
          type="submit"
          [disabled]="form.loading || !canSave"
          *ngIf="organizations && organizations.length"
        >
          <span [hidden]="form.loading">{{ "move" | i18n }}</span>
          <i
            class="bwi bwi-spinner bwi-lg bwi-spin"
            [hidden]="!form.loading"
            aria-hidden="true"
          ></i>
        </button>
      </div>
    </header>
    <main tabindex="-1">
      <div class="box">
        <div class="box-content" *ngIf="!organizations || !organizations.length">
          <div class="box-content-row padded no-hover">
            {{ "noOrganizationsList" | i18n }}
          </div>
        </div>
        <div class="box-content" *ngIf="organizations && organizations.length">
          <div class="box-content-row" appBoxRow>
            <label for="organization">{{ "organization" | i18n }}</label>
            <select
              id="organization"
              name="OrganizationId"
              aria-describedby="organizationHelp"
              [(ngModel)]="organizationId"
              (change)="filterCollections()"
            >
              <option *ngFor="let o of organizations" [ngValue]="o.id">{{ o.name }}</option>
            </select>
          </div>
        </div>
        <div id="organizationHelp" class="box-footer">
          {{ "moveToOrgDesc" | i18n }}
        </div>
      </div>
      <div class="box" *ngIf="organizations && organizations.length">
        <h2 class="box-header">
          {{ "collections" | i18n }}
        </h2>
        <div class="box-content" *ngIf="!collections || !collections.length">
          <div class="box-content-row padded no-hover">
            {{ "noCollectionsInList" | i18n }}
          </div>
        </div>
        <div class="box-content" *ngIf="collections && collections.length">
          <div
            class="box-content-row box-content-row-checkbox"
            *ngFor="let c of collections; let i = index"
            appBoxRow
          >
            <label for="collection_{{ i }}">{{ c.name }}</label>
            <input
              id="collection_{{ i }}"
              type="checkbox"
              [(ngModel)]="c.checked"
              name="Collection[{{ i }}].Checked"
            />
          </div>
        </div>
      </div>
    </main>
  </ng-container>
</form>
