{% extends 'base.html' %}

{% block attendees %}
            
<div class="row">
<div class="col-md-12">
    <div class="card card-round">
    <div class="card-header">
        <div class="card-head-row card-tools-still-right" >
        <h4 class="card-title">Accredited Guests</h4>
        
        <div class="card-tools" style="display: flex; align-items: center;">
            <button
            class="btn btn-icon btn-link btn-primary btn-xs btn-refresh-card"
            onclick=`window.location.href="{% url 'dashboard' %}"`;
            >
            <span class="fa fa-sync-alt"></span>
            </button>
            
        </div>
        </div>
        <p class="card-category">  </p>
    </div>
        <div class="card-body p-0 pb-3">
        <div class="table-responsive">
            {% if guests %}
            
            <div class="container-fluid">       
            <table class="table bg-light myTable" id="attendeeTable">
                <thead class="thead-light">
                <tr>
                    <th scope="col">#</th>
                    <th scope="col">Full Name</th>
                    <th scope="col">Email</th>
                    <th scope="col">Phone</th>
                    <th scope="col">Date&Time</th>
                </tr>
                </thead>
                <tbody>
                {% for accredited in guests %}
                    <tr>
                        <td>{{ forloop.counter }}</td>
                        <td>{{ accredited.rsvp.name }}</td>                                   
                        <td>{{ accredited.rsvp.email }}</td>
                        <td>{{ accredited.rsvp.phone }}</td>
                        <td style="font-size: 12px;">{{accredited.date}}</td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
            
            </div>
            
            {% else %}
            <div class="row my-5" style="padding: 50px 0">
                <h5 class="text-center">No accredited guests found.</h5>
            </div>
            {% endif %}
        </div>
        </div>
    </div>
</div>
</div>

{% endblock attendees %}