{% extends 'controls/controls_base_mobile.html' %}

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


{% block head %}
    <title>Projets</title>    
{% endblock %}


{% block custom_style %}
    <link href="{% static 'controls/controls_projects_mobile.css' %}" rel="stylesheet">
{% endblock %}

{% block top_navbar %}
    <span class="navbar-brand mx-auto fw-bold">{% translate "Projets" %}</span>
{% endblock %}


{% block content %}
    <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="{{ project.get_absolute_url }}?v=mobile" class="title">{{ project.name }}</a> 
                <div class="description">
                    {{ project.description }}
                </div>
            </div>
        </div>
        {% endfor %}
    </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 %}
    
{% block 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 'controls/controls_projects_mobile.js' %}"></script>
    
{% endblock %}