{% extends "mobile/mobile_base.html" %}
{% load static %}
{% load i18n %}
{% load roles %}

{% block content %}
    <div class="row g-3">
        <!-- New items / Quick Actions -->
        {% if user.config|has_any_role:"observer,manager,controller,admin,external_manager,top_manager" or is_inspector or can_add_structures_repair or can_add_intervention_mobile %}
        <div class="col-12">
            <div class="card border-0 shadow-sm rounded-4 p-3 bg-light" style="border-radius: 1rem;">
                <h5 class="fw-bold mb-3 text-secondary" style="font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.5px;">
                    <i class="bi bi-plus-circle-fill me-1 text-primary"></i> {% translate "Nouveaux éléments" %}
                </h5>
                <div class="d-flex flex-column gap-2">
                    {% if user.config|has_any_role:"observer,manager,controller,admin,external_manager,top_manager" %}
                    <a href="{% url 'mobile:observation_add_mobile' %}" class="btn btn-outline-primary py-2.5 rounded-3 fw-semibold text-start d-flex align-items-center justify-content-between">
                        <span><i class="bi bi-eye me-2"></i>{% translate "Nouvelle observation" %}</span>
                        <i class="bi bi-plus-lg"></i>
                    </a>
                    {% endif %}

                    {% if can_inspect %}
                    <a href="{% url 'mobile:quick_inspection_map_mobile' %}" class="btn btn-outline-primary py-2.5 rounded-3 fw-semibold text-start d-flex align-items-center justify-content-between">
                        <span><i class="bi bi-search me-2"></i>{% translate "Nouvelle inspection" %}</span>
                        <i class="bi bi-geo-alt-fill"></i>
                    </a>
                    {% endif %}

                    {% if can_add_structures_repair %}
                    <a href="{% url 'mobile:add_repair_intervention_mobile' %}" class="btn btn-outline-primary py-2.5 rounded-3 fw-semibold text-start d-flex align-items-center justify-content-between">
                        <span><i class="bi bi-tools me-2"></i>{% translate "Intervention Réparation" %}</span>
                        <i class="bi bi-plus-lg"></i>
                    </a>
                    {% endif %}

                    {% if can_add_intervention_mobile %}
                    <a href="{% url 'mobile:choose_maintain_type_for_intervention_mobile' %}" class="btn btn-outline-primary py-2.5 rounded-3 fw-semibold text-start d-flex align-items-center justify-content-between">
                        <span><i class="bi bi-wrench me-2"></i>{% translate "Nouvelle intervention" %}</span>
                        <i class="bi bi-plus-lg"></i>
                    </a>
                    {% endif %}
                </div>
            </div>
        </div>
        {% endif %}

        <!-- Navigation cards -->
        <div class="col-12">
            <a class="card-link d-block" href="{% url 'mobile:interventions_index_mobile' %}">
                <div class="icon-wrapper">
                    <i class="bi bi-wrench"></i>
                </div>
                <h2 class="fw-semibold">{% translate "Interventions" %}</h2>
                <p>{% translate "Consulter et suivre les interventions en cours" %}</p>
            </a>
        </div>

        {% if user.config|has_any_role:"admin,manager,controller,external_manager,top_manager" %}
        <div class="col-12">
            <a class="card-link d-block" href="{% url 'mobile:controls_index' %}">
                <div class="icon-wrapper">
                    <i class="bi bi-ui-checks"></i>
                </div>
                <h2 class="fw-semibold">{% translate "Contrôles" %}</h2>
                <p>{% translate "Accéder aux contrôles terrain" %}</p>
            </a>
        </div>
        {% endif %}

        {% if user.config|has_any_role:"admin,manager,controller,external_manager,top_manager" %}
        <div class="col-12">
            <a class="card-link d-block" href="{% url 'mobile:projects_index' %}">
                <div class="icon-wrapper">
                    <i class="bi bi-wrench-adjustable"></i>
                </div>
                <h2 class="fw-semibold">{% translate "Projets" %}</h2>
                <p>{% translate "Suivre l'état des projets" %}</p>
            </a>
        </div>
        {% endif %}

        {% if user.config|has_any_role:"admin,manager,external_manager,controller,observer,operator,editor,top_manager" %}
        <div class="col-12">
            <a class="card-link d-block" href="{% url 'mobile:observations_index_mobile' %}">
                <div class="icon-wrapper">
                    <i class="bi bi-eye"></i>
                </div>
                <h2 class="fw-semibold">{% translate "Observations" %}</h2>
                <p>{% translate "Consulter et ajouter des observations terrain" %}</p>
            </a>
        </div>
        {% endif %}

        {% if can_inspect %}
        <div class="col-12">
            <a class="card-link d-block" href="{% url 'mobile:inspections_list_mobile' %}">
                <div class="icon-wrapper">
                    <i class="bi bi-search"></i>
                </div>
                <h2 class="fw-semibold">{% translate "Inspections d'assets" %}</h2>
                <p>{% translate "Consulter la liste et l'historique des vérifications d'assets" %}</p>
            </a>
        </div>
        {% endif %}

        <!-- If user has permission to edit green surfaces -->
        {% if can_edit_green_surfaces %}
        <div class="col-12">
            <a class="card-link d-block" href="{% url 'mobile:green_surfaces_edit_mobile' %}">
                <div class="icon-wrapper">
                    <i class="bi bi-flower2"></i>
                </div>
                <h2 class="fw-semibold">{% translate "Espaces verts" %}</h2>
                <p>{% translate "Éditer les espaces verts" %}</p>
            </a>
        </div>
        {% endif %}

        {% if can_access_stock %}
        <div class="col-12">
            <a class="card-link d-block" href="{% url 'mobile:stock_index_mobile' %}">
                <div class="icon-wrapper">
                    <i class="bi bi-boxes"></i>
                </div>
                <h2 class="fw-semibold">{% translate "Stock" %}</h2>
                <p>{% translate "Gérer les produits, commandes et mouvements de stock" %}</p>
            </a>
        </div>
        {% endif %}
    </div>
{% endblock content %}