{% extends "base.html" %}

{% block title %}Map - {{ network_name }}{% endblock %}

{% block content %}
<div class="flex items-center justify-between mb-6">
    <h1 class="text-3xl font-bold">Map</h1>
    <div class="flex items-center gap-2">
        <span id="node-count" class="badge badge-lg">Loading...</span>
        <span id="filtered-count" class="badge badge-lg badge-ghost hidden"></span>
    </div>
</div>

<!-- Filters -->
<div class="card bg-base-100 shadow mb-6">
    <div class="card-body py-4">
        <div class="flex gap-4 flex-wrap items-end">
            <div class="form-control">
                <label class="label py-1">
                    <span class="label-text">Show</span>
                </label>
                <select id="filter-category" class="select select-bordered select-sm">
                    <option value="">All Nodes</option>
                    <option value="infra">Infrastructure Only</option>
                </select>
            </div>
            <div class="form-control">
                <label class="label py-1">
                    <span class="label-text">Node Type</span>
                </label>
                <select id="filter-type" class="select select-bordered select-sm">
                    <option value="">All Types</option>
                    <option value="chat">Chat</option>
                    <option value="repeater">Repeater</option>
                    <option value="room">Room</option>
                </select>
            </div>
            <div class="form-control">
                <label class="label py-1">
                    <span class="label-text">Member</span>
                </label>
                <select id="filter-member" class="select select-bordered select-sm">
                    <option value="">All Members</option>
                    <!-- Populated dynamically -->
                </select>
            </div>
            <div class="form-control">
                <label class="label cursor-pointer gap-2 py-1">
                    <span class="label-text">Show Labels</span>
                    <input type="checkbox" id="show-labels" class="checkbox checkbox-sm">
                </label>
            </div>
            <button id="clear-filters" class="btn btn-ghost btn-sm">Clear Filters</button>
        </div>
    </div>
</div>

<div class="card bg-base-100 shadow-xl">
    <div class="card-body p-2">
        <div id="map"></div>
    </div>
</div>

<!-- Legend -->
<div class="mt-4 flex flex-wrap gap-4 items-center text-sm">
    <span class="opacity-70">Legend:</span>
    <div class="flex items-center gap-1">
        <div style="width: 10px; height: 10px; background: #ef4444; border: 2px solid #b91c1c; border-radius: 50%;"></div>
        <span>Infrastructure</span>
    </div>
    <div class="flex items-center gap-1">
        <div style="width: 10px; height: 10px; background: #3b82f6; border: 2px solid #1e40af; border-radius: 50%;"></div>
        <span>Public</span>
    </div>
</div>

<div class="mt-2 text-sm opacity-70">
    <p>Nodes are placed on the map based on GPS coordinates from node reports or manual tags.</p>
</div>
{% endblock %}

{% block extra_scripts %}
<script>
    window.mapConfig = {
        logoUrl: "{{ logo_url }}",
        dataUrl: "/map/data"
    };
</script>
<script src="{{ url_for('static', path='js/map-main.js') }}"></script>
{% endblock %}