{% 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">Camp Participants. 
            <div class="mb-2 text-sm font-semibold">Participant List Table*</div>
        </div>
    </div>
    <div class="table-responsive">
        <table>
            <thead>
                <tr class="border-b-0">
                    <th class="whitespace-nowrap ltr:rounded-l-md rtl:rounded-r-md">No.</th>
                    <th class="whitespace-nowrap">Participant Name</th>
                    <th class="whitespace-nowrap">Participant Email</th>
                    <th class="whitespace-nowrap">Participant Phone</th>
                    
                    <th class="whitespace-nowrap ltr:rounded-r-md rtl:rounded-l-md">Actions</th>
                </tr>
            </thead>
            <tbody>
                {% for participant in participants %}
                <tr class="text-white-dark hover:text-black dark:hover:text-white-light/90 group">
                    <td>{{ forloop.counter }}. </td>
                    
                    <td>{{participant.name}}</td>
                    <td>{{participant.email}}</td>
                    <td>{{participant.phone}}</td>
                    
                    
                    <td class="min-w-[100px] text-black dark:text-white">
                        
                        
                        <a href="#" class="hover:text-info" x-tooltip="Register {{participant.name}} for Medical service!" data-theme="info" 
                            onclick="return confirm('Are you sure you want to Register ({{participant.name}}) ?');">
                            
                        </a>
                    </td>
                    
                </tr>
                {% endfor %}
            </tbody>
        </table>
        
        
    

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