<div class="grid-container">
  <h1 class="mat-h1">Dashboard</h1>

  <!-- Grid para os Gráficos -->
  <mat-grid-list [cols]="isSmallScreen ? 1 : 3" gutterSize="16px">
    <mat-grid-tile>
      <mat-card class="dashboard-card">
        <mat-card-header>
          <mat-card-title>NAVIOS ACEITOS</mat-card-title>
        </mat-card-header>
        <mat-card-content class="dashboard-card-content">
          <p-chart type="pie" [data]="data" [options]="options"></p-chart>
        </mat-card-content>
      </mat-card>
    </mat-grid-tile>

    <mat-grid-tile>
      <mat-card class="dashboard-card">
        <mat-card-header>
          <mat-card-title>PROCESSOS CONCLUÍDOS</mat-card-title>
        </mat-card-header>
        <mat-card-content class="dashboard-card-content">
          <p-chart type="bar" [data]="dataBar" [options]="options"></p-chart>
        </mat-card-content>
      </mat-card>
    </mat-grid-tile>

    <mat-grid-tile>
      <mat-card class="dashboard-card">
        <mat-card-header>
          <mat-card-title>STATUS DE OPERAÇÃO</mat-card-title>
        </mat-card-header>
        <mat-card-content class="dashboard-card-content">
          <p-chart type="doughnut" [data]="dataDoughnut" [options]="options"></p-chart>
        </mat-card-content>
      </mat-card>
    </mat-grid-tile>
  </mat-grid-list>

  <!-- Grid para as Caixas de Informações -->
  <mat-grid-list [cols]="isSmallScreen ? 2 : 4" gutterSize="16px">
    <mat-grid-tile>
      <mat-card class="info-card">
        <mat-card-header>
          <mat-card-title>NAVIOS</mat-card-title>
        </mat-card-header>
        <mat-card-content>
          <div class="info-value">{{ totalNavios }}</div>
        </mat-card-content>
      </mat-card>
    </mat-grid-tile>

    <mat-grid-tile>
      <mat-card class="info-card">
        <mat-card-header>
          <mat-card-title>USUÁRIOS</mat-card-title>
        </mat-card-header>
        <mat-card-content>
          <div class="info-value">{{ totalUsuarios }}</div>
        </mat-card-content>
      </mat-card>
    </mat-grid-tile>

    <mat-grid-tile>
      <mat-card class="info-card">
        <mat-card-header>
          <mat-card-title>BERÇOS</mat-card-title>
        </mat-card-header>
        <mat-card-content>
          <div class="info-value">{{ totalBercos }}</div>
        </mat-card-content>
      </mat-card>
    </mat-grid-tile>

    <mat-grid-tile>
      <mat-card class="info-card">
        <mat-card-header>
          <mat-card-title>ACEITES</mat-card-title>
        </mat-card-header>
        <mat-card-content>
          <div class="info-value">{{ totalAceites }}</div>
        </mat-card-content>
      </mat-card>
    </mat-grid-tile>
  </mat-grid-list>
</div>