<div class="centrar">
  <div class="fondo" [style.background-color]="color">
    <p class="content" [style.color]="'white'">Publicar formularios</p>
  </div>
</div>

<div class="container-col fadeIn">
  <div class="flex-row container-search">
    <mat-form-field class="input" appearance="outline">
      <mat-label>Buscar</mat-label>
      <input matInput (keyup)="applyFilter($event)" placeholder="Buscar formulario" #input />
      <mat-icon matSuffix>search</mat-icon>
    </mat-form-field>
  </div>

  <div class="table-container">
    <div class="table-responsive">
      <table mat-table [dataSource]="dataSource" class="mat-elevation-z8" matSort>

        <!-- ID Column -->
        <ng-container matColumnDef="id">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> ID </th>
          <td mat-cell *matCellDef="let form"> {{ form.id }} </td>
        </ng-container>

        <!-- Title Column -->
        <ng-container matColumnDef="title">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> Título </th>
          <td mat-cell *matCellDef="let form"> {{ form.title || 'Formulario #' + form.id }} </td>
        </ng-container>

        <!-- Ver Column -->
        <ng-container matColumnDef="ver">
          <th mat-header-cell *matHeaderCellDef> Ver </th>
          <td mat-cell *matCellDef="let form">
            <button mat-icon-button color="primary" (click)="selectForm(form.id)">
              <mat-icon>visibility</mat-icon>
            </button>
          </td>
        </ng-container>
        <!-- Editar Column -->
<ng-container matColumnDef="editar">
  <th mat-header-cell *matHeaderCellDef> Editar </th>
  <td mat-cell *matCellDef="let form">
    <button mat-icon-button color="warn" (click)="editForm(form.id)">
      <mat-icon>edit</mat-icon>
    </button>
  </td>
</ng-container>

//PUBLICAR
 <ng-container matColumnDef="publicar">
  <th mat-header-cell *matHeaderCellDef> Publicar </th>
  <td mat-cell *matCellDef="let form">
   <button *ngIf="!form.is_published" mat-button color="accent"
        (click)="publicarFormulario(form.id)"
        [disabled]="isLoading || hayFormularioPublicado">
  <mat-icon>publish</mat-icon> Publicar
</button>

<button *ngIf="form.is_published" mat-button color="warn"
        (click)="despublicarFormulario(form.id)"
        [disabled]="isLoading">
  <mat-icon>cancel</mat-icon> Despublicar
</button>

  </td>
</ng-container>


        <!-- Eliminar Column -->
<ng-container matColumnDef="eliminar">
  <th mat-header-cell *matHeaderCellDef> Eliminar </th>
  <td mat-cell *matCellDef="let form">
    <button mat-icon-button color="warn" (click)="deleteForm(form.id)">
      <mat-icon>delete</mat-icon>
    </button>
  </td>
</ng-container>


        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
        <tr class="mat-row" *matNoDataRow>
          <td class="mat-cell" colspan="4">No hay resultados para "{{ input.value }}"</td>
        </tr>
      </table>

      <mat-progress-bar *ngIf="isLoading" mode="indeterminate"></mat-progress-bar>
    </div>

    <mat-paginator [pageSizeOptions]="[5, 10, 15]" showFirstLastButtons></mat-paginator>
  </div>


