<div>
  <h2 id="page-heading" data-cy="UsuarioEncuestaHeading">
    <span class="ds-title" jhiTranslate="dataSurveyApp.usuarioEncuesta.home.title">Colaboraciones </span>
    <p class="ds-subtitle">Gestione las colaboraciones en encuestas a las que se encuentra agregado</p>

    <div class="d-flex justify-content-end">
      <button class="ds-btn ds-btn--secondary mr-2" (click)="loadAll()" [disabled]="isLoading">
        <fa-icon icon="sync" [spin]="isLoading"></fa-icon>
        <span jhiTranslate="dataSurveyApp.usuarioEncuesta.home.refreshListLabel">Refresh List</span>
      </button>
    </div>
  </h2>

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

  <jhi-alert></jhi-alert>
  <form class="ds-form">
    <div class="input-group">
      <div class="ds-filter">
        <div class="input-group-addon"><i class="glyphicon glyphicon-search"></i></div>
        <select name="searchRol" id="searchRol" [(ngModel)]="searchRol" style="width: 200px">
          <option value="" selected="selected" disabled="disabled">Filtrar por rol</option>
          <option value="">Todos los roles</option>
          <option value="Read">Lector</option>
          <option value="Write">Escritor</option>
        </select>
        <select name="searchRol" id="searchEstado" [(ngModel)]="searchEstado" style="width: 200px">
          <option value="" selected="selected" disabled="disabled">Filtrar por estado</option>
          <option value="">Todos los estados</option>
          <option value="ACTIVE">Activos</option>
          <option value="PENDING">Pendientes</option>
        </select>
      </div>
    </div>
  </form>
  <div class="alert alert-warning" id="no-result" *ngIf="usuarioEncuestas?.length === 0">
    <span jhiTranslate="dataSurveyApp.usuarioEncuesta.home.notFound">No usuarioEncuestas found</span>
  </div>

  <div class="table-responsive" id="entities" *ngIf="usuarioEncuestas && usuarioEncuestas.length > 0">
    <table class="table table-striped" aria-describedby="page-heading">
      <thead>
        <tr>
          <th scope="col"><span jhiTranslate="dataSurveyApp.usuarioEncuesta.rol">Rol</span></th>
          <th scope="col"><span jhiTranslate="dataSurveyApp.usuarioEncuesta.estado">Estado</span></th>
          <th scope="col"><span jhiTranslate="dataSurveyApp.usuarioEncuesta.fechaAgregado">Fecha Agregado</span></th>
          <th scope="col"><span>Encuesta</span></th>
          <th scope="col"></th>
        </tr>
      </thead>
      <tbody>
        <tr
          *ngFor="let usuarioEncuesta of usuarioEncuestas | filter: 'rol':searchRol | filter: 'estado':searchEstado; trackBy: trackId"
          data-cy="entityTable"
        >
          <td jhiTranslate="{{ 'dataSurveyApp.RolColaborador.' + usuarioEncuesta.rol }}">{{ usuarioEncuesta.rol }}</td>
          <td jhiTranslate="{{ 'dataSurveyApp.EstadoColaborador.' + usuarioEncuesta.estado }}">{{ usuarioEncuesta.estado }}</td>
          <td>{{ usuarioEncuesta.fechaAgregado | formatShortDatetime | titlecase }}</td>
          <td>
            <div *ngIf="usuarioEncuesta.encuesta">
              <a>{{ usuarioEncuesta.encuesta?.nombre }} (#{{ usuarioEncuesta.encuesta?.id }})</a>
            </div>
          </td>
          <td class="text-right">
            <div class="btn-group" *ngIf="usuarioEncuesta.encuesta">
              <button
                *ngIf="usuarioEncuesta.estado === 'ACTIVE'"
                type="button"
                [routerLink]="['/encuesta', usuarioEncuesta.encuesta.id, 'edit']"
                class="ds-btn ds-btn--primary"
                [disabled]="isLoading"
              >
                <span>Editar encuesta</span>
              </button>
              <button
                *ngIf="usuarioEncuesta.estado === 'PENDING'"
                type="button"
                (click)="aceptarInvitacion(usuarioEncuesta)"
                class="ds-btn btn-success"
                [disabled]="isLoading"
              >
                <span>Aceptar invitación</span>
              </button>
              <button type="submit" (click)="delete(usuarioEncuesta)" class="ds-btn ds-btn--danger btn-sm" data-cy="entityDeleteButton">
                <fa-icon icon="sign-out-alt"></fa-icon>
                <span class="d-none d-md-inline" jhiTranslate="dataSurveyApp.usuarioEncuesta.delete.getOut">Get Out</span>
              </button>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
