@if (isShowIntro()) {
  <issue-panel-intro></issue-panel-intro>
}

<mat-tab-group
  mat-align-tabs="start"
  mat-stretch-tabs="false"
  dynamicHeight="true"
  preserveContent="false"
  cdkDropList
  cdkDropListOrientation="horizontal"
  (cdkDropListDropped)="drop($event)"
  cdkDropListElementContainer=".mat-mdc-tab-labels"
  class="example-drag-tabs"
  [selectedIndex]="selectedTabIndex()"
>
  @for (entry of issueProvidersMapped(); track entry.issueProvider.id) {
    <mat-tab>
      <ng-template mat-tab-label>
        <div
          cdkDrag
          cdkDragLockAxis="x"
          [cdkDragStartDelay]="dragStartDelay"
          cdkDragRootElement=".mat-mdc-tab"
          cdkDragPreviewClass="issue-provider-drag-preview"
          class="tab-header-item"
          [class.disabled]="!entry.issueProvider.isEnabled"
          (longPressIOS)="openEditIssueProvider(entry.issueProvider)"
          (longPress)="openEditIssueProvider(entry.issueProvider)"
        >
          @if (entry.issueProvider.issueProviderKey | issueIcon; as icon) {
            <mat-icon
              [svgIcon]="icon"
              [matTooltip]="entry.tooltip"
              matTooltipPosition="above"
            ></mat-icon>
          } @else {
            <mat-icon
              [matTooltip]="entry.tooltip"
              matTooltipPosition="above"
              >extension</mat-icon
            >
          }
          <div class="initials">{{ entry.initials }}</div>
        </div>
      </ng-template>
      <ng-template matTabContent>
        @if (entry.missingPluginName) {
          <div style="padding: 16px; opacity: 0.7; text-align: center">
            <mat-icon style="vertical-align: middle; margin-right: 4px"
              >extension_off</mat-icon
            >
            {{
              T.F.ISSUE.S.PLUGIN_NOT_INSTALLED
                | translate: { pluginName: entry.missingPluginName }
            }}
            <div style="margin-top: 16px">
              <button
                mat-stroked-button
                color="warn"
                (click)="removeMissingProvider(entry.issueProvider)"
              >
                <mat-icon>delete</mat-icon>
                {{ T.G.DELETE | translate }}
              </button>
            </div>
          </div>
        } @else {
          <issue-provider-tab [issueProvider]="entry.issueProvider"></issue-provider-tab>
        }
      </ng-template>
    </mat-tab>
  }

  <mat-tab>
    <ng-template mat-tab-label>
      <div class="tab-header-item">
        <mat-icon>add_circle</mat-icon>
      </div>
    </ng-template>

    <ng-template matTabContent>
      <issue-provider-setup-overview></issue-provider-setup-overview>
    </ng-template>
  </mat-tab>
</mat-tab-group>