<ng-container *transloco="let t; prefix:'manage-matched-metadata'">
  <p>{{t('description')}}</p>

  <form [formGroup]="filterGroup">
    <div class="row g-0">
      <div class="col-auto ms-auto me-3">
        <label for="libtype-filter">{{t('library-type')}}</label>
        <select class="form-select" formControlName="libraryType" id="libtype-filter">
          <option [value]="-1">{{t('all-status-label')}}</option>
          @for(libType of allLibraryTypes; track libType) {
            <option [value]="libType">{{libType | libraryType}}</option>
          }
        </select>
      </div>
      <div class="col-auto">
        <label for="match-filter">{{t('matched-state-label')}}</label>
        <select class="form-select" formControlName="matchState" id="match-filter">
          @for(state of allMatchStates; track state) {
            <option [value]="state">{{state | matchStateOption}}</option>
          }
        </select>
      </div>
    </div>
  </form>

  <app-responsive-table [rows]="data()"
                        [trackByFn]="trackBy"
                        [totalItems]="pagination().totalItems"
                        [pageSize]="pagination().itemsPerPage"
                        [pageIndex]="pagination().currentPage"
                        (pageChange)="onPageChange($event.pageIndex)"
  >
    <ng-template #tableTemplate>
      <ngx-datatable
        class="bootstrap"
        [rows]="data()"
        [loadingIndicator]="isLoading()"
        [columnMode]="'flex'"
        rowHeight="auto"
        [footerHeight]="50"
        [externalPaging]="true"
        [limit]="pagination().itemsPerPage"
        [count]="pagination().totalItems"
        [offset]="pagination().currentPage"
        (page)="onPageChange($event.offset)"
      >

        <ngx-datatable-column prop="series.name" [sortable]="true" [draggable]="false" [resizeable]="false" [flexGrow]="3">
          <ng-template let-column="column" ngx-datatable-header-template>
            {{t('series-name-header')}}
          </ng-template>
          <ng-template let-item="row" ngx-datatable-cell-template>
            <app-image [width]="'32px'" [height]="'32px'" [imageUrl]="imageService.getSeriesCoverImage(item.series.id)" />
            <a class="ms-2" [href]="baseUrl + 'library/' + item.series.libraryId + '/series/' + item.series.id" target="_blank">{{item.series.name}}</a>
          </ng-template>
        </ngx-datatable-column>

        <ngx-datatable-column prop="series.libraryId" [sortable]="true" [draggable]="false" [resizeable]="false" [flexGrow]="2">
          <ng-template let-column="column" ngx-datatable-header-template>
            {{t('library-name-header')}}
          </ng-template>
          <ng-template let-item="row" ngx-datatable-cell-template>
            {{item.series.libraryId | libraryName | async}}
          </ng-template>
        </ngx-datatable-column>

        <ngx-datatable-column prop="status" [sortable]="false" [draggable]="false" [resizeable]="false" [flexGrow]="1">
          <ng-template let-column="column" ngx-datatable-header-template>
            {{t('status-header')}}
          </ng-template>
          <ng-template let-item="row" ngx-datatable-cell-template>
            @if (item.series.isBlacklisted) {
              {{t('blacklist-status-label')}}
            } @else if (item.series.dontMatch) {
              {{t('dont-match-status-label')}}
            } @else {
              @if (item.isMatched) {
                {{t('matched-status-label')}}

              } @else {
                {{t('unmatched-status-label')}}
              }
            }
          </ng-template>
        </ngx-datatable-column>

        @if (filterGroup.get('matchState')?.value === MatchStateOption.Matched) {
          <ngx-datatable-column prop="validUntilUtc" [sortable]="false" [draggable]="false" [resizeable]="false" [flexGrow]="1">
            <ng-template let-column="column" ngx-datatable-header-template>
              {{t('valid-until-header')}}
            </ng-template>
            <ng-template let-item="row" ngx-datatable-cell-template>
              @if (item.series.isBlacklisted || item.series.dontMatch || !item.isMatched) {
                {{null | defaultValue}}
              } @else {
                {{item.validUntilUtc | utcToLocalTime}}
              }
            </ng-template>
          </ngx-datatable-column>
        }

        <ngx-datatable-column prop="" [width]="20" [sortable]="false" [draggable]="false" [resizeable]="false" [flexGrow]="1">
          <ng-template let-column="column" ngx-datatable-header-template>
            {{t('actions-header')}}
          </ng-template>
          <ng-template let-item="row" ngx-datatable-cell-template>
            <button class="btn btn-icon" (click)="fixMatch(item.series)">
              <i class="fa-solid fa-magnifying-glass" aria-hidden="true"></i>
              <span class="visually-hidden">{{t('match-alt', {seriesName: item.series.name})}}</span>
            </button>
          </ng-template>
        </ngx-datatable-column>

      </ngx-datatable>
    </ng-template>

    <ng-template #cardTemplate let-item let-idx="index">
      <div class="card mb-3">
        <div class="card-body">
          <!-- Header with cover, series name and action button -->
          <div class="d-flex align-items-start mb-3">
            <app-image
              [width]="'48px'"
              [height]="'48px'"
              [imageUrl]="imageService.getSeriesCoverImage(item.series.id)"
              class="me-3" />
            <div class="flex-grow-1">
              <h5 class="card-title mb-1">
                <a [href]="baseUrl + 'library/' + item.series.libraryId + '/series/' + item.series.id"
                   target="_blank">
                  {{item.series.name}}
                </a>
              </h5>
              <div class="text-muted small">
                {{item.series.libraryId | libraryName | async}}
              </div>
            </div>
            <button class="btn btn-primary btn-sm" (click)="fixMatch(item.series)">
              <i class="fa-solid fa-magnifying-glass" aria-hidden="true"></i>
              <span class="visually-hidden">{{t('match-alt', {seriesName: item.series.name})}}</span>
            </button>
          </div>

          <!-- Details -->
          <div class="row g-2">
            <div class="col-6">
              <div class="text-muted small">{{t('status-header')}}</div>
              <div>
                @if (item.series.isBlacklisted) {
                  {{t('blacklist-status-label')}}
                } @else if (item.series.dontMatch) {
                  {{t('dont-match-status-label')}}
                } @else {
                  @if (item.isMatched) {
                    {{t('matched-status-label')}}
                  } @else {
                    {{t('unmatched-status-label')}}
                  }
                }
              </div>
            </div>

            @if (filterGroup.get('matchState')?.value === MatchStateOption.Matched) {
              <div class="col-6">
                <div class="text-muted small">{{t('valid-until-header')}}</div>
                <div>
                  @if (item.series.isBlacklisted || item.series.dontMatch || !item.isMatched) {
                    {{null | defaultValue}}
                  } @else {
                    {{item.validUntilUtc | utcToLocalTime}}
                  }
                </div>
              </div>
            }
          </div>
        </div>
      </div>
    </ng-template>
  </app-responsive-table>
</ng-container>
