<h1 mat-dialog-title>
  @if (issueProviderKey | issueIcon; as icon) {
    <mat-icon
      class="dialog-header-icon"
      [svgIcon]="icon"
    ></mat-icon>
  } @else {
    <mat-icon class="dialog-header-icon">extension</mat-icon>
  }
  {{
    (isEdit ? T.F.ISSUE.DIALOG.EDIT_TITLE : T.F.ISSUE.DIALOG.SETUP_TITLE)
      | translate: { title: title }
  }}
</h1>

<form
  [formGroup]="form"
  (ngSubmit)="submit()"
>
  <mat-dialog-content>
    @if (configFormSection?.help || configFormSection?.helpArr) {
      <help-section>
        @if (configFormSection?.help) {
          <div [innerHtml]="configFormSection?.help | translate"></div>
        }
        @if (configFormSection?.helpArr) {
          @for (helpSection of configFormSection?.helpArr; track helpSection) {
            @if (helpSection.h) {
              <div class="mat-caption">{{ helpSection.h | translate }}</div>
            }
            @if (helpSection.p) {
              <p [innerHTML]="helpSection.p | translate"></p>
            }
            @if (helpSection.p2) {
              <p [innerHTML]="helpSection.p2 | translate"></p>
            }
            @if (helpSection.p3) {
              <p [innerHTML]="helpSection.p3 | translate"></p>
            }
            @if (helpSection.p4) {
              <p [innerHTML]="helpSection.p4 | translate"></p>
            }
          }
        }
      </help-section>
    }
    @if (isEdit) {
      <div style="margin-bottom: 32px">
        <mat-slide-toggle
          [ngModel]="model.isEnabled"
          (ngModelChange)="changeEnabled($event)"
          [ngModelOptions]="{ standalone: true }"
        >
          {{ T.G.ENABLED | translate }}
        </mat-slide-toggle>
      </div>
    }
    <!-- -->
    @if (model.isEnabled) {
      <!-- -->
      @if (issueProviderKey === ICAL_TYPE) {
        <!-- -->
        @if (d.calendarContextInfoTarget === 'GOOGLE') {
          <div class="tpl">
            <p>
              <a
                target="_blank"
                href="https://support.google.com/calendar/answer/37648?hl=en#zippy=%2Cget-your-calendar-view-only"
                >How to get the iCal url for Google Calendar (view only)?</a
              >
            </p>
          </div>
        }
        <!-- -->
        @if (d.calendarContextInfoTarget === 'OUTLOOK365') {
          <div class="tpl">
            <p>
              <a
                target="_blank"
                href="https://support.pushpay.com/s/article/How-do-I-get-an-iCal-link-from-Office-365"
                >How to get the iCal url for Outlook 365 (ICS)?</a
              >
            </p>
          </div>
        }
      }
      <!-- -->
      @if (
        issueProviderKey === 'JIRA' &&
        IS_WEB_EXTENSION_REQUIRED_FOR_JIRA &&
        !isJiraDirectFetchEnabled
      ) {
        <div [ngClass]="HelperClasses.isHideForAdvancedFeatures">
          <p [innerHTML]="T.F.ISSUE.CROSS_ORIGIN_BROWSER_WARNING | translate"></p>
        </div>
        <div [ngClass]="HelperClasses.isHideForAdvancedFeatures">
          <p [innerHTML]="T.G.EXTENSION_INFO | translate"></p>
        </div>
      }
      @for (btn of oauthButtons; track btn.label) {
        <div class="action-row">
          @if (isOAuthUnavailableInWeb(btn.oauthConfig)) {
            <button
              mat-stroked-button
              type="button"
              disabled
            >
              <mat-icon>block</mat-icon>
              {{ btn.label }}
            </button>
            <span class="error-status">
              <mat-icon class="error-status-icon">info</mat-icon>
              {{ T.F.ISSUE.DIALOG.OAUTH_UNAVAILABLE_WEB | translate }}
            </span>
          } @else if (isOAuthConnected()) {
            <button
              mat-stroked-button
              type="button"
              color="primary"
              (click)="disconnectOAuth()"
            >
              <mat-icon>link_off</mat-icon>
              {{ T.F.ISSUE.DIALOG.DISCONNECT | translate }}
            </button>
            <span class="connected-status">
              <mat-icon class="connected-status-icon">check_circle</mat-icon>
              {{ T.F.ISSUE.DIALOG.CONNECTED | translate }}
            </span>
          } @else {
            <button
              mat-stroked-button
              type="button"
              color="primary"
              [disabled]="isOAuthConnecting()"
              (click)="connectOAuth(btn.oauthConfig)"
            >
              <mat-icon>login</mat-icon>
              {{ btn.label }}
            </button>
          }
        </div>
      }
      @if (showLoadOptionsButton) {
        <div class="action-row">
          @switch (optionsLoadState()) {
            @case ('loading') {
              <button
                mat-stroked-button
                type="button"
                disabled
              >
                <mat-icon class="spin">sync</mat-icon>
                {{ T.F.ISSUE.DIALOG.LOADING_OPTIONS | translate }}
              </button>
            }
            @case ('loaded') {
              <button
                mat-stroked-button
                type="button"
                color="primary"
                (click)="loadDynamicOptions()"
              >
                <mat-icon>refresh</mat-icon>
                {{ T.F.ISSUE.DIALOG.RELOAD_OPTIONS | translate }}
              </button>
              <span class="connected-status">
                <mat-icon class="connected-status-icon">check_circle</mat-icon>
                {{ T.F.ISSUE.DIALOG.OPTIONS_LOADED | translate }}
              </span>
            }
            @case ('failed') {
              <button
                mat-stroked-button
                type="button"
                color="warn"
                (click)="loadDynamicOptions()"
              >
                <mat-icon>refresh</mat-icon>
                {{ T.F.ISSUE.DIALOG.LOAD_OPTIONS | translate }}
              </button>
              <span class="error-status">
                <mat-icon class="error-status-icon">error</mat-icon>
                {{ T.F.ISSUE.DIALOG.LOAD_OPTIONS_FAILED | translate }}
              </span>
            }
            @default {
              <button
                mat-stroked-button
                type="button"
                color="primary"
                (click)="loadDynamicOptions()"
              >
                <mat-icon>cloud_download</mat-icon>
                {{ T.F.ISSUE.DIALOG.LOAD_OPTIONS | translate }}
              </button>
            }
          }
        </div>
      }
      <formly-form
        [model]="model"
        (modelChange)="formlyModelChange($event)"
        [fields]="fields"
        [form]="form"
      ></formly-form>

      @if (!isAgendaView) {
        <chip-list-input
          (addItem)="addTag($event)"
          (addNewItem)="addNewTag($event)"
          (removeItem)="removeTag($event)"
          [label]="T.F.ISSUE.DEFAULT_TAGS_LABEL | translate"
          [model]="model.defaultTagIds || []"
          [suggestions]="tagSuggestions()"
        ></chip-list-input>
      }

      @switch (issueProviderKey) {
        <!-- -->
        @case ('JIRA') {
          <jira-additonal-cfg
            [section]="configFormSection"
            [cfg]="model"
            (modelChange)="customCfgCmpSave($event)"
          ></jira-additonal-cfg>
          <!-- -->
        }
        @case ('OPEN_PROJECT') {
          <open-project-additional-cfg
            [section]="configFormSection"
            [cfg]="model"
            (modelChange)="customCfgCmpSave($event)"
          ></open-project-additional-cfg>
          <!-- -->
        }
        @case ('NEXTCLOUD_DECK') {
          <nextcloud-deck-additional-cfg
            [section]="configFormSection"
            [cfg]="model"
            (modelChange)="customCfgCmpSave($event)"
          ></nextcloud-deck-additional-cfg>
          <!-- -->
        }
      }
    }
  </mat-dialog-content>

  <mat-dialog-actions align="end">
    <button
      (click)="cancel()"
      mat-button
      type="button"
    >
      {{ T.G.CANCEL | translate }}
    </button>

    @if (isEdit) {
      <button
        (click)="duplicate()"
        color="primary"
        mat-button
        type="button"
      >
        <mat-icon>content_copy</mat-icon>
        {{ T.G.DUPLICATE | translate }}
      </button>
      <button
        (click)="remove()"
        color="warn"
        mat-button
        type="button"
      >
        <mat-icon>delete_forever</mat-icon>
        {{ T.G.DELETE | translate }}
      </button>
    } @else {
      <!-- -->
      @if (isConnectionWorks()) {
        <div class="success-info">
          <mat-icon>check</mat-icon>
        </div>
      } @else {
        <button
          (click)="testConnection()"
          mat-button
          color="primary"
          type="button"
          [disabled]="form.invalid"
        >
          <mat-icon>online_prediction</mat-icon>
          {{ T.F.ISSUE.DIALOG.TEST_CONNECTION | translate }}
        </button>
      }
      <!-- -->
    }
    <button
      color="primary"
      mat-flat-button
      type="submit"
      [disabled]="form.invalid"
    >
      <mat-icon>save</mat-icon>
      {{ T.G.SAVE | translate }}
    </button>
  </mat-dialog-actions>
</form>
