{% extends 'base.html' %}

{% block content %}
    <input id="location" value="{{ location }}" hidden></input>

    <div class="container">

    <ul class="nav nav-tabs my-4" id="map-tab" role="tablist">
        {% for map_type, type_config in config.items %}
        <li class="nav-item" role="presentation">
            <button class="nav-link map-param-field {% if forloop.first %}active{% endif %}"
                id="{{ map_type }}-tab" 
                data-bs-toggle="tab" 
                data-bs-target="#{{ map_type }}" 
                type="button" 
                role="tab" 
                aria-controls="{{ map_type }}" 
                aria-selected="{% if forloop.first %}true{% else %}false{% endif %}"
            >
                {{ type_config.name }}
        </li>
        {% endfor %}
    </ul>

    <div class="tab-content my-4" id="map-tab-content">
        {% for map_type, type_config in config.items %}
            <div class="tab-pane fade {% if forloop.first %}show active{% endif %}"
                id="{{ map_type }}"
                name="{{ map_type }}"
                role="tabpanel"
                aria-labelledby="{{ map_type }}-tab"
            >
                <div class="d-flex flex-wrap gap-3">
                    {% for item, options in type_config.items %}
                        {% if item != 'name' %}
                            <div class="flex-grow-1">
                                <label for="{{ item }}">{{ item }}</label>
                                <select class="form-select content-item map-param-field"
                                    name="{{ item }}" 
                                    id="{{ item }}"
                                    aria-label="{{ item }}"
                                >
                                    {% for option_value, option_name in options.items %}
                                    <option value="{{ option_value }}">
                                        {{ option_name }}
                                    </option>
                                    {% endfor %}
                                </select>
                            </div>
                        {% endif %}
                    {% endfor %}
                </div>

            </div>
        {% endfor %}
    </div>

    <div class="text-center my-4">
        <a id="image-a" href="{{ image_url }}" data-lightbox="image-1" data-title="Map">
            <img src="{{ image_url }}" alt="Img" style="height: 70vh;">
        </a>
    </div>

    </div>

{% endblock %}