{{define "beneficiary_notes"}}
<div class="px-4 py-6 sm:px-6">
    <ul role="list" class="space-y-8">
        <li>
            <div class="flex space-x-3">
                <div class="flex-shrink-0">
                    <img class="h-10 w-10 rounded-full"
                        src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
                        alt="">
                </div>
                <div>
                    <div class="text-sm">
                        <a href="#" class="font-medium text-gray-900">Leslie Alexander</a>
                    </div>
                    <div class="mt-1 text-sm text-gray-700">
                        <p>Ducimus quas delectus ad maxime totam doloribus reiciendis ex.
                            Tempore dolorem maiores. Similique voluptatibus tempore non ut.</p>
                    </div>
                    <div class="mt-2 text-sm space-x-2">
                        <span class="text-gray-500 font-medium">4d ago</span>
                        <span class="text-gray-500 font-medium">&middot;</span>
                        <button type="button" class="text-gray-900 font-medium">Reply</button>
                    </div>
                </div>
            </div>
        </li>

        <li>
            <div class="flex space-x-3">
                <div class="flex-shrink-0">
                    <img class="h-10 w-10 rounded-full"
                        src="https://images.unsplash.com/photo-1519244703995-f4e0f30006d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
                        alt="">
                </div>
                <div>
                    <div class="text-sm">
                        <a href="#" class="font-medium text-gray-900">Michael Foster</a>
                    </div>
                    <div class="mt-1 text-sm text-gray-700">
                        <p>Et ut autem. Voluptatem eum dolores sint necessitatibus quos. Quis
                            eum qui dolorem accusantium voluptas voluptatem ipsum. Quo facere
                            iusto quia accusamus veniam id explicabo et aut.</p>
                    </div>
                    <div class="mt-2 text-sm space-x-2">
                        <span class="text-gray-500 font-medium">4d ago</span>
                        <span class="text-gray-500 font-medium">&middot;</span>
                        <button type="button" class="text-gray-900 font-medium">Reply</button>
                    </div>
                </div>
            </div>
        </li>

        <li>
            <div class="flex space-x-3">
                <div class="flex-shrink-0">
                    <img class="h-10 w-10 rounded-full"
                        src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
                        alt="">
                </div>
                <div>
                    <div class="text-sm">
                        <a href="#" class="font-medium text-gray-900">Dries Vincent</a>
                    </div>
                    <div class="mt-1 text-sm text-gray-700">
                        <p>Expedita consequatur sit ea voluptas quo ipsam recusandae. Ab sint et
                            voluptatem repudiandae voluptatem et eveniet. Nihil quas consequatur
                            autem. Perferendis rerum et.</p>
                    </div>
                    <div class="mt-2 text-sm space-x-2">
                        <span class="text-gray-500 font-medium">4d ago</span>
                        <span class="text-gray-500 font-medium">&middot;</span>
                        <button type="button" class="text-gray-900 font-medium">Reply</button>
                    </div>
                </div>
            </div>
        </li>
    </ul>
</div>
<div class="bg-gray-50 px-4 py-6 sm:px-6">
    <div class="flex space-x-3">
        <div class="flex-shrink-0">
            <img class="h-10 w-10 rounded-co"
                src="https://images.unsplash.com/photo-1517365830460-955ce3ccd263?ixlib=rb-=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=8&w=256&h=256&q=80"
                alt="">
        </div>
        <div class="min-w-0 flex-1">
            <form action="#">
                <div>
                    <label for="comment" class="sr-only">Note</label>
                    <textarea id="comment" name="comment" rows="3"
                        class="shadow-sm block w-full focus:ring-blue-500 focus:border-blue-500 sm:text-sm border border-gray-300 rounded-md"
                        placeholder="Ajouter une note"></textarea>
                </div>
                <div class="mt-3 flex items-center justify-between">
                    <a href="#"
                        class="group inline-flex items-start text-sm space-x-2 text-gray-500 hover:text-gray-900">
                        <!-- Heroicon name: solid/question-mark-circle -->
                        {{.IconSet.Icon "hero:solid/question-mark-icon" "flex-shrink-0 h-5 w-5 text-gray-400 group-hover:text-gray-500" }}
                        <span> Accepte le "markdown". </span>
                    </a>
                    <button type="submit"
                        class="inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-co-blue hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-co-blue">Ajouter la note</button>
                </div>
            </form>
        </div>
    </div>
</div>
{{end}}