{% load i18n %}
<div class="p-3">
    <h5>{% translate "Éditer le Poteau" %} #{{ pole.id }}</h5>
    <form id="edit-pole-form" method="post" action="{% url 'sign:sign_pole_edit' pole_id=pole_id %}">
        {% csrf_token %}
        {{ form.lat }}
        {{ form.lon }}
        {{ form.orientation }}
        
        <div class="mb-3">
            <label class="form-label">{% translate "Latitude" %}</label>
            <input type="text" class="form-control" id="edit-lat-display" value="{{ form.lat.value|default:'' }}" disabled>
        </div>
        <div class="mb-3">
            <label class="form-label">{% translate "Longitude" %}</label>
            <input type="text" class="form-control" id="edit-lon-display" value="{{ form.lon.value|default:'' }}" disabled>
        </div>

        <!-- Orientation display (controlled via map marker) -->
        <div class="mb-3">
            <label class="form-label">{% translate "Orientation" %}</label>
            <div class="d-flex align-items-center gap-2">
                <span id="orientation-display" class="fs-5 fw-bold text-primary">{{ form.orientation.value|default:'90' }}°</span>
                <span class="text-muted small">
                    <i class="bi bi-arrow-repeat"></i> {% translate "Faites tourner la flèche sur la carte ou déplacez le marqueur" %}
                </span>
            </div>
        </div>

        <div class="mb-3">
            <label for="{{ form.category.id_for_label }}" class="form-label">{{ form.category.label }}</label>
            {{ form.category }}
            {% if form.category.errors %}
            <div class="invalid-feedback d-block">{{ form.category.errors }}</div>
            {% endif %}
        </div>

        <div class="mb-3">
            <label for="{{ form.model.id_for_label }}" class="form-label">{{ form.model.label }}</label>
            {{ form.model }}
            {% if form.model.errors %}
            <div class="invalid-feedback d-block">{{ form.model.errors }}</div>
            {% endif %}
        </div>

        <div class="mb-3">
            <label for="{{ form.support_type.id_for_label }}" class="form-label">{{ form.support_type.label }}</label>
            {{ form.support_type }}
            {% if form.support_type.errors %}
            <div class="invalid-feedback d-block">{{ form.support_type.errors }}</div>
            {% endif %}
        </div>

        <div class="mb-3">
            <label for="{{ form.organization.id_for_label }}" class="form-label">{{ form.organization.label }}</label>
            {{ form.organization }}
            {% if form.organization.errors %}
            <div class="invalid-feedback d-block">{{ form.organization.errors }}</div>
            {% endif %}
        </div>

        <div class="d-grid gap-2">
            <button type="submit" class="btn btn-primary">{% translate "Enregistrer" %}</button>
            <button type="button" class="btn btn-outline-secondary" onclick="cancelEdit()">{% translate "Annuler" %}</button>
        </div>
    </form>
</div>

<script>
(function() {
    // Sync orientation display with hidden input changes (from map interaction)
    const hiddenInput = document.getElementById('id_orientation');
    const display = document.getElementById('orientation-display');
    
    if (!hiddenInput || !display) return;
    
    // Use MutationObserver to watch for value changes from JavaScript
    const observer = new MutationObserver(function() {
        display.textContent = (hiddenInput.value || 90) + '°';
    });
    
    observer.observe(hiddenInput, { attributes: true, attributeFilter: ['value'] });
    
    // Also check periodically in case MutationObserver doesn't catch all changes
    setInterval(function() {
        const currentValue = hiddenInput.value || 90;
        if (display.textContent !== currentValue + '°') {
            display.textContent = currentValue + '°';
        }
    }, 200);
    
    // Update lat/lon display when values change
    const latInput = document.getElementById('id_lat');
    const lonInput = document.getElementById('id_lon');
    const latDisplay = document.getElementById('edit-lat-display');
    const lonDisplay = document.getElementById('edit-lon-display');
    
    if (latInput && latDisplay) {
        const latObserver = new MutationObserver(function() {
            latDisplay.value = latInput.value;
        });
        latObserver.observe(latInput, { attributes: true, attributeFilter: ['value'] });
        
        setInterval(function() {
            if (latDisplay.value !== latInput.value) {
                latDisplay.value = latInput.value;
            }
        }, 200);
    }
    
    if (lonInput && lonDisplay) {
        const lonObserver = new MutationObserver(function() {
            lonDisplay.value = lonInput.value;
        });
        lonObserver.observe(lonInput, { attributes: true, attributeFilter: ['value'] });
        
        setInterval(function() {
            if (lonDisplay.value !== lonInput.value) {
                lonDisplay.value = lonInput.value;
            }
        }, 200);
    }
})();
</script>