<div class="container-fluid pt-3">
  <div class="header-container">
    <div class="text-center">
      <h1 class="display-4">Questionários</h1>
    </div>

    <div class="criar-container">
      <p class="criar-texto">Criar novo Questionário</p>
      <button class="btn-criar" [routerLink]="'/questionario/novo'">
        <i class="fas fa-plus"></i>
      </button>
    </div>
  </div>

  <div *ngIf="questionarios.length === 0" class="text-center text-muted">
    Nenhum questionário encontrado.
  </div>

  <div class="container mb-3" *ngFor="let item of questionarios">
    <div class="listagem-item">
      <p class="tema-text text-left mb-0 text-white font-weight-bold">Título: {{ item.titulo }}</p>
      <p class="prazo-text text-left mb-0 text-white">
        Validade: {{ item.dataValidade ? (item.dataValidade | date:'dd/MM/yyyy') : 'Sem prazo' }}
      </p>
      <p class="prazo-text text-left mb-0 text-white">
        Status: {{ item.publico ? 'Publicado' : 'Rascunho' }}
      </p>

      <!-- <button
        class="btn-publicar"
        [class.published]="item.dataPublicacao"
        [disabled]="item.publico"
        (click)="publicar(item)">
        {{ item.publico ? 'Publicado' : 'Publicar' }}
      </button> -->

      <div class="btn-container">
        <button
          class="btn-editar"
          [routerLink]="['/questionario/editar', item.id]"
          [disabled]="item.publico">
          Editar
        </button>

        <button
          class="btn-excluir"
          (click)="removerQuestionario(item.id!)"
          [disabled]="item.publico">
          Excluir
        </button>
      </div>
      </div>
    </div>
  </div>