{% extends "layout.html" %}

{% block title %}Map by Event Type - OpenEventDatabase{% endblock %}

{% block css %}
<link rel="stylesheet" href="/static/map_by_what.css">
{% endblock %}

{% block header %}Map by Event Type{% endblock %}

{% block content %}
<div id="map"></div>

<div class="map-overlay">
    <p>This map shows events from the OpenEventDatabase filtered by their type.</p>
    <p>Use the filter panel on the right to show/hide different event types.</p>
    <div id="event-info">
        <p>Loading events...</p>
    </div>
</div>

<div class="filter-overlay">
    <h3>Filter by Event Type</h3>
    <div>
        <button id="select-all">Select All</button>
        <button id="deselect-all">Deselect All</button>
    </div>
    <ul id="filter-list" class="filter-list">
        <li>Loading event types...</li>
    </ul>
</div>
{% endblock %}

{% block scripts %}
<script src="/static/map_by_what.js"></script>
{% endblock %}