<div class="container">
  <div class="metadata-registry row">
    <div class="col-12">

      <h1 id="header" class="border-bottom pb-2">{{'admin.reports.items.head' | translate}}</h1>

      <div id="querydiv" [formGroup]="queryForm">
        <ngb-accordion [closeOthers]="true" activeIds="collectionSelector" #acc="ngbAccordion">
          <ngb-panel id="collectionSelector">
            <ng-template ngbPanelTitle>
              {{'admin.reports.items.section.collectionSelector' | translate}}
            </ng-template>
            <ng-template ngbPanelContent>
              @if (loadingCollections$ | async) {
                <ds-loading></ds-loading>
              }
              @if ((loadingCollections$ | async) !== true) {
                <select id="collSel" name="collSel" class="form-control" multiple="multiple" size="10" formControlName="collections">
                  @for (item of collections; track item) {
                    <option [value]="item.id" [disabled]="item.disabled">{{item.name$ | async}}</option>
                  }
                </select>
              }
              <div class="row">
                <span class="col-3"></span>
                <button class="btn btn-primary mt-1 col-6" (click)="submit()">{{'admin.reports.items.run' | translate}}</button>
              </div>
            </ng-template>
          </ngb-panel>
          <ngb-panel id="metadataFieldQueries">
            <ng-template ngbPanelTitle>
              {{'admin.reports.items.section.metadataFieldQueries' | translate}}
            </ng-template>
            <ng-template ngbPanelContent>
              <fieldset id="predefqueries" class="form-group">
                <label>
                  {{'admin.reports.items.predefinedQueries' | translate}}
                </label>
                <select id="predefselect" formControlName="presetQuery" class="form-control" (change)="setPresetQuery()">
                  @for (item of presetQueries; track item.id) {
                    <option [value]="item.id" [selected]="item.isDefault">{{item.label | translate}}</option>
                  }
                </select>
              </fieldset>
              <div class="row">&nbsp;</div>
              <div id="queries">
                @for (pred of queryPredicatesArray().controls; track pred; let i = $index) {
                  <div class="metadata">
                    <div [formGroup]="pred" class="form-group">
                      <div class="form-row">
                        <div class="col-4">
                          <select class="query-tool" formControlName="field" class="form-control">
                            @for (item of metadataFieldsWithAny; track item) {
                              <option [value]="item.id">{{item.name$ | async}}</option>
                            }
                          </select>
                        </div>
                        <div class="col-auto">
                          <select class="query-tool" formControlName="operator" class="form-control">
                            @for (item of predicates; track item) {
                              <option [value]="item.id">{{item.name$ | async | translate}}</option>
                            }
                          </select>
                        </div>
                        <div class="col">
                          <input class="form-control" formControlName="value"/>
                        </div>
                        <div class="col-auto">
                          <button class="btn btn-light" (click)="addQueryPredicate()">+</button>
                          &nbsp;
                          <button class="btn btn-light" [dsBtnDisabled]="deleteQueryPredicateDisabled()" (click)="deleteQueryPredicate(i)">–</button>
                        </div>
                      </div>
                    </div>
                  </div>
                }
              </div>
              <div class="row">
                <span class="col-3"></span>
                <button class="btn btn-primary mt-1 col-6" (click)="submit()">{{'admin.reports.items.run' | translate}}</button>
              </div>
            </ng-template>
          </ngb-panel>
          <ngb-panel id="limitPaginateQueries">
            <ng-template ngbPanelTitle>
              {{'admin.reports.items.section.limitPaginateQueries' | translate}}
            </ng-template>
            <ng-template ngbPanelContent>
              <div class="row align-items-center">
                <label for="limit" class="col-sm-2 col-form-label">{{'admin.reports.items.limit' | translate}}:</label>
                <div class="col-6">
                  <select id="limit" name="limit" formControlName="pageLimit" class="form-control col-6">
                    @for (item of pageLimits; track item) {
                      <option value="{{item.id}}" [selected]="item.isDefault">{{item.name$ | async}}</option>
                    }
                  </select>
                </div>
              </div>
              <div class="row align-items-center">
                <label for="offset" class="col-sm-2 col-form-label">{{'admin.reports.items.offset' | translate}}:</label>
                <div class="col-6">
                  <input id="offset" name="offset" value="0" class="form-control col-6">
                </div>
              </div>
              <div class="row">
                <span class="col-3"></span>
                <button class="btn btn-primary mt-1 col-6" (click)="submit()">{{'admin.reports.items.run' | translate}}</button>
              </div>
            </ng-template>
          </ngb-panel>
          <ngb-panel id="filters">
            <ng-template ngbPanelTitle>
              {{'admin.reports.commons.filters' | translate}}
            </ng-template>
            <ng-template ngbPanelContent>
              <div class="row">
                <span class="col-3"></span>
                <button class="btn btn-primary mt-1 col-6" (click)="submit()">{{'admin.reports.items.run' | translate}}</button>
              </div>
              <ds-filters [filtersForm]="filtersFormGroup()"></ds-filters>
              <div class="row">
                <span class="col-3"></span>
                <button class="btn btn-primary mt-1 col-6" (click)="submit()">{{'admin.reports.items.run' | translate}}</button>
              </div>
            </ng-template>
          </ngb-panel>
          <ngb-panel id="additionalData">
            <ng-template ngbPanelTitle>
              {{'admin.reports.commons.additional-data' | translate}}
            </ng-template>
            <ng-template ngbPanelContent>
              <div id="show-fields">
                <select class="query-tool" name="show_fields" multiple="multiple" size="8" class="form-control" formControlName="additionalFields">
                  @for (item of metadataFields; track item) {
                    <option [value]="item.id">{{item.name$ | async}}</option>
                  }
                </select>
              </div>
              <div class="row">
                @if (csvExportEnabled$ | async) {
                  <span class="col-3"></span>
                  <div class="warning">{{ 'metadata-export-filtered-items.columns.warning' | translate }}</div>
                }
                <span class="col-3"></span>
                <button class="btn btn-primary mt-1 col-6" (click)="submit()">{{'admin.reports.items.run' | translate}}</button>
              </div>
            </ng-template>
          </ngb-panel>
          <ngb-panel id="itemResults">
            <ng-template ngbPanelTitle>
              {{'admin.reports.collections.item-results' | translate}}
            </ng-template>
            <ng-template ngbPanelContent>
              <table id="table" class="table table-striped">
                <thead>
                  <tr class="header">
                    <th>{{ "admin.reports.items.number" | translate }}</th>
                    <th>{{ "admin.reports.items.id" | translate }}</th>
                    <th>{{ "admin.reports.items.collection" | translate }}</th>
                    <th>{{ "admin.reports.items.handle" | translate }}</th>
                    <th>{{ "admin.reports.items.title" | translate }}</th>
                    @for (field of queryForm.value['additionalFields']; track field) {
                      <th>{{ field }}</th>
                    }
                  </tr>
                </thead>
                <tbody>
                  @for (item of results$ | async; track item) {
                    <tr>
                      <td class="num">{{ item.index }}</td>
                      <td>{{ item.uuid }}</td>
                      <td>@if (item.owningCollection) {
                        <a href="/handle/{{ item.owningCollection.handle }}" rel="noopener noreferrer" target="_blank">{{ item.owningCollection.name }}</a>
                      }</td>
                      <td>@if (item.handle) {
                        <a href="/handle/{{ item.handle }}" rel="noopener noreferrer" target="_blank">{{ item.handle }}</a>
                      }</td>
                      <td>{{ item.name }}</td>
                      @for (field of queryForm.value['additionalFields']; track field) {
                        <td class="num">
                          @for (mdvalue of item.metadata[field]; track mdvalue) {
                            <span>
                              {{ mdvalue.value || "" }}
                            </span>
                          }
                        </td>
                      }
                    </tr>
                  }
                </tbody>
              </table>
              <div>
                {{'admin.reports.commons.page' | translate}} {{ currentPage + 1 }} {{'admin.reports.commons.of' | translate}} {{ pageCount() }}
              </div>
              <div>
                <button id="prev" class="btn btn-light" (click)="prevPage()" [dsBtnDisabled]="!canNavigatePrevious()">{{'admin.reports.commons.previous-page' | translate}}</button>
                <button id="next" class="btn btn-light" (click)="nextPage()" [dsBtnDisabled]="!canNavigateNext()">{{'admin.reports.commons.next-page' | translate}}</button>
                <div style="float: right; margin-right: 60px;">
                  <ds-filtered-items-export-csv [reportParams]="queryForm"></ds-filtered-items-export-csv>
                </div>
              </div>
              <table id="itemtable" class="sortable"></table>
            </ng-template>
          </ngb-panel>
        </ngb-accordion>
      </div>

    </div>
  </div>
</div>
