{% extends 'base.html' %}

{% block content %}

<table class="table">
    <thead>
        <tr>
            <td>Event Name</td>
            <td>Already Responded</td>
            <td>Start Date</td>
            <td>End Date</td>
            <td> img </td>
        </tr>
    </thead>
    <tbody>
        {% for event in events%}
        <div class="accordion-item">
            <div class="accordion-item">
                <h2 class="accordion-header" id="event-{{event.id}}">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#event-collapse-{{event.id}}" aria-expanded="true" aria-controls="event-collapse-{{event.id}}">
                    {{event.name}}
                </button>
                </h2>
                <div id="event-collapse-{{event.id}}" class="accordion-collapse collapse" aria-labelledby="event-{{event.id}}" data-bs-parent="#accordionExample">
                    <div class="accordion-body">

                            {{event.description}}
                    </div>
                </div>
            </div>
        </div>

        {% endfor %}
    </tbody>
</table>

{% endblock %}