{% extends 'base.html' %}
{% block content %}
<div class="text-center my-4">
    <h1 class="text-3xl font-bold mb-4">Wildfire Alert Service</h1>
    <!-- Search Bar -->
    <div class="flex justify-center mb-4 relative">
        <div class="relative w-96">
            <input type="text" id="search" class="p-2 border rounded-l w-full" placeholder="Enter Location"
                autocomplete="off">
            <!-- Suggestions Dropdown -->
            <div id="suggestions" class="absolute left-0 mt-1 w-full"></div>
        </div>
        <button id="searchBtn" class="p-2 bg-blue-500 text-white rounded-r">Search</button>
    </div>
    <!-- Map Display -->
    <div id="map" class="w-full max-w-lg h-96 mx-auto mb-4 border-2 border-blue-500 rounded"></div>
    <!-- Alert Subscription Form -->
    <form id="alertForm" class="max-w-md mx-auto">
        <div class="mb-4">
            <label for="email" class="block text-gray-700 font-bold mb-2">Your Email:</label>
            <input type="email" id="email" name="email" class="p-2 border rounded w-full" required>
        </div>
        <button type="submit" class="p-2 bg-blue-500 text-white rounded w-full">Receive Alerts</button>
    </form>
    <!-- Alert Message Display -->
    <div id="message" class="mt-4 text-center"></div>
</div>

<script src="https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.css" rel="stylesheet">

<!-- JavaScript for Alert Map -->
<script src="{{ url_for('static', filename='js/alert_map.js') }}"></script>

<!-- Defining MapBox access token -->
<script>
    mapboxgl.accessToken = "{{ MAPBOX_TOKEN }}";
</script>

<!-- CSS for Suggestions Dropdown -->
<style>
    #suggestions {
        background: white;
        border: 1px solid #ccc;
        border-top: none;
        max-height: 200px;
        overflow-y: auto;
        z-index: 1000;
    }

    .suggestion-item {
        padding: 10px;
        cursor: pointer;
        text-align: left;
    }

    .suggestion-item:hover {
        background-color: #f0f0f0;
    }
</style>
{% endblock %}