<c8y-modal
  [title]="'Import custom icons' | translate"
  [headerClasses]="'dialog-header'"
  (onDismiss)="close()"
  (onClose)="confirmImport()"
  [close]="keepOpen"
  [dismiss]="keepOpen"
  [disabled]="state() !== 'previewing' || toImportIcons().length === 0"
  [labels]="{
    cancel: 'Cancel',
    ok: 'Import' | translate
  }"
>
  <ng-container c8y-modal-title>
    <span
      [c8yIcon]="'data-import'"
      aria-hidden="true"
    ></span>
  </ng-container>

  <div class="p-24">
    @if (state() === 'idle') {
      <p
        class="text-16 text-center text-balance m-b-16"
        translate
      >
        Upload a ZIP file previously exported from the icon selector to import custom icons into
        this tenant.
      </p>
      <div class="d-flex j-c-center">
        <c8y-drop-area
          [icon]="'upload'"
          style="width: 390px"
          [title]="'Upload icon ZIP' | translate"
          accept=".zip"
          [maxAllowedFiles]="1"
          [message]="'Drop your .zip export file here or click to browse' | translate"
          (dropped)="onZipDropped($event)"
        ></c8y-drop-area>
        @if (dropError()) {
          <div
            class="alert alert-danger m-t-8"
            role="alert"
          >
            {{ dropError() }}
          </div>
        }
      </div>
    }

    @if (state() === 'previewing') {
      @if (toImportIcons().length) {
        <p
          class="m-b-8 text-bold"
          translate
        >
          The following icons will be imported:
        </p>
        <ul class="list-unstyled m-b-16 separator-top">
          @for (icon of toImportIcons(); track icon.name) {
            <li class="d-flex a-i-center gap-8 p-t-8 p-b-8 separator-bottom">
              <span
                class="p-relative flex-no-shrink"
                [style.width.px]="24"
                [style.height.px]="24"
                aria-hidden="true"
              >
                <span
                  class="d-flex a-i-center j-c-center fit-w fit-h"
                  [class.text-default]="!icon.previewHtmlSecondary"
                  [style.color]="
                    icon.previewHtmlSecondary
                      ? 'var(--c8y-root-component-icon-dark-color-dark)'
                      : null
                  "
                  [innerHTML]="icon.previewHtml"
                ></span>
                @if (icon.previewHtmlSecondary) {
                  <span
                    class="d-flex a-i-center j-c-center fit-w fit-h p-absolute"
                    style="top: 0; left: 0; color: var(--c8y-root-component-icon-dark-color-light)"
                    [innerHTML]="icon.previewHtmlSecondary"
                  ></span>
                }
              </span>
              <span class="flex-grow min-width-0 text-truncate">
                {{ icon.name }}
                @if (icon.category && !icon.isOverride) {
                  <small class="text-muted m-l-4">{{ icon.category | translate }}</small>
                }
              </span>
              <span class="tag tag--info flex-no-shrink">
                {{ familyLabels[icon.family] | translate }}
              </span>
              @if (icon.isOverride) {
                <span
                  class="tag tag--warning flex-no-shrink"
                  translate
                  >Override</span
                >
              }
            </li>
          }
        </ul>
      } @else if (allSkippedExist()) {
        <div
          class="alert alert-warning"
          role="status"
          translate
        >
          All icons in this file already exist in this tenant.
        </div>
      } @else {
        <div
          class="alert alert-warning"
          role="status"
          translate
        >
          No icons to import.
        </div>
      }
      @if (skippedIcons().length && !(allSkippedExist() && toImportIcons().length === 0)) {
        <p
          class="m-b-8 text-bold"
          translate
        >
          The following icons will be skipped:
        </p>
        <ul class="list-unstyled m-b-16 separator-top">
          @for (icon of skippedIcons(); track icon.name) {
            <li class="d-flex a-i-center gap-8 p-t-8 p-b-8 separator-bottom">
              <span
                class="p-relative flex-no-shrink"
                [style.width.px]="24"
                [style.height.px]="24"
                aria-hidden="true"
              >
                <span
                  class="d-flex a-i-center j-c-center fit-w fit-h"
                  [class.text-default]="!icon.previewHtmlSecondary"
                  [style.color]="
                    icon.previewHtmlSecondary
                      ? 'var(--c8y-root-component-icon-dark-color-dark)'
                      : null
                  "
                  [innerHTML]="icon.previewHtml"
                ></span>
                @if (icon.previewHtmlSecondary) {
                  <span
                    class="d-flex a-i-center j-c-center fit-w fit-h p-absolute"
                    style="top: 0; left: 0; color: var(--c8y-root-component-icon-dark-color-light)"
                    [innerHTML]="icon.previewHtmlSecondary"
                  ></span>
                }
              </span>
              <span class="flex-grow min-width-0 text-truncate">
                {{ icon.name }}
                @if (icon.category && !icon.isOverride) {
                  <small class="text-muted m-l-4">{{ icon.category | translate }}</small>
                }
              </span>
              <span class="tag tag--warning flex-no-shrink">
                {{ skipReasonLabels[icon.reason] | translate }}
              </span>
            </li>
          }
        </ul>
      }
    }

    @if (state() === 'importing') {
      <c8y-loading
        role="status"
        [message]="'Importing icons…' | translate"
      ></c8y-loading>
    }
  </div>
</c8y-modal>