{{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">Administration</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</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">{{len (index .ViewState.groups 0).Members}} 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/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">Organisations</a>
          <p class="text-gray-500">{{len .ViewState.groups}} organisations</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">1 membres</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/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>
  </ul>
</div>

<div class="max-w-7xl mt-10 mx-auto px-4 sm:px-6 md:px-8">
  <h2 class="text-xl font-semibold text-gray-500">Gestion des organisations</h2>

  <div class="sm:flex sm:items-center">
    <div class="sm:flex-auto">
      <p class="mt-2 text-sm text-gray-700"></p>
    </div>
    <div class="mt-4 sm:mt-0 sm:ml-16 sm:flex-none">
      <a href="/app/administration/groups/">
        <button type="button"
          class="inline-flex items-center justify-center rounded-2xl border border-transparent bg-co-blue px-4 py-2 text-sm font-medium text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-co-blue focus:ring-offset-2 sm:w-auto">
          {{$.IconSet.Icon "hero:outline/plus-circle" "h-5 w-5 mr-3"}}
          Ajouter une organisation
        </button>
      </a>
    </div>
  </div>

  <div class="bg-white shadow overflow-hidden sm:rounded-3xl mt-4">
    <ul role="list" class="divide-y divide-gray-200">
      {{range .ViewState.groups}}
      <li>
        <a href="/app/administration/groups/{{.ID}}" class="block hover:bg-gray-50">
          <div class="px-4 py-4 flex items-center sm:px-6">
            <div class="min-w-0 flex-1 sm:flex sm:items-center sm:justify-between">
              <div class="truncate">
                <div class="flex text-sm">
                  <p class="font-medium text-lg text-co-blue truncate">{{.Data.name}}</p>
                  <p class="ml-1 flex-shrink-0 font-normal text-gray-500"></p>
                </div>
                <div class="mt-2 flex">
                  <div class="flex items-center text-sm text-gray-500">
                    {{$.IconSet.Icon "hero:outline/user-group" "flex-shrink-0 mr-1.5 h-5 w-5"}}
                    <p>
                      {{ len .Members }} bénéficiaires
                    </p>
                  </div>
                </div>
              </div>
              <div class="mt-4 flex-shrink-0 sm:mt-0 sm:ml-5">
                <div class="flex overflow-hidden -space-x-1">
                  <!-- <img class="inline-block h-6 w-6 rounded-full ring-2 ring-white"
                    src="http://localhost:9000/app/beneficiaries/e7616eac-4a87-4396-a505-23e0421b9c4c/picture"
                    alt="Dries Vincent"> -->
                </div>
              </div>
            </div>
            <div class="ml-5 flex-shrink-0">
              {{$.IconSet.Icon "hero:solid/chevron-right" "h-5 w-5 text-gray-400"}}
            </div>
          </div>
        </a>
      </li>
      {{end}}
    </ul>
  </div>
</div>
{{end}}