{{define "content"}}
 <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 groupes</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/group_module/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 un groupe
          </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/group_module/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">
                  </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}}