{{define "content"}}

<div class="max-w-7xl mx-auto px-4 sm:px-6 md:px-8">
    <h1 class="text-2xl font-semibold text-gray-900">Tableau de bord</h1>
</div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 md:px-8 mt-8">
    <h2 class="text-gray-500 text-xs font-medium uppercase tracking-wide">Statistiques de votre organisation</h2>
    <ul role="list" class="mt-3 grid grid-cols-1 gap-5 sm:gap-6 sm:grid-cols-2 lg:grid-cols-4">
      <li class="col-span-1 flex shadow-sm rounded-3xl">
        <div
          class="flex-shrink-0 flex items-center justify-center w-16 bg-co-blue text-white text-sm font-medium rounded-l-3xl">
          {{.IconSet.Icon "hero:outline/user-group" "h-6 w-6"}}
        </div>
        <div
          class="flex-1 flex items-center justify-between border-t border-r border-b border-gray-200 bg-white rounded-r-3xl truncate">
          <div class="flex-1 px-4 py-2 text-sm truncate">
            <a href="/app/beneficiaries/" class="text-gray-900 font-medium hover:text-gray-600">Bénéficiaires</a>
            <p class="text-gray-500">{{.ViewState.beneficiaries.count}} bénéficiaires</p>
          </div>
        </div>
      </li>

      <li class="col-span-1 flex shadow-sm rounded-3xl">
        <div
          class="flex-shrink-0 flex items-center justify-center w-16 bg-co-red text-white text-sm font-medium rounded-l-3xl">
          {{.IconSet.Icon "hero:outline/briefcase" "h-6 w-6"}}
        </div>
        <div
          class="flex-1 flex items-center justify-between border-t border-r border-b border-gray-200 bg-white rounded-r-3xl truncate">
          <div class="flex-1 px-4 py-2 text-sm truncate">
            <a href="#" class="text-gray-900 font-medium hover:text-gray-600">Référents</a>
            <p class="text-gray-500">{{.ViewState.count_members}} membres</p>
          </div>
        </div>
      </li>

      {{if moduleAvailable "solidarity_transport"}}
      <li class="col-span-1 flex shadow-sm rounded-3xl">
        <div
          class="flex-shrink-0 flex items-center justify-center w-16 bg-co-orange text-white text-sm font-medium rounded-l-3xl">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
            <circle cx="12" cy="7" r="4"></circle>
          </svg>
        </div>
        <div
          class="flex-1 flex items-center justify-between border-t border-r border-b border-gray-200 bg-white rounded-r-3xl truncate">
          <div class="flex-1 px-4 py-2 text-sm truncate">
            <a href="/app/solidarity-transport/?tab=drivers" class="text-gray-900 font-medium hover:text-gray-600">Conducteurs solidaires</a>
            <p class="text-gray-500">{{len .ViewState.solidarity_drivers}} conducteurs</p>
          </div>
        </div>
      </li>
      {{end}}

      {{if moduleAvailable "organized_carpool"}}
      <li class="col-span-1 flex shadow-sm rounded-3xl">
        <div
          class="flex-shrink-0 flex items-center justify-center w-16 bg-co-green text-white text-sm font-medium rounded-l-3xl">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
            <circle cx="12" cy="7" r="4"></circle>
          </svg>
        </div>
        <div
          class="flex-1 flex items-center justify-between border-t border-r border-b border-gray-200 bg-white rounded-r-3xl truncate">
          <div class="flex-1 px-4 py-2 text-sm truncate">
            <a href="/app/organized-carpool/?tab=drivers" class="text-gray-900 font-medium hover:text-gray-600">Covoitureurs solidaires</a>
            <p class="text-gray-500">{{len .ViewState.organized_carpool_drivers}} covoitureurs</p>
          </div>
        </div>
      </li>
      {{end}}
    </ul>
  </div>

<div class="max-w-7xl mx-auto py-8 px-4 sm:px-6 md:px-8">
    <div class="py-4 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">


      {{template "beneficiaries_widget" .ViewState.beneficiaries}}

      {{if moduleAvailable "agenda"}}
        {{template "agenda_widget" .ViewState.events}}
      {{end}}

      {{if moduleAvailable "vehicles_management"}}
        {{template "bookings_widget" .ViewState.fleets}}
      {{end}}

    </div>

    {{if or (moduleAvailable "solidarity_transport") (moduleAvailable "organized_carpool")}}
    <div class="py-4">
      {{template "drivers_map_widget" .ViewState}}
    </div>
    {{end}}
</div>
{{end}}