{{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="#" 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-green text-white text-sm font-medium rounded-l-3xl">
          {{.IconSet.Icon "hero:outline/shield-check" "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">Accompagnement</a>
            <p class="text-gray-500">0 actions réalisées</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-yellow text-white text-sm font-medium rounded-l-3xl">
          {{.IconSet.Icon "hero:outline/office-building" "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">Groupes</a>
            <p class="text-gray-500">0 groupes créés</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">53 membres</p>
          </div>
        </div>
      </li>
    </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}}


    </div>
</div>
{{end}}