{% extends "layout.html" %}

{% block title %}Search Events - OpenEventDatabase{% endblock %}

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

{% block head %}
<script src="https://unpkg.com/@mapbox/mapbox-gl-draw@1.4.3/dist/mapbox-gl-draw.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@mapbox/mapbox-gl-draw@1.4.3/dist/mapbox-gl-draw.css" type="text/css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
{% endblock %}

{% block header %}Search Events{% endblock %}

{% block content %}
<form id="searchForm">
    <div class="form-row">
        <div class="form-group">
            <label for="what">Event Type</label>
            <input type="text" id="what" name="what" placeholder="e.g., sport.match.football">
            <div class="note">Category of the event (e.g., sport.match.football, culture.festival)</div>
        </div>
        
        <div class="form-group">
            <label for="type">Event Type</label>
            <select id="type" name="type">
                <option value="">Any</option>
                <option value="scheduled">Scheduled</option>
                <option value="forecast">Forecast</option>
                <option value="unscheduled">Unscheduled</option>
            </select>
        </div>
    </div>
    
    <div class="form-row">
        <div class="form-group">
            <label for="when">When</label>
            <select id="when" name="when">
                <option value="now">Now</option>
                <option value="today">Today</option>
                <option value="yesterday">Yesterday</option>
                <option value="tomorrow">Tomorrow</option>
                <option value="lasthour">Last Hour</option>
                <option value="nexthour">Next Hour</option>
                <option value="last7days">Last 7 Days</option>
                <option value="next7days">Next 7 Days</option>
                <option value="last30days">Last 30 Days</option>
                <option value="next30days">Next 30 Days</option>
                <option value="custom">Custom Range</option>
            </select>
        </div>
        
        <div class="form-group" id="customDateGroup" style="display: none;">
            <label for="start">Start Date</label>
            <input type="datetime-local" id="start" name="start">
        </div>
        
        <div class="form-group" id="customDateEndGroup" style="display: none;">
            <label for="stop">End Date</label>
            <input type="datetime-local" id="stop" name="stop">
        </div>
    </div>
    
    <div class="form-row">
        <div class="form-group">
            <label for="near">Near (Longitude, Latitude, Distance in meters)</label>
            <input type="text" id="near" name="near" placeholder="e.g., 2.3522,48.8566,10000">
            <div class="note">Search for events near a specific location (e.g., 2.3522,48.8566,10000 for events within 10km of Paris)</div>
        </div>
        
        <div class="form-group">
            <label for="bbox">Bounding Box (East, South, West, North)</label>
            <input type="text" id="bbox" name="bbox" placeholder="e.g., -5.0,41.0,10.0,52.0">
            <div class="note">Search for events within a geographic bounding box</div>
        </div>
    </div>
    
    <div class="form-row">
        <div class="form-group">
            <label for="where_osm">OpenStreetMap ID</label>
            <input type="text" id="where_osm" name="where:osm" placeholder="e.g., R12345">
            <div class="note">Search for events associated with a specific OpenStreetMap ID</div>
        </div>
        
        <div class="form-group">
            <label for="where_wikidata">Wikidata ID</label>
            <input type="text" id="where_wikidata" name="where:wikidata" placeholder="e.g., Q90">
            <div class="note">Search for events associated with a specific Wikidata ID</div>
        </div>
    </div>
    
    <div class="form-row">
        <div class="form-group">
            <label for="limit">Result Limit</label>
            <input type="number" id="limit" name="limit" value="200" min="1" max="1000">
            <div class="note">Maximum number of results to return (default: 200)</div>
        </div>
        
        <div class="form-group">
            <label for="geom">Geometry Detail</label>
            <select id="geom" name="geom">
                <option value="">Default (Centroid)</option>
                <option value="full">Full Geometry</option>
                <option value="only">Geometry Only</option>
                <option value="0.01">Simplified (0.01)</option>
            </select>
            <div class="note">Controls the level of detail in the geometry portion of the response</div>
        </div>
    </div>
    
    <div class="form-group">
        <label>Search Area (Draw on Map)</label>
        <div id="map"></div>
        <div class="note">Draw a polygon on the map to define the search area, or use the form fields above</div>
    </div>
    
    <button type="submit">Search Events</button>
</form>

<div id="result"></div>

<div id="resultsContainer" style="display: none;">
    <h2>Search Results</h2>
    
    <div class="tabs-container">
        <div class="tab-buttons">
            <div class="tab-button active" data-tab="map-tab">Map View</div>
            <div class="tab-button" data-tab="table-tab">Table View</div>
        </div>
        
        <div id="map-tab" class="tab-content active">
            <div id="resultsMap" style="width: 100%; height: 500px;"></div>
        </div>
        
        <div id="table-tab" class="tab-content">
            <table class="results-table" id="resultsTable">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Label</th>
                        <th>Type</th>
                        <th>What</th>
                        <th>Where</th>
                        <th>Start</th>
                        <th>Stop</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- Results will be added here dynamically -->
                </tbody>
            </table>
        </div>
    </div>
    
    <div class="download-buttons">
        <button id="downloadCsv" class="download-button">Download CSV</button>
        <button id="downloadJson" class="download-button">Download JSON</button>
    </div>
</div>
{% endblock %}

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