<div>
  <h2 id="page-heading" data-cy="ContentPageHeading">
    <span jhiTranslate="resilientApp.contentPage.home.title">Content Pages</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.contentPage.home.refreshListLabel">Refresh list</span>
      </button>
    </div>
  </h2>

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

  <jhi-alert></jhi-alert>

  @if (contentPages?.length === 0) {
    <div class="alert alert-warning" id="no-result">
      <span jhiTranslate="resilientApp.contentPage.home.notFound">Nenhum Content Page encontrado</span>
    </div>
  }

  @if (contentPages && contentPages.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="title">
              <div class="d-flex">
                <span jhiTranslate="resilientApp.contentPage.title">Title</span>

                <fa-icon class="p-1" icon="sort"></fa-icon>
              </div>
            </th>
            <th scope="col" jhiSortBy="slug">
              <div class="d-flex">
                <span jhiTranslate="resilientApp.contentPage.slug">Slug</span>

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

            <th scope="col"></th>
          </tr>
        </thead>
        <tbody>
          @for (contentPage of contentPages; track trackId) {
            <tr data-cy="entityTable">
              <td>{{ contentPage.title }}</td>
              <td [jhiTranslate]="'resilientApp.ContentPageType.' + (contentPage.slug ?? 'null')">
                {{ { null: '', HOME_ANONYMOUS: 'Home Anonymous', HOME_AUTHENTICATED: 'Home Authenticated'}[contentPage.slug ?? 'null'] }}
              </td>

              <td class="text-end">
                <div class="btn-group">
                  <a *ngIf="hasReadPermission(Resources.CONTENT_PAGE)" [routerLink]="['/content-page', contentPage.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 *ngIf="hasUpdatePermission(Resources.CONTENT_PAGE)" [routerLink]="['/content-page', contentPage.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>
                </div>
              </td>
            </tr>
          }
        </tbody>
      </table>
    </div>
  }
</div>
