{{define "beneficiaries_widget"}}
<div class="col-span-1 bg-white rounded-2xl shadow divide-y divide-gray-200 flex flex-col">
    <div class="-ml-4 -mt-2 px-4 py-2 flex items-center justify-between flex-wrap sm:flex-nowrap">
        <div class="ml-4 mt-2">
            <h3 class="text-lg leading-6 font-medium text-gray-900">Bénéficiaires</h3>
            <h2 class="text-sm leading-6 font-medium text-gray-600">Derniers bénéficiaires ajoutés</h2>
        </div>
        <!-- <div class="ml-4 mt-2 flex-shrink-0">
          <button type="button" class="relative inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-co-blue hover:bg-co-blue focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-co-blue">Voir</button>
        </div> -->
    </div>
    <ul role="list" class="divide-y divide-gray-200 flex-1">
        {{range .latest}}
            <li class="py-2 px-4 flex">
                <a href="/app/beneficiaries/{{.ID}}" class="flex w-full">
                <img class="h-6 w-6 rounded-co" src="/app/beneficiaries/{{.ID}}/picture" alt="">
                <div class="ml-3">
                    <p class="text-sm font-medium text-gray-900">{{.Data.first_name}} {{.Data.last_name}}</p>
                </div>
            </a>
            </li>
        {{end}}
    </ul>

    <a href="/app/beneficiaries/">
        <button class="w-full p-2 text-center bg-co-blue text-white rounded-b-2xl text-sm">
            Gérer les bénéficiaires
        </button>
    </a>
</div>
{{end}}