<div class="container-fluid pt-3 px-5">
  <div class="header-container">
    <div class="text-center">
      <h1 class="display-4">Material de Apoio</h1>
    </div>

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

  <div class="row g-2">
    <div class="col-md-4 mb-4 d-flex justify-content-center" *ngFor="let material of materiais">
      <div class="card material-card">
        <div class="card-body">
          <h5 class="card-title">{{ material.titulo }}</h5>
          <p class="card-text">{{ material.conteudo }}</p>

          <div *ngIf="material.nomeArquivo" >
            <a [href]="'http://localhost:8080/materiais/download/' + material.nomeArquivo" download>
              {{material.nomeArquivo | cleanFilename }}
            </a>
          </div>
          <div *ngIf="material.links" >
            <div *ngFor="let link of material.links">
              <a [href]="link" download>
              Link
              </a>
            </div> 
          </div>

          <div class="d-flex justify-content-start align-items-center mt-2">
            <a href="#" class="btn-excluir" (click)="excluir($event, material)">Excluir</a>
            <a href="#" class="btn-editar" (click)="editar($event, material)">Editar</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
