<!-- Botón cerrar (esquina superior) -->
<div class="close">
  <button class="cerrar-b cursor-pointer" mat-dialog-close>
    <mat-icon>close</mat-icon>
  </button>
</div>

<!-- Encabezado dinámico -->
<span class="center">
  {{
    data.act === 'editar' ? 'Editar Anuncio' :
    data.act === 'ver' ? 'Detalle del Anuncio' :
    'Publicar Anuncio'
  }}
</span>

<!-- Contenido principal -->
<mat-dialog-content class="mat-typography space mt-40" [autofocus]="['none']">

  <!-- Vista de SOLO LECTURA -->
  <div *ngIf="data.act === 'ver'" class="detalle-anuncio">
    <p><strong>Título:</strong> {{ data.anuncio.tituloAnuncio }}</p>
    <p><strong>Fecha de Publicación:</strong> {{ data.anuncio.fechaPublicacion }}</p>
    <p><strong>Fecha de Caducidad:</strong> {{ data.anuncio.fechaCaducidad }}</p>
    <p><strong>Contenido:</strong></p>
    <div [innerHTML]="data.anuncio.descripcion"></div>
  </div>

  <!-- Formulario para crear o editar -->
  <form *ngIf="data.act !== 'ver'" (ngSubmit)="crearAnuncio()" [formGroup]="form">
    <mat-form-field class="tituloAnuncio">
      <mat-label>Titulo</mat-label>
      <input matInput name="titulo" formControlName="titulo" placeholder="Titulo del anuncio" >
    </mat-form-field>

    <div class="flex-row">
      <div class="flex-col">
        <label for="fechaInicio">Fecha Inicio</label>
        <div>
          <mat-form-field class="w-responsive">
            <mat-label>Desde</mat-label>
            <input matInput [matDatepicker]="pickerStart" [min]="todayDate" name="fechaInicio" id="fechaInicio"
              formControlName="fechaInicio">
            <mat-datepicker-toggle matIconSuffix [for]="pickerStart"></mat-datepicker-toggle>
            <mat-datepicker #pickerStart></mat-datepicker>
          </mat-form-field>

          <mat-form-field class="ml-10 w-responsive">
            <mat-label>Hora</mat-label>
            <mat-select matNativeControl name="horaInicio" formControlName="horaInicio">
              <mat-option *ngFor="let hora of horasDelDia" [value]="hora.hora24">{{hora.hora12}}</mat-option>
            </mat-select>
          </mat-form-field>
        </div>
      </div>

      <div class="flex-col ml-10">
        <label for="fechaCaducidad">Fecha Final</label>
        <div>
          <mat-form-field class="w-responsive">
            <mat-label>Desde</mat-label>
            <input matInput [matDatepicker]="pickerStart1" [min]="todayDate" name="fechaCaducidad" id="fechaCaducidad"
              formControlName="fechaCaducidad">
            <mat-datepicker-toggle matIconSuffix [for]="pickerStart1"></mat-datepicker-toggle>
            <mat-datepicker #pickerStart1></mat-datepicker>
          </mat-form-field>

          <mat-form-field class="ml-10 w-responsive">
            <mat-label>Hora</mat-label>
            <mat-select matNativeControl name="horaCaducidad" formControlName="horaCaducidad">
              <mat-option *ngFor="let hora of horasDelDia" [value]="hora.hora24">{{hora.hora12}}</mat-option>
            </mat-select>
          </mat-form-field>
        </div>
      </div>
    </div>

    <div class="NgxEditor__Wrapper" style="min-height: 200px; height: auto;">
      <ngx-editor-menu [editor]="editor" [toolbar]="toolbar" [colorPresets]="colorPresets"></ngx-editor-menu>
      <ngx-editor placeholder="Escriba aquí..." [editor]="editor" formControlName="contenido"></ngx-editor>
    </div>
  </form>

</mat-dialog-content>
<div class="align flex-row mt-20 pb-10 botones-footer" *ngIf="data.act !== 'ver'">
  <div>
    <button type="button" (click)="crearAnuncio()" class="yellow btn-footer">
      <span>Ingresar</span>
      <mat-icon class="icon" matSuffix>description</mat-icon>
    </button>
  </div>
  <div>
    <button class="orange btn-footer" (click)="limpiar()">
      <span>Limpiar</span>
      <mat-icon class="icon" matSuffix>delete</mat-icon>
    </button>
  </div>
  <div>
   <button class="red btn-footer cerrar-btn" mat-dialog-close>
  <span>Cerrar</span>
  <mat-icon class="icon" matSuffix>cancel</mat-icon>
</button>

  </div>
</div>

<!-- Solo botón de cerrar si está en modo 'ver' -->
<div class="align flex-row mt-20 pb-10" *ngIf="data.act === 'ver'">
  <div class="items-center justify-center">
    <button class="red" mat-dialog-close style="width: 60%;">
      <span>Cerrar</span>
      <mat-icon class="icon" matSuffix>cancel</mat-icon>
    </button>
  </div>
</div>



<!-- -------------------------------------- -->
