@if (rolAsignado === "DISTRIBUIDOR") {
  <div class="flex justify-center items-center h-[70vh]"> 
    <section class="bg-gray-50">
      <div class="mx-auto max-w-screen-xl px-4 py-32 lg:flex lg:h-screen lg:items-center">
        <div class="mx-auto max-w-xl text-center">
          <h1 class="text-3xl font-extrabold sm:text-5xl">
            Bienvenido Usuario
            <strong class="font-extrabold text-blue-900 sm:block"> Distribuidor </strong>
          </h1>
        
          <p class="mt-4 sm:text-xl/relaxed">
            ¡Bienvenido a nuestra plataforma como Distribuidor! Esperamos que disfrutes de tu experiencia con nosotros.
          </p>
       
        </div>
      </div>
    </section>
  </div>
}

@else {
  <div class="p-4">
    <div class="flex items-center justify-center mb-4">
      <h1 class="text-3xl font-extrabold sm:text-5xl">
        <strong class="font-extrabold text-blue-900 sm:block"> Dashboard Datatronica </strong>
      </h1>
    </div>
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 mb-3">
      <div class="flex items-center justify-center rounded bg-gray-50 dark:bg-gray-800">
        <div class="max-w-full w-full bg-white rounded-lg shadow dark:bg-gray-800 p-4 ">
          <!-- Contenido del primer cuadro -->
          <!-- Donut Chart -->
          <div style="text-align:center">
            <apx-chart
              [series]="chartCasosClientes.series ? chartCasosClientes.series : []"
              [chart]="chartCasosClientes.chart ? chartCasosClientes.chart : { type: 'donut' }"
              [stroke]="chartCasosClientes.stroke ? chartCasosClientes.stroke : {}"
              [title]="chartCasosClientes.title ? chartCasosClientes.title : { text: '' }"
              [responsive]="chartCasosClientes.responsive ? chartCasosClientes.responsive : []"
              [fill] = "chartCasosClientes.fill ? chartCasosClientes.fill : {}"
              [labels] = "chartCasosClientes.labels ? chartCasosClientes.labels : []"
              [plotOptions] = "chartCasosClientes.plotOptions ? chartCasosClientes.plotOptions : {}"
              [legend] = "chartCasosClientes.legend ? chartCasosClientes.legend : {}"
            ></apx-chart>
          </div>
        </div>
      </div>
      <div class="flex items-center justify-center rounded bg-gray-50 dark:bg-gray-800">
        <div class="max-w-full w-full bg-white rounded-lg shadow dark:bg-gray-800 p-4 ">
          <!-- Contenido del segundo cuadro -->
          <!-- Donut Chart -->
          <div style="text-align:center">
            <apx-chart
              [series]="chartCasosEquipo.series2 ? chartCasosEquipo.series2 : []"
              [chart]="chartCasosEquipo.chart ? chartCasosEquipo.chart : { type: 'donut' }"
              [labels]="chartCasosEquipo.labels ? chartCasosEquipo.labels : []"
              [title]="chartCasosEquipo.title ? chartCasosEquipo.title : { text: '' }"
              [responsive]="chartCasosEquipo.responsive ? chartCasosEquipo.responsive : []"
              [plotOptions] = "chartCasosEquipo.plotOptions ? chartCasosEquipo.plotOptions : {}"
              [legend] = "chartCasosEquipo.legend ? chartCasosEquipo.legend : {}"s
            ></apx-chart>
          </div>
        </div>
      </div>
    </div>
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 mb-3">
      <div class="flex items-center justify-center rounded bg-gray-50 dark:bg-gray-800">
        <div class="max-w-full w-full bg-white rounded-lg shadow dark:bg-gray-800 p-4">
          <!-- Contenido del segundo cuadro -->
          <!-- Donut Chart -->
          <div style="text-align:center">
            <apx-chart
              [series]="chartCasosMes.series ? chartCasosMes.series : []"
              [chart]="chartCasosMes.chart ? chartCasosMes.chart : { type: 'line' }"
              [xaxis]="chartCasosMes.xaxis ? chartCasosMes.xaxis : { categories: [] }"
              [yaxis]="chartCasosMes.yaxis ? chartCasosMes.yaxis : {}"
              [title]="chartCasosMes.title ? chartCasosMes.title : { text: '' }"
              [responsive]="chartCasosMes.responsive ? chartCasosMes.responsive : []"
              [stroke] = "chartCasosMes.stroke ? chartCasosMes.stroke : {}"
              [legend] = "chartCasosMes.legend ? chartCasosMes.legend : {}"
              [dataLabels] = "chartCasosMes.dataLabels ? chartCasosMes.dataLabels : {}"
            ></apx-chart>
          </div>
        </div>
      </div>
      <div class="flex items-center justify-center rounded bg-gray-50 dark:bg-gray-800">
        <div class="max-w-full w-full bg-white rounded-lg shadow dark:bg-gray-800 p-4">
          <!-- Contenido del segundo cuadro -->
          <!-- Donut Chart -->
          <div style="text-align:center">
            <apx-chart
              [colors]="chartOptionsFallas.colors ? chartOptionsFallas.colors : []"
              [series]="chartOptionsFallas.series ? chartOptionsFallas.series : []"
              [chart]="chartOptionsFallas.chart ? chartOptionsFallas.chart : { type: 'area' }"
              [xaxis]="chartOptionsFallas.xaxis ? chartOptionsFallas.xaxis : { categories: [] }"
              [title]="chartOptionsFallas.title ? chartOptionsFallas.title : { text: '' }"
              [yaxis]="chartOptionsFallas.yaxis ? chartOptionsFallas.yaxis : {}"
              [dataLabels]="chartOptionsFallas.dataLabels ? chartOptionsFallas.dataLabels : {}"
              [tooltip]="chartOptionsFallas.tooltip ? chartOptionsFallas.tooltip : {}"
              [legend]="chartOptionsFallas.legend ? chartOptionsFallas.legend : {}"
            ></apx-chart>
          </div>
        </div>
      </div>
    </div>
  </div>
}