{% extends "base.html" %}
{% load static %}
{% load i18n %}

{% block head %}
    <!-- jQuery UI 1.14.1 (local) -->
    <link rel="stylesheet" href="{% static 'common/jquery-ui.min.css' %}">

    <style>
        .ui-autocomplete {
            max-height: 400px;
            overflow-y: auto;
            overflow-x: hidden;
            z-index: 1000;
        }

        /* ── Optimisations mobiles ── */
        @media (max-width: 576px) {
            #map { height: 240px !important; }
            .card-body { padding: 0.75rem !important; }
            .card-header { padding: 0.5rem 0.75rem !important; }
            button[type="submit"] {
                position: sticky;
                bottom: 0.75rem;
                z-index: 100;
                width: 100%;
                padding: 0.85rem;
                font-size: 1.05rem;
                box-shadow: 0 -2px 10px rgba(0,0,0,0.15);
            }
        }

        @media (max-width: 768px) {
            input[type="text"],
            input[type="search"],
            input[type="number"],
            input[type="email"],
            input[type="date"],
            textarea,
            select {
                font-size: 16px !important;
            }
        }
    </style>
{% endblock head %}

{% block content %}
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-8 col-md-10 col-sm-12">
                <h3 style="text-align: center;">
                    {% if page_title %}
                        {{ page_title }}
                    {% else %}
                        {% if inspection_config %}
                            {% translate "Nouvelle inspection" %}
                        {% else %}
                            {% translate "Créer une intervention" %}
                        {% endif %}
                        - {{ thematic.name }}
                    {% endif %}
                </h3>
                {% include "interventions/add/_intervention_add_form.html" %}
            </div>
        </div>
    </div>
{% endblock content %}

{% block script %}
    <script src="{% static 'common/layer-switcher-control.js' %}"></script>
    {% include "interventions/add/_intervention_add_scripts.html" %}
{% endblock script %}