<!-- GUIPropertiesViewAndSortCustomizer -->
<div>
  <h2 id="page-heading" data-cy="MetadataPropertyHeading">
    <span jhiTranslate="resilientApp.metadataProperty.home.title">Metadata Properties</span>

    <div class="d-flex justify-content-end">
      <button class="btn btn-info me-2" (click)="load()" [disabled]="isLoading">
        <fa-icon icon="sync" [spin]="isLoading"></fa-icon>
        <span jhiTranslate="resilientApp.metadataProperty.home.refreshListLabel">Refresh list</span>
      </button>

      <button
        id="jh-create-entity"
        data-cy="entityCreateButton"
        class="btn btn-primary jh-create-entity create-metadata-property"
        [routerLink]="['/metadata-property/new']"
      >
        <fa-icon icon="plus"></fa-icon>
        <span jhiTranslate="resilientApp.metadataProperty.home.createLabel">Criar novo(a) Metadata Property</span>
      </button>
    </div>
  </h2>

  <jhi-alert-error></jhi-alert-error>

  <jhi-alert></jhi-alert>

  @if (metadataProperties?.length === 0) {
    <div class="alert alert-warning" id="no-result">
      <span jhiTranslate="resilientApp.metadataProperty.home.notFound">Nenhum Metadata Properties encontrado</span>
    </div>
  }

  @if (metadataProperties && metadataProperties.length > 0) {
    <div class="table-responsive table-entities" id="entities">
      <table class="table table-striped" aria-describedby="page-heading">
        <thead>
          <tr jhiSort [sortState]="sortState" (sortChange)="navigateToWithComponentValues($event)">
            <th scope="col" jhiSortBy="code">
              <div class="d-flex">
                <span jhiTranslate="resilientApp.metadataProperty.code">Code</span>

                <fa-icon class="p-1" icon="sort"></fa-icon>
              </div>
            </th>
            <th scope="col" jhiSortBy="name">
              <div class="d-flex">
                <span jhiTranslate="resilientApp.metadataProperty.name">Name</span>

                <fa-icon class="p-1" icon="sort"></fa-icon>
              </div>
            </th>
            <th scope="col" jhiSortBy="description">
              <div class="d-flex">
                <span jhiTranslate="resilientApp.metadataProperty.description">Description</span>

                <fa-icon class="p-1" icon="sort"></fa-icon>
              </div>
            </th>
            <th scope="col" jhiSortBy="mandatory">
              <div class="d-flex">
                <span jhiTranslate="resilientApp.metadataProperty.mandatory">Mandatory</span>

                <fa-icon class="p-1" icon="sort"></fa-icon>
              </div>
            </th>

<!-- HIDDEN Columns 
            <th scope="col" jhiSortBy="id">
              <div class="d-flex">
                <span jhiTranslate="global.field.id">Código</span>

                <fa-icon class="p-1" icon="sort"></fa-icon>
              </div>
            </th>
            <th scope="col" jhiSortBy="metadataType">
              <div class="d-flex">
                <span jhiTranslate="resilientApp.metadataProperty.metadataType">Metadata Type</span>

                <fa-icon class="p-1" icon="sort"></fa-icon>
              </div>
            </th>
            <th scope="col" jhiSortBy="pattern">
              <div class="d-flex">
                <span jhiTranslate="resilientApp.metadataProperty.pattern">Pattern</span>

                <fa-icon class="p-1" icon="sort"></fa-icon>
              </div>
            </th>
            <th scope="col" jhiSortBy="version">
              <div class="d-flex">
                <span jhiTranslate="resilientApp.metadataProperty.version">Version</span>

                <fa-icon class="p-1" icon="sort"></fa-icon>
              </div>
            </th>
            <th scope="col" jhiSortBy="organizationType.name">
              <div class="d-flex">
                <span jhiTranslate="resilientApp.metadataProperty.organizationType">Organization Type</span>
                <fa-icon class="p-1" icon="sort"></fa-icon>
              </div>
            </th>
--> 

            <th scope="col"></th>
          </tr>
        </thead>
        <tbody>
          @for (metadataProperty of metadataProperties; track trackId) {
            <tr data-cy="entityTable">
              <td>{{ metadataProperty.code }}</td>
              <td>{{ metadataProperty.name }}</td>
              <td>{{ metadataProperty.description }}</td>
              <td>{{ metadataProperty.mandatory }}</td>

<!-- HIDDEN Columns 
              <td>
                <a [routerLink]="['/metadata-property', metadataProperty.id, 'view']">{{ metadataProperty.id }}</a>
              </td>
              <td [jhiTranslate]="'resilientApp.MetadataType.' + (metadataProperty.metadataType ?? 'null')">
                {{
                  { null: '', STRING: 'STRING', BOOLEAN: 'BOOLEAN', INTEGER: 'INTEGER', DECIMAL: 'DECIMAL', DATE: 'DATE' }[
                    metadataProperty.metadataType ?? 'null'
                  ]
                }}
              </td>
              <td>{{ metadataProperty.pattern }}</td>
              <td>{{ metadataProperty.version }}</td>
              <td>
                @for (organizationType of metadataProperty.organizationTypes; track $index; let last = $last) {
                  <span>
                    <a class="form-control-static" [routerLink]="['/organization-type', organizationType.id, 'view']">{{
                      organizationType.name
                    }}</a
                    >{{ last ? '' : ', ' }}
                  </span>
                }
              </td>
--> 

              <td class="text-end">
                <div class="btn-group">
                  <a
                    [routerLink]="['/metadata-property', metadataProperty.id, 'view']"
                    class="btn btn-info btn-sm"
                    data-cy="entityDetailsButton"
                  >
                    <fa-icon icon="eye"></fa-icon>
                    <span class="d-none d-md-inline" jhiTranslate="entity.action.view">Visualizar</span>
                  </a>

                  <a
                    [routerLink]="['/metadata-property', metadataProperty.id, 'edit']"
                    class="btn btn-primary btn-sm"
                    data-cy="entityEditButton"
                  >
                    <fa-icon icon="pencil-alt"></fa-icon>
                    <span class="d-none d-md-inline" jhiTranslate="entity.action.edit">Editar</span>
                  </a>

                  <button type="submit" (click)="delete(metadataProperty)" class="btn btn-danger btn-sm" data-cy="entityDeleteButton">
                    <fa-icon icon="times"></fa-icon>
                    <span class="d-none d-md-inline" jhiTranslate="entity.action.delete">Eliminar</span>
                  </button>
                </div>
              </td>
            </tr>
          }
        </tbody>
      </table>
    </div>
  }
</div>
