{% load static %}
{% load humanize %}

<div class="panel h-full w-full">
    
    <div class="flex items-center justify-between mb-5">
        <div class="mb-5 text-lg font-bold">Workshops Participants attended. 
            <div class="mb-2 text-sm font-semibold">Workshops Participants attended List Table*</div>
        </div>
    </div>
    <div class="table-responsive">
        <table>
            <thead>
                <tr class="border-b-0">
                    <th class="whitespace-nowrap">No. Participant</th>
                    <th class="whitespace-nowrap">Workshops</th>
                    <th class="whitespace-nowrap">Lessons Learned/Taught</th>
                    
                </tr>
            </thead>
            <tbody>
                {% for participant in participantworkshops %}
                <tr class="text-white-dark hover:text-black dark:hover:text-white-light/90 group">
                    <td>{{ participant.participant_count }}</td> 
                    <td>{{participant.workshop.workshop_title}}<strong> BY </strong>{{participant.workshop.workshop_officer}}</td>
                    <td>{{participant.lessons_learned}}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
        
        
        
    

    </div>
    <br />
    
</div>