{% extends 'mobile/mobile_base.html' %}

{% load static %}
{% load i18n %}
    
{% block extra_head %}
    <link href="{% static 'controls/controls_index_mobile.css' %}" rel="stylesheet">
{% endblock extra_head %}



{% block title %}
    {% translate "Contrôles" %}
{% endblock title %}


{% block content %}
    <button onclick="window.location.href='{% url 'controls:controls_add' %}?v=mobile';" class="btn btn-light w-100 mt-3 mb-3">
        <i class="bi bi-plus-circle px-3 text-primary"></i>{% translate "Ajouter un contrôle" %}
    </button>
    <div class="list-group">
        {% for control in controls %}
        <div class="list-group-item control-item d-flex align-items-start">
            <i class="bi bi-circle-fill status-icon status-{{ control.status }} me-2"></i> 
            <div class="content">
                <a href="{% url 'mobile:controls_detail' control.id %}" class="title nav-link">
                    {{ control.control_code }}
                </a> 
                <div class="description">
                    {{ control.description }}
                </div>
                <p class="small text-muted mt-1">
                    {% translate "Type" %} : <span class="badge bg-secondary">{{ control.get_control_type_display }}</span>
                    <!-- | Statut : <span class="badge bg-info">{{ control.get_status_display }}</span> -->
                </p>
                <p class="mb-0 small">{% translate "Lieu" %} : {{ control.location }}</p>
                <p class="mb-0 text-muted small">{% translate "Mis à jour le" %} : {{ control.updated_at|date:"d/m/Y H:i" }}</p>
                {% if control.project %}
                    <div class="project-info mt-1">
                        <i class="bi bi-folder me-1"></i>{% translate "Projet" %}: 
                        <a href="{% url 'mobile:projects_detail' control.project.id %}" class="project-link">
                            {{ control.project.name }}
                        </a>
                    </div>
                {% endif %}

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

    <!-- Icône pour afficher la carte -->
    <!-- <div class="map-toggle" id="openMap">
        <i class="bi bi-map"></i>
    </div> -->

    <!-- Carte (toujours présente dans le DOM, mais invisible par défaut) -->
    <!-- <div id="map"></div> -->

    <!-- Icône pour fermer la carte (affichée uniquement lorsque la carte est visible) -->
    <!-- <div class="map-toggle" id="closeMap" style="display: none;">
        <i class="bi bi-x-lg"></i>
    </div> -->

{% block extra_scripts %}

    {{ controls_list|json_script:"controls_list" }}
    <script type="text/javascript">
        // Pass the controls data to JavaScript
        let controls = [];
        try {
            controls = JSON.parse(document.getElementById("controls_list").textContent);
        } catch (error) {
            console.error("Error parsing controls data:", error);
        }
    </script>
    <script src="{% static 'controls/controls_index_mobile.js' %}"></script>

{% endblock extra_scripts %}