{% extends "base.html" %}
{% block title %}Find events · What2Do{% endblock %}
{% block head %}<link href="https://unpkg.com/maplibre-gl@5.7.1/dist/maplibre-gl.css" rel="stylesheet">{% endblock %}
{% block content %}
<section class="hero"><div class="eyebrow">LOCAL EVENT INDEX</div><div class="hero-title">Find something worth going out for.</div><div class="hero-copy">Search events gathered from local venue websites.</div></section>
<form class="search search-filters card" method="get" id="search-form">
  <div class="field location-field">Near<input id="location-input" name="location" value="{{ location }}" placeholder="Start typing a suburb or address" autocomplete="off"><input type="hidden" id="latitude-input" name="latitude" value="{{ latitude if latitude is not none else '' }}"><input type="hidden" id="longitude-input" name="longitude" value="{{ longitude if longitude is not none else '' }}"><div id="location-options" class="location-options" hidden></div></div>
  <div class="field">Search term<input name="term" value="{{ term }}" placeholder="Band, venue, activity..."></div>
  <div class="field tag-field">Event types<button type="button" id="tag-toggle" class="tag-toggle">{{ selected_tags|length ~ ' selected' if selected_tags else 'All types' }}</button><div id="tag-options" class="tag-options" hidden>{% for option in event_tags %}<label class="tag-option"><input type="checkbox" name="tag" value="{{ option }}" {% if option in selected_tags %}checked{% endif %}><span>{{ option|title }}</span></label>{% endfor %}<label class="tag-option"><input type="checkbox" name="tag" value="other" {% if 'other' in selected_tags %}checked{% endif %}><span></span>Other</span></label></div></div>
  <div class="field range-field">Within<input type="number" min="1" max="500" name="radius" value="{{ radius }}"><span class="suffix">km</span></div>
  <button type="submit">Search</button>
</form>
{% if location and not geocoded %}<div class="notice error">That location could not be resolved. Select an autocomplete suggestion to apply distance filtering.</div>{% endif %}
<div class="section-head"><div><div class="eyebrow">WHAT'S ON</div><div class="section-title"><span id="visible-event-count">{{ events|length }}</span> events</div></div><a class="button secondary" href="/sources/new">+ Add source</a></div>
<div class="view-tabs"><button type="button" class="tab active" data-view="list-view">List</button><button type="button" class="tab" data-view="map-view">Map</button></div>
<section id="list-view" class="view-panel active">
  <div class="date-calendar card">
    <div class="calendar-heading">Choose a range · {{ calendar_month }}</div>
    <div class="calendar-tools"><span id="range-status">Select a start date</span><button type="button" id="clear-day" class="clear-day" hidden>Show all</button></div>
    <div class="weekdays"><input type="button" value="Mon" disabled><input type="button" value="Tue" disabled><input type="button" value="Wed" disabled><input type="button" value="Thu" disabled><input type="button" value="Fri" disabled><input type="button" value="Sat" disabled><input type="button" value="Sun" disabled></div>
    <div class="calendar-grid">{% for day in calendar_days %}<button type="button" class="calendar-day {{ '' if day.in_month else 'outside' }} {{ 'has-events' if day.count else '' }}" data-day="{{ day.key }}"><span>{{ day.date.day }}</span>{% if day.count %}<b>{{ day.count }}</b>{% endif %}</button>{% endfor %}</div>
  </div>
  <div id="event-list" class="day-events">
    {% for event in events %}<a class="event-row card" href="/events/{{ event.id }}" data-event-start="{{ event.day_key }}" data-event-end="{{ event.end_day_key }}"><div><div class="date">{{ event.display_time }}</div><div class="event-title">{{ event.title }}</div><div class="muted">{{ event.venue_name }} · {{ event.address }}</div><div class="tag-list">{% for event_tag in event.tags %}<span class="pill">{{ event_tag }}</span>{% endfor %}</div></div><div class="event-link-label">View →</div></a>{% else %}<div class="empty card">No events match these filters.</div>{% endfor %}
    <div id="day-empty" class="empty card" hidden>No events occur on this day.</div>
  </div>
</section>
<section id="map-view" class="view-panel"><div id="events-map" class="map card"></div></section>
<script id="map-events" type="application/json">{{ map_events|tojson }}</script>
{% endblock %}
{% block scripts %}<script src="https://unpkg.com/maplibre-gl@5.7.1/dist/maplibre-gl.js"></script><script src="/static/app.js"></script>{% endblock %}