<mat-toolbar class="toolbar prevent-select" (window:resize)="onResize()">
  <mat-toolbar-row class="p-0">
    <div class="toolbar-row">
      <div class="menu-items">
        <h1 class="main-title" [routerLink]="['/sam/home']" style="font-family: 'Movilidad' !important;">{{ title }}</h1>
        <div class="example-spacer">
          <div *ngIf="maintenanceActivated" class="time-counter">
            {{ timeLeft }}
          </div>
        </div>
        <button mat-button class="white_font animated fadeIn" *ngIf="!isLoading && !maintenanceMode"
        (click)="modulesActivated = !modulesActivated">
          <mat-icon style="margin-bottom: 4px;">arrow_drop_down</mat-icon> MÓDULOS
        </button>
        <mat-progress-bar style="background-color: #FFFFFF; color: #FFFFFF; width: 550px;" mode="indeterminate" *ngIf="isLoading"></mat-progress-bar>
        <button mat-button [matMenuTriggerFor]="menuA" class="white_font animated fadeIn" *ngIf="!isLoading && !maintenanceMode" 
        [matBadge]="unreadNotifications" [matBadgeHidden]="unreadNotifications <= 0" matBadgeColor="warn">
          <mat-icon style="margin-bottom: 4px;">arrow_drop_down</mat-icon> {{ userName }} ({{ usedSessions }}/{{ enabledSessions }})
        </button>
        <mat-menu #menuA="matMenu">
          <button mat-menu-item (click)="openMyProfile()"><mat-icon>person</mat-icon> Mi perfil</button>
          <button mat-menu-item (click)="rightDrawer.toggle()">
            <mat-icon>notifications</mat-icon>
            <span>Notificaciones <span class="red_primary_font" style="font-weight: 500;" *ngIf="unreadNotifications > 0">
              ({{ unreadNotifications }})
            </span></span>
          </button>
          <button mat-menu-item [routerLink]="['/sam/vacation']"><mat-icon>houseboat</mat-icon> Gestión de Vacaciones </button>
          <button mat-menu-item><mat-icon>help</mat-icon> Ayuda</button>
          <button mat-menu-item><mat-icon>key</mat-icon> Cambiar contraseña</button>
          <button mat-menu-item (click)="openUploadData()"><mat-icon>upload</mat-icon>Carga de Datos</button>
          <button mat-menu-item (click)="logout()"><mat-icon>logout</mat-icon> Cerrar sesión</button>
        </mat-menu>
        <span class="m-8"></span>
        <div class="search-mat-form-field animated fadeIn" *ngIf="!isLoading && !maintenanceMode">
          <mat-icon class="prefix">search</mat-icon>
          <input type="text" class="input" placeholder="Buscar ubicaciones, archivos, etc..." #input>
          <button mat-icon-button [disabled]="input.value === ''">
            <mat-icon class="suffix">close</mat-icon>
          </button>
        </div>
      </div>
      <div class="icon-modules-container" [ngClass]="{ hidden: !modulesActivated, animate_hide: modulesActivated }">
        <div class="row-container">
          <div class="row-item" *ngFor="let item of menuItems" (click)="navigate(item.ID_MODULO_DEC!)">
            @if (item.ICONO_PERSONALIZADO == 'S') {
              <mat-icon [svgIcon]="item.ICONO_MODULO" style="opacity: 0.54;"></mat-icon>
            } @else {
              <mat-icon>{{ item.ICONO_MODULO }}</mat-icon>
            }
            <p>{{ item.NOMBRE_MODULO }}</p>
          </div>
        </div>
      </div>
    </div>
  </mat-toolbar-row>
</mat-toolbar>

<mat-drawer-container class="example-container" autosize>
  <mat-drawer #rightDrawer mode="over" position="end" class="prevent-select">
    <div *ngIf="totalNotifications.length == 0" class="no-notifications pt-64">
      <b>Aún no se han generado notificaciones para su usuario.</b>
    </div>
    <div *ngFor="let notification of totalNotifications; let i = index" class="notification-container" (click)="openNotification(notification.ID_NOTIFICACION, true)" 
    [ngClass]="{ notification_separator: i < totalNotifications.length - 1, not_readed: !notification.READED }">
      <div class="notification-decoration indigo_primary_background"></div>
      <div class="notification-content">
        <p class="notification-item-title">{{ notification.TITULO }}</p>
        <p class="notification-item-module">{{ notification.FECREG_DISP }} &bullet; {{ notification.READED ? 'L' : 'No l' }}eído</p>
        <p class="notification-item-body">{{ notification.CUERPO_NOTIFICACION }}</p>
      </div>
    </div>
  </mat-drawer>
  <div style="height: 100%; box-sizing: border-box; overflow: hidden;" (click)="closeNestedMenu()">
    <div class="push-notifications-list">
      <div class="push-notification-item push-notification-enter" *ngFor="let notification of notificationsForPanel"
      [id]="'notification-' + notification.ID_NOTIFICACION">
        <div class="push-notification-close" (click)="closeNotification(notification.ID_NOTIFICACION)">
          <mat-icon>chevron_right</mat-icon>
        </div>
        <div class="push-notification-content">
          <div class="push-notification-header">
            <div class="push-notification-title">{{ notification.TITULO }}</div>
            <div class="push-notification-date">{{ notification.FECHA }}</div>
          </div>
          <div class="push-notification-body">{{ notification.CUERPO_NOTIFICACION }}</div>
        </div>
        <button mat-button color="primary" (click)="openNotification(notification.ID_NOTIFICACION, false)">
          Abrir
        </button>
      </div>
    </div>
    <router-outlet></router-outlet>
  </div>
</mat-drawer-container>

<footer style="height: 48px;"></footer>