{% extends "layout.html" %}

{% block title %}Events by Type - OpenEventDatabase{% endblock %}

{% block css %}
<style>
    ul { padding-left: 20px; }
    li { margin-bottom: 8px; }
    .event-count {
        color: #666;
        font-size: 0.9em;
    }
</style>
{% endblock %}

{% block header %}Events by Type{% endblock %}

{% block content %}
<p>This page lists all events from the OpenEventDatabase organized by their type.</p>

{% if events_by_what %}
    <!-- Quick navigation -->
    <h2>Quick Navigation</h2>
    <ul>
        {% for what_type in sorted_what_types %}
            <li>
                <a href="#what-{{ what_type|replace(' ', '-') }}">{{ what_type }}</a>
                <span class="event-count">({{ events_by_what[what_type]|length }} events)</span>
            </li>
        {% endfor %}
    </ul>
    
    <!-- Sections for each event type -->
    {% for what_type in sorted_what_types %}
        <h2 id="what-{{ what_type|replace(' ', '-') }}">
            {{ what_type }}
            <span class="event-count">({{ events_by_what[what_type]|length }} events)</span>
        </h2>
        <ul>
            {% for event in events_by_what[what_type]|sort(attribute='label') %}
                <li>
                    <a href="/event/{{ event.id }}">{{ event.label or 'Unnamed Event' }}</a>
                    <small>
                        [<a href="https://www.openstreetmap.org/?mlat={{ event.coordinates[1] }}&mlon={{ event.coordinates[0] }}&zoom=15">map</a>]
                    </small>
                </li>
            {% endfor %}
        </ul>
    {% endfor %}
{% else %}
    <p>No events found in the database.</p>
{% endif %}
{% endblock %}