{% include page-anchor.html anchor-name="events" %}

<div class="event-tabs">
    <div class="event-tab-list">
        <p class="upcoming event-tab-item active">Upcoming Events</p>
        <p class="past event-tab-item">Past Events</p>
    </div>
    <div class="event-tab-content">
        <div class="event-tab-pane active">
            {% include event-cards-future.html %}
        </div>
        <div class="event-tab-pane">
            {% include event-cards-past.html %}
        </div>
    </div>
</div>

<script>

    function setupTabs() {
        const tabItems = document.querySelectorAll('.event-tab-item');
        const tabContent = document.querySelectorAll('.event-tab-pane');
        tabItems.forEach((item, index) => {
            item.addEventListener('click', () => {
                tabItems.forEach(item => item.classList.remove('active'));
                tabContent.forEach(pane => pane.classList.remove('active'));
                item.classList.add('active');
                tabContent[index].classList.add('active');
            });
        });
    }

    function linkToEventsSection() {
        const url = new URL(window.location.href);
        const events = url.searchParams.get("events");
        $(`.${events}`).click();
    }

    setupTabs();
    linkToEventsSection();

</script>

<style>

    .event-tabs {
        display: flex;
        flex-direction: column;
        margin-left: 20px;
        color: #7593bd;
    }

    .event-tab-list {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
    }

    .event-tab-item {
        padding: 10px;
        cursor: pointer;
    }

    .event-tab-item.active {
        text-decoration: underline;
    }

    .event-tab-content {
        flex-grow: 1;
    }

    .event-tab-pane {
        display: none;
        padding: 10px;
    }

    .event-tab-pane.active {
        display: block;
    }

</style>