{{ template "headersMenu.html" . }}

<style>

.stat-value {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
}

@media (max-width: 1023px) {
  .magazine-grid {
    margin: 2rem .2rem 4rem;
  }
}
@media (min-width: 1024px) {
  .quota {
    margin: 12px 0 17px 7px !important;
  }
  .magazine-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 2rem;
  }
  #listMessages {
    max-height: 380px;
    overflow: auto;
  }
  }

  .col-span-12 { grid-column: span 12 / span 12; }
  .col-span-8 { grid-column: span 8 / span 8; }
  .col-span-6 { grid-column: span 6 / span 6; }
  .col-span-4 { grid-column: span 4 / span 4; }

  @media (max-width: 1024px) {
    .col-span-8, .col-span-6, .col-span-4 {
      grid-column: span 6 / span 6;
    }
    #lastMessages, #continue {
      display: none;
    }
  }

  @media (max-width: 768px) {
    .col-span-12, .col-span-8, .col-span-6, .col-span-4 {
      grid-column: span 1 / span 1;
    }
  }

  .card {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 2rem;
    transition: all 0.3s ease;
  }

  .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
  }

  .chart-container {
    height: 342px;
  }

  .text-accent {
    color: #6366f1;
  }
  .bg-accent {
    background-color: #6366f1;
  }
  .border-accent {
    border-color: #6366f1;
  }

  {{ if eq .quota "100" }}
  .text-accent {
    color: #ff0000;
  }
  .bg-accent {
    background-color: #ff0000;
  }
  .border-accent {
    border-color: #ff0000;
  }
  {{ end }}

</style>


<main class="container pb-16 mx-auto">
  <div class="magazine-grid">
    <section class="col-span-12 pt-6 mt-20">
      <h1 class="text-4xl font-semibold lg:text-5xl">{{ "Tableau de bord" | t }}</h1>
      <p class="mt-2 text-sm font-bold uppercase">{{ "Votre formule :" | t }} <span class="text-sm font-bold uppercase text-accent">{{ .plan }} {{ "assistances par semaine" | t }}</span></p>

                
      <div class="mt-3 grid lg:grid-cols-12 md:grid-cols-2 gap-[30px] items-center">
        <div class="col-span-12">
            <a href="/account" class="block overflow-hidden relative px-6 py-2 text-xl font-normal text-center text-white uppercase bg-red-600 rounded-lg lg:text-2xl"><span class="font-bold">{{ "Retard de paiement" | t }}</span> - {{ "Cliquez pour régulariser" | t }}</a>
        </div>
    </div>
    </section>

    <section class="col-span-4 mt-8">
      <a class="flex justify-between text-white rounded-xl shadow-md {{ if eq .quota "100" }}bg-red-600{{ else }}bg-accent{{ end }} card" href="/list">
        <span class="block">
          <span class="block font-bold stat-value">{{ .bots | len }}</span>
          <span class="text-xl font-bold uppercase">{{ "assistants" | t }}</span>
        </span>
        <span class="text-7xl"><i class="fa fa-arrow-right"></i></span>
      </a>
      <section id="continue" class="col-span-4 mt-8 bg-white card dark:bg-black">
        <h2 class="mb-2 text-2xl font-normal md:text-3xl">{{ "Continuer avec" | t }}...</h2>
          {{ $quota := .quota }}
          {{ range .lastBots }}
          <a class="block items-center py-2 border-t border-gray-200" href="/chatbot/{{ .bot }}" title="{{ .tokens }} octets / {{ .messages }} calls">
            <span class="flex justify-between items-center font-bold uppercase">
              <span>{{ .bot }}</span>
              <code class="p-1 text-xs text-white {{ if eq $quota "100" }}bg-red-600{{ else }}bg-green-600{{ end }} rounded"> <i class="text-white fa-regular fa-square-check"></i> {{ if eq $quota "100" }}403{{ else }}200{{ end }}</code>
            </span>
          </a>
          {{ end }}
      </section>
    </section>

    <section class="col-span-8 mt-6 bg-white card dark:bg-black">
      <h2 class="mb-0 text-2xl font-normal md:text-3xl">{{ "Votre utilisation cette semaine" | t }}</h2>
      <div class="flex flex-col justify-between items-start mb-12 pb-2 md:flex-row md:items-end">
        <div class="flex justify-between mb-4 md:mb-0">
          <p class="stat-value {{ if eq .quota "100" }}text-red-600{{ else }}text-accent{{ end }}">{{ .quota }}%</p>
          <p class="quota mt-2 ml-2 text-lg font-bold md:text-3xl {{ if eq .quota "100" }}text-red-600{{ else }}text-accent{{ end }}">{{ "de votre quota" | t }}</p>
        </div>
        <div class="w-full">
          <div class="h-4 bg-gray-200 rounded-full dark:bg-gray-800">
            <div class="h-4 rounded-full {{ if eq .quota "100" }}bg-red-600{{ else }}bg-accent{{ end }}" style="width:{{ .quota }}%"></div>
          </div>
        </div>
      </div>
      <div class="chart-container">
        <canvas id="usageChart" up-data="[{{ .week }}]"></canvas>
      </div>
    </section>

    <section class="col-span-4 mt-8">
      <a class="flex justify-between text-white rounded-xl shadow-md {{ if eq .quota "100" }}bg-red-600{{ else }}bg-accent{{ end }} card" href="/list">
        <span class="block">
          <span class="block font-bold stat-value">{{ .apiTalkNumber }}</span>
          <span class="mb-4 text-xl font-bold uppercase">{{ "assistances" | t }}</span>
        </span>
        <span class="text-7xl"><i class="fa fa-arrow-right"></i></span>
      </a>
      <section class="col-span-4 mt-8 space-y-8">
        <a class="block bg-white card dark:bg-black" href="/docs">
          <h3 class="mb-4 text-2xl font-normal md:text-3xl">{{ "Octets générés" | t }}</h3>
          <p class="mt-8 text-blue-600 stat-value">{{ .apiCalls }}</p>
          <p class="mt-2 text-base md:text-lg">{{ "dans la dernière heure" | t }}</p>
          <p class="mt-8 text-blue-600 stat-value">{{ .apiCallsTotal }}</p>
          <p class="mt-2 text-base md:text-lg">{{ "dans le dernier mois" | t }}</p>
        </a>
      </section>
    </section>

    <section id="lastMessages" class="col-span-8 mt-8 bg-white card dark:bg-gray-800">
      <h2 class="mb-6 text-2xl font-normal md:text-3xl">{{ "Derniers messages" | t }}</h2>
      <div class="space-y-6" id="listMessages">
        {{ range .lastTalk }}
        <div class="flex-col justify-between items-start full w-100 md:flex-row md:items-center">
          <div class="block mb-2">
            <p class="flex justify-between items-center text-lg font-bold">{{ .bot }} <span class="text-sm font-normal">{{ .date }}</span></p>
            <p class="px-2 py-1 bg-gray-100 rounded-xl dark:bg-black"><code class="text-xs text-gray-400 dark:text-gray-400">{{ .message }}</code></p>
          </div>
        </div>
        {{ end }}
      </div>
    </section>
  </div>
</main>

{{ template "footer.html" . }}