<div>
  <h2 id="page-heading" data-cy="CategoriaHeading">
    <div>
      <span class="ds-title" jhiTranslate="dataSurveyApp.categoria.home.title">Categorias</span>
      <p class="ds-subtitle">Categorice las encuestas de la aplicación</p>
    </div>

    <div class="d-flex justify-content-end">
      <button
        id="jh-create-entity"
        data-cy="entityCreateButton"
        class="jh-create-entity create-categoria ds-btn ds-btn--primary"
        [routerLink]="['/categoria/new']"
      >
        <fa-icon icon="plus"></fa-icon>
        <span jhiTranslate="dataSurveyApp.categoria.home.createLabel"> Create a new Categoria </span>
      </button>
    </div>
  </h2>

  <!--  <div class="alert alert-success" *ngIf="success" jhiTranslate="dataSurveyApp.categoria.delete.error">

  </div>-->

  <div
    *ngIf="success"
    class="alert alert-success alert-dismissible fade show"
    role="alert"
    jhiTranslate="dataSurveyApp.categoria.delete.success"
  >
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>

  <div class="alert alert-warning" id="no-result" *ngIf="categorias?.length === 0">
    <span jhiTranslate="dataSurveyApp.categoria.home.notFound">No categorias found</span>
  </div>

  <div class="table-responsive" id="entities" *ngIf="categorias && categorias.length > 0">
    <form class="ds-form">
      <div class="input-group">
        <div class="input-group-addon"><i class="glyphicon glyphicon-search"></i></div>
        <input type="text" name="searchString" placeholder="Buscar..." [(ngModel)]="searchString" />
      </div>
    </form>
    <table class="table table-striped" aria-describedby="page-heading">
      <thead>
        <tr>
          <th scope="col"><span jhiTranslate="dataSurveyApp.categoria.nombre">Nombre</span></th>
          <th scope="col"><span jhiTranslate="dataSurveyApp.categoria.estado">Estado</span></th>
          <th scope="col"></th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let categoria of categorias | filter: 'nombre':searchString; trackBy: trackId" data-cy="entityTable">
          <td *ngIf="categoria.id != 0">{{ categoria.nombre }}</td>
          <td *ngIf="categoria.id != 0" jhiTranslate="{{ 'dataSurveyApp.EstadoCategoria.' + categoria.estado }}">{{ categoria.estado }}</td>
          <td *ngIf="categoria.id != 0" class="text-right">
            <div class="btn-group">
              <button
                type="submit"
                [routerLink]="['/categoria', categoria.id, 'edit']"
                class="btn-sm ds-btn ds-btn--primary"
                data-cy="entityEditButton"
              >
                <span class="d-none d-md-inline" jhiTranslate="entity.action.edit">Edit</span>
              </button>

              <button type="submit" (click)="toggleStatus(categoria)" class="ds-btn ds-btn--danger" data-cy="entityDeleteButton">
                <fa-icon [icon]="faExchangeAlt"></fa-icon>
                <span class="d-none d-md-inline" jhiTranslate="entity.action.toggleStatus">Toggle Status</span>
              </button>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
