{% 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 %}