<div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="moveToOrgTitle">
  <div class="modal-dialog" role="document">
    <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise">
      <ng-container *ngIf="organizations$ | async as organizations">
        <div class="modal-body">
          <div class="box">
            <h1 class="box-header" id="moveToOrgTitle">
              {{ "moveToOrganization" | i18n }}
            </h1>
            <div class="box-content" *ngIf="!organizations || !organizations.length">
              <div class="box-content-row">
                {{ "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">
              {{ "noCollectionsInList" | i18n }}
            </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>
        </div>
        <div class="modal-footer">
          <button
            type="submit"
            class="primary"
            appA11yTitle="{{ 'save' | i18n }}"
            [disabled]="form.loading || !canSave"
            *ngIf="organizations && organizations.length"
          >
            <i
              class="bwi bwi-save-changes bwi-lg bwi-fw"
              [hidden]="form.loading"
              aria-hidden="true"
            ></i>
            <i
              class="bwi bwi-spinner bwi-spin bwi-lg bwi-fw"
              [hidden]="!form.loading"
              aria-hidden="true"
            ></i>
          </button>
          <button type="button" (click)="close()">{{ "cancel" | i18n }}</button>
        </div>
      </ng-container>
    </form>
  </div>
</div>
