<div class="containerPagina">
  <div class="mx-auto mat-elevation-z8 seguimientoRes py-30 px-15 containerFuera">
    <mat-spinner class="justify-center items-center" *ngIf="isLoading" diameter="60"></mat-spinner>

    <div class="contentFiles" *ngIf="!isLoading">
      <div class="title">
        <span>Centro de Recursos</span>
      </div>

      <div class="files">
        <div class="btnFile">
          <img src="assets/img/addFolder.png" alt="Crear Carpeta" />
          <span>Crear Carpeta</span>
        </div>
        <div class="btnFile">
          <img src="assets/img/addFile.png" alt="Agregar Archivo" />
          <span>Agregar Archivo</span>
        </div>
      </div>
    </div>

    <div
      class="contentClass"
      [ngStyle]="{ 'border-color': data.materia.colorCurso || 'none' }"
      *ngIf="!isLoading"
    >
      <div
        class="items-center px-15 banner"
        [ngStyle]="{ 'background-color': data.materia.colorCurso || 'none' }"
      >
        <img style="margin-right: 15px;" src="assets/img/rela.png" alt="logo-materia" />
        <div class="flex-col">
          <span style="font-size: 50px; color: white;">{{ data.materia.nombreMateria }}</span>
          <span style="font-size: 30px; color: white;" class="flex-row">
            Profesor:
            <span *ngFor="let profe of profes" class="ml-5">{{ profe }}</span>
          </span>
        </div>
      </div>

      <div class="anuncios">
        <section style="width: 85%;">
          <div class="header mb-20">
            <span class="span">Anuncios de la Clase</span>
            <button class="btnBlue" (click)="openDialog()">
              Crear Anuncio
              <mat-icon style="vertical-align: middle;">add</mat-icon>
            </button>
          </div>

          <div class="alerta mx-auto mt-30 fadeInDown" *ngIf="!isLoading && anuncios.length === 0">
            <mat-icon style="color: #7c620c;" class="mr-15">info</mat-icon>
            <p class="ptitle"> No hay anuncios creados. Por favor, crea uno.</p>
          </div>

     <div class="anuncio" *ngFor="let anuncio of anuncios">
        <span class="titulo">Título: {{ anuncio.tituloAnuncio }}</span>
  <span class="fecha">Fecha de Publicación: {{ anuncio.fechaPublicacion }}</span>


  <div class="anuncio-body">
    <div class="bodyC" [innerHTML]="anuncio.descripcion"></div>


    <button mat-icon-button [matMenuTriggerFor]="menu" aria-label="Acciones">
      <mat-icon>more_vert</mat-icon>
    </button>

    <mat-menu #menu="matMenu" >
       <button
       class="verAnuncio"
       mat-menu-item (click)="verAnuncio(anuncio)">
        <mat-icon>visibility
</mat-icon>
        <span>Ver Anuncio</span>
      </button>
      <button mat-menu-item (click)="openDialogE(anuncio)">
        <mat-icon>edit</mat-icon>
        <span>Editar Anuncio</span>
      </button>
      <button mat-menu-item (click)="eliminarAnuncio(anuncio.idAnuncio)">
        <mat-icon>delete</mat-icon>
        <span>Eliminar Anuncio</span>
      </button>
    </mat-menu>
  </div>
</div>

        </section>
      </div>
    </div>
  </div>
</div>
