<div class="container-fluid">
  <div class="title-section">
    <h2>Lista de Questionários</h2>
  </div>

  <div class="lista-historico">
    <div 
      class="item-historico" 
      *ngFor="let questionario of questionarios"
      [ngClass]="{ 'nao-respondido-container': !questionario.respondido }">

      <!-- Título do questionário -->
      <span class="data">Tema: {{ questionario.titulo }}</span>

      <!-- Prazo de entrega -->
      <span class="comentario">Prazo: {{ questionario.dataValidade | date: 'shortDate' }}</span>

      <!-- Botão ou texto indicando se já foi respondido -->
      <span
        [ngClass]="{ 'emoji': !questionario.respondido }"
        [style.color]="questionario.respondido ? 'gray' : null"
        [style.textDecoration]="questionario.respondido ? 'none' : 'underline'"
        [style.cursor]="questionario.respondido ? 'default' : 'pointer'"
        (click)="!questionario.respondido && responderQuestionario(questionario.id!)">
        {{ questionario.respondido ? 'Já respondido' : 'Clique aqui para responder' }}
      </span>
    </div>

    <!-- Mensagem caso não haja questionários -->
    <div *ngIf="questionarios.length === 0" class="no-results">
      Nenhum questionário disponível no momento.
    </div>
  </div>
</div>
