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

{% block content %}
    <div class="row g-3">
        {% if unread_notifications_count %}
        <div id="home-unread-notifications-alert" class="col-12">
            <div class="alert alert-warning border-0 shadow-sm d-flex align-items-center justify-content-between p-3 mb-0 rounded-4" role="alert" style="background-color: rgba(255, 243, 205, 0.95);">
                <div class="d-flex align-items-center text-start me-2">
                    <div class="rounded-circle bg-warning bg-opacity-25 p-2 me-2.5 d-flex align-items-center justify-content-center" style="width: 38px; height: 38px; flex-shrink: 0;">
                        <i class="bi bi-bell-fill fs-5 text-warning-emphasis"></i>
                    </div>
                    <div>
                        <div class="fw-bold text-dark small">
                            {% translate "Notifications non lues" %}
                        </div>
                        <div class="small text-secondary" style="font-size: 0.825rem;">
                            {% blocktranslate count count=unread_notifications_count %}
                            Vous avez <strong class="home-unread-notifications-count">{{ count }}</strong> notification non lue.
                            {% plural %}
                            Vous avez <strong class="home-unread-notifications-count">{{ count }}</strong> notifications non lues.
                            {% endblocktranslate %}
                        </div>
                    </div>
                </div>
                <a href="{% url 'mobile:notifications_mobile' %}" class="btn btn-warning btn-sm px-3 py-2 fw-semibold text-nowrap rounded-3 text-dark">
                    {% translate "Consulter" %}
                </a>
            </div>
        </div>
        {% endif %}

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

                    <button type="button" data-bs-toggle="modal" data-bs-target="#newDiscussionModal" 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-chat-dots me-2"></i>{% translate "Nouvelle discussion" %}</span>
                        <i class="bi bi-plus-lg"></i>
                    </button>
                </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>
    {% include "notifications/_new_discussion_modal.html" %}
{% endblock content %}