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


{% block head %}

    <style>
        body {
            padding-top: 0px; 
        }
        .badge.rounded-pill {
            min-width: 0px;
        }

        .optional-field input,
        .optional-field select,
        .optional-field textarea {
            border: 1px dashed #6c757d !important; /* Bordure grise en pointillés */
        }

        .status-badge {
            min-width: 80px;
            cursor: pointer;
        }

        #map {
            height: 40vh; /* 40% de l'écran pour la carte */
        }

        /***** Action bar mobile *****/
        :root {
        --action-bar-h: 220px; /* hauteur par défaut (2 gros boutons) */
        }

        .action-bar {
        padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
        box-shadow: 0 -6px 16px rgba(0,0,0,.08);
        z-index: 1060;
        }

        .content-scroll{
        padding-bottom: calc(var(--action-bar-h) + env(safe-area-inset-bottom, 0px)) !important;
        }

        #qty-editor, .form-content{
        height: 100dvh;          /* mieux que 100vh sur mobile */
        display: flex;
        flex-direction: column;
        }
    </style>

{% endblock head %}



{% block content %}


    <h2 class="text-center my-4">{% translate "Remarque" %} {{ remark.remark_number }}</h2>

    {% include "controls/remark_form_content.html" %}

    <!-- Modal caméra Canvas (mode continu) -->
    <div class="modal fade" id="cameraModal" tabindex="-1" aria-labelledby="cameraModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-fullscreen-sm-down modal-dialog-centered">
            <div class="modal-content bg-dark text-white">
                <div class="modal-header border-0">
                    <h5 class="modal-title" id="cameraModalLabel">
                        <i class="bi bi-camera-video"></i> {% translate "Caméra" %}
                    </h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="{% translate 'Fermer' %}" id="cameraModalCloseBtn"></button>
                </div>
                <div class="modal-body d-flex flex-column justify-content-between p-2">
                    <div class="text-center mb-2">
                        <div class="position-relative" style="border-radius: 0.5rem; overflow: hidden;">
                            <video id="cameraPreview" class="w-100" playsinline autoplay></video>
                            <div id="cameraFlashOverlay" style="position: absolute; inset: 0; background: rgba(255, 255, 255, 0.9); opacity: 0; pointer-events: none; transition: opacity 120ms ease-out; z-index: 2;"></div>
                            <canvas id="cameraCanvas" class="d-none"></canvas>
                        </div>
                    </div>
                    <div id="cameraStatus" class="small text-center text-muted mb-2"></div>
                    <div class="d-flex justify-content-between align-items-center gap-2 mb-3">
                        <button type="button" class="btn btn-outline-light flex-fill" id="cameraStopBtn">
                            <i class="bi bi-x-circle"></i> {% translate "Terminer" %}
                        </button>
                        <button type="button" class="btn btn-primary flex-fill" id="cameraCaptureBtn">
                            <i class="bi bi-camera-fill"></i> {% translate "Capturer" %}
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

{% endblock content %}


{% block script %}
<!-- jQuery 3.7.1 (local) -->
<script src="{% static 'common/jquery.min.js' %}"></script>


{{ plans_data|json_script:"plans-data" }}
{{ remarks_data|json_script:"remarks-data" }}


<script>
    const plansData = JSON.parse(document.getElementById('plans-data').textContent);
    const remarksData = JSON.parse(document.getElementById('remarks-data').textContent);
    const autocomplete_contract_posts_url = "{% url 'contracts:autocomplete-posts' %}";

    let current_reference_plan;
    {% if remark.reference_plan %}
        current_reference_plan = {{ remark.reference_plan.id }};
    {% else %}
        current_reference_plan = "map";
    {% endif %}

    let remark_lon, remark_lat;
    {% if remark.lon and remark.lat %}
        remark_lon = {{ remark.lon|stringformat:".8f" }};
        remark_lat = {{ remark.lat|stringformat:".8f" }};
    {% endif %}

    let remark_x, remark_y;
    {% if remark.x and remark.y %}
        remark_x = {{ remark.x|stringformat:".8f" }};
        remark_y = {{ remark.y|stringformat:".8f" }};
    {% endif %}
    
</script>

<script src="{% static 'controls/remarks_form.js' %}"></script>

{% endblock script %}