<div class="container">
  <div class="metadata-schema row">
    <div class="col-12" *ngVar="(metadataSchema$ | async) as schema">

      <h1 id="header" class="border-bottom pb-2">{{'admin.registries.schema.head' | translate}}: "{{schema?.prefix}}"</h1>

      <p id="description" class="pb-2">{{'admin.registries.schema.description' | translate:{ namespace: schema?.namespace } }}</p>

      <ds-metadata-field-form
        [metadataSchema]="schema"
      (submitForm)="forceUpdateFields()"></ds-metadata-field-form>

      <h2>{{'admin.registries.schema.fields.head' | translate}}</h2>

      <ng-container *ngVar="(metadataFields$ | async)?.payload as fields">
        @if (fields?.totalElements > 0) {
          <ds-pagination
            [paginationOptions]="config"
            [collectionSize]="fields?.totalElements"
            [hideGear]="false"
            [hidePagerWhenSinglePage]="true">
            <div class="table-responsive">
              <table id="metadata-fields" class="table table-striped table-hover">
                <thead>
                  <tr>
                    <th><span class="sr-only">{{'admin.registries.schema.fields.table.selected' | translate}}</span></th>
                    <th scope="col">{{'admin.registries.schema.fields.table.id' | translate}}</th>
                    <th scope="col">{{'admin.registries.schema.fields.table.field' | translate}}</th>
                    <th scope="col">{{'admin.registries.schema.fields.table.scopenote' | translate}}</th>
                  </tr>
                </thead>
                <tbody>
                  @for (field of fields?.page; track field) {
                    <tr
                      [ngClass]="{'table-primary' : (activeField$ | async)?.id === field.id}">
                      <td *ngVar="(selectedMetadataFieldIDs$ | async)?.includes(field.id) as selected">
                        <input type="checkbox"
                          [attr.aria-label]="(selected ? 'admin.registries.schema.fields.deselect' : 'admin.registries.schema.fields.select') | translate"
                          [checked]="selected"
                          (change)="selectMetadataField(field, $event)">
                      </td>
                      <td class="selectable-row" (click)="editField(field)">{{field.id}}</td>
                      <td class="selectable-row" (click)="editField(field)">{{schema?.prefix}}.{{field.element}}{{field.qualifier ? '.' + field.qualifier : ''}}</td>
                      <td class="selectable-row" (click)="editField(field)">{{field.scopeNote}}</td>
                    </tr>
                  }
                </tbody>
              </table>
            </div>
          </ds-pagination>
        }

        @if (fields?.totalElements === 0) {
          <div class="alert alert-info w-100 mb-2" role="alert">
            {{'admin.registries.schema.fields.no-items' | translate}}
          </div>
        }

        <div>
          <button [routerLink]="['/admin/registries/metadata']" class="btn btn-primary">{{'admin.registries.schema.return' | translate}}</button>
          @if (fields?.page?.length > 0) {
            <button type="submit" class="btn btn-danger float-end" (click)="deleteFields()">{{'admin.registries.schema.fields.table.delete' | translate}}</button>
          }
        </div>
      </ng-container>

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