{{define "groups_members"}}
<div class="border-t border-gray-200 px-4 py-5 sm:px-6">
  
  <h2 class="text-md font-medium text-gray-900">Membres de l'organisation</h2>
  
  <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">

    {{range .ViewState.members}}
    <div class="relative rounded-lg  bg-white px-6 py-5 flex items-center space-x-3 focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-co-blue">
      <div class="flex-shrink-0">
        <img class="h-10 w-10 rounded-co" src="/app/beneficiaries/{{.ID}}/picture" alt="">
      </div>
      <div class="flex-1 min-w-0">
        <a href="#" class="focus:outline-none">
          <span class="absolute inset-0" aria-hidden="true"></span>
          <p class="text-sm font-medium text-gray-900">{{.Data.first_name}} {{.Data.last_name}}</p>
          <p class="text-sm text-gray-500 truncate">{{.Data.email}}</p>
        </a>
      </div>
    </div>
    {{end}}
  </div>
</div>

<!-- <div class="border-t border-gray-200 px-4 py-5 sm:px-6">
  
  <h2 class="text-md font-medium text-gray-900">Membres de l'organisation</h2>
  
  <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">

    {{range .ViewState.members}}
    <div class="relative rounded-lg  bg-white px-6 py-5 flex items-center space-x-3 focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-co-blue">
      <div class="flex-shrink-0">
        <img class="h-10 w-10 rounded-co" src="/app/beneficiaries/{{.ID}}/picture" alt="">
      </div>
      <div class="flex-1 min-w-0">
        <a href="#" class="focus:outline-none">
          <span class="absolute inset-0" aria-hidden="true"></span>
          <p class="text-sm font-medium text-gray-900">{{.Data.first_name}} {{.Data.last_name}}</p>
          <p class="text-sm text-gray-500 truncate">{{.Data.email}}</p>
        </a>
      </div>
    </div>
    {{end}}
  </div>
</div> -->
{{end}}