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

{% load static %}
{% load i18n %}

{% block extra_head %}
    <!-- MapLibre GL 5.7.0 (local) -->
    <link href="{% static 'common/maplibre-gl.css' %}" rel="stylesheet" />
    <!-- Custom CSS -->
    <link href="{% static 'projects/projects_index_mobile.css' %}" rel="stylesheet">
{% endblock extra_head %}

{% block title %}
    {% translate "Projets" %}
{% endblock title %}

{% block content %}
    <div class="container mt-3">
        <div class="list-group">
            {% for project in projects %}
            <div class="list-group-item project-item">
                <i class="bi bi-circle-fill status-icon status-{{ project.status }}"></i> 
                <div class="content">
                    <a href="{% url 'mobile:projects_detail' project.id %}" class="title">{{ project.name }}</a> 
                    <div class="description">
                        {{ project.description }}
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>

    <!-- 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>

{% endblock content %}

{% block extra_scripts %}

    <!-- Bootstrap inclut déjà Popper.js dans bootstrap.bundle.min.js -->
    <!-- MapLibre GL 5.7.0 (local) -->
    <script src="{% static 'common/maplibre-gl.js' %}"></script>
    

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