{% extends 'microsys/base.html' %}
{% load static %}

{% block extra_head %}
    <link rel="stylesheet" href="{% static 'microsys/main/css/index_cards.css' %}">
    <link rel="stylesheet" href="{% static 'microsys/main/css/charts.css' %}">
{% endblock %}

{% block content %}
<div class="container-fluid py-3">
    <div class="text-center mb-5 fade-in-up">
        <img src="{{ APP_CONFIG.login_logo_url|default:APP_CONFIG.logo_url }}" alt="Logo" class="ms-dashboard-logo">
        {% if user.profile.scope %}
            <div class="mt-3">
                <span class="badge bg-primary fs-6">{{ MS_TRANS.work_scope }}: {{ user.profile.scope.name }}</span>
            </div>
        {% endif %}
    </div>

    <div class="row g-4 justify-content-center mb-5">
        {% if can_view_sections %}
        <!-- 1. SECTIONS -->
        <div class="col-xl-4 col-md-6 fade-in-up stagger-1">
            <a href="{% url 'manage_sections' %}" class="text-decoration-none h-100">
                <div class="card module-card shadow-sm module-forest">
                    <div class="card-body">
                        <div class="module-icon-wrapper">
                            <i class="bi bi-diagram-3"></i>
                        </div>
                        <h3 class="module-name">{{ MS_TRANS.manage_sections }}</h3>
                        <p class="module-desc">{{ MS_TRANS.manage_sections_desc }}</p>
                        <div class="module-action mt-auto text-success">
                            {{ MS_TRANS.go }} <i class="bi bi-arrow-{% if CURRENT_DIR == 'rtl' %}left{% else %}right{% endif %} ms-2"></i>
                        </div>
                    </div>
                </div>
            </a>
        </div>
        {% endif %}

        {% if can_view_user_directory %}
        <!-- 2. USERS -->
        <div class="col-xl-4 col-md-6 fade-in-up stagger-2">
            <a href="{% url 'manage_users' %}" class="text-decoration-none h-100">
                <div class="card module-card shadow-sm module-sky">
                    <div class="card-body">
                        <div class="module-icon-wrapper">
                            <i class="bi bi-people"></i>
                        </div>
                        <h3 class="module-name">{{ MS_TRANS.manage_users }}</h3>
                        <p class="module-desc">{{ MS_TRANS.manage_users_desc }}</p>
                        <div class="module-action mt-auto text-primary">
                            {{ MS_TRANS.go }} <i class="bi bi-arrow-{% if CURRENT_DIR == 'rtl' %}left{% else %}right{% endif %} ms-2"></i>
                        </div>
                    </div>
                </div>
            </a>
        </div>
        {% endif %}

        <!-- 3. LOG -->
        {% if can_view_activity_log %}
        <div class="col-xl-4 col-md-6 fade-in-up stagger-3">
            <a href="{% url 'user_activity_log' %}" class="text-decoration-none h-100">
                <div class="card module-card shadow-sm module-indigo">
                    <div class="card-body">
                        <div class="module-icon-wrapper">
                            <i class="bi bi-clock-history"></i>
                        </div>
                        <h3 class="module-name">{{ MS_TRANS.activity_log }}</h3>
                        <p class="module-desc">{{ MS_TRANS.activity_log_desc }}</p>
                        <div class="module-action mt-auto text-info">
                            {{ MS_TRANS.go }} <i class="bi bi-arrow-{% if CURRENT_DIR == 'rtl' %}left{% else %}right{% endif %} ms-2"></i>
                        </div>
                    </div>
                </div>
            </a>
        </div>
        {% endif %}

        <!-- 4. PROFILE -->
        <div class="col-xl-4 col-md-6 fade-in-up stagger-4">
            <a href="{% url 'user_profile' %}" class="text-decoration-none h-100">
                <div class="card module-card shadow-sm module-aqua">
                    <div class="card-body">
                        <div class="module-icon-wrapper">
                            <i class="bi bi-person-badge"></i>
                        </div>
                        <h3 class="module-name">{{ MS_TRANS.profile }}</h3>
                        <p class="module-desc">{{ MS_TRANS.profile_desc }}</p>
                        <div class="module-action mt-auto text-purple">
                            {{ MS_TRANS.go }} <i class="bi bi-arrow-{% if CURRENT_DIR == 'rtl' %}left{% else %}right{% endif %} ms-2"></i>
                        </div>
                    </div>
                </div>
            </a>
        </div>
        
        <!-- 5. SETTINGS -->
        <div class="col-xl-4 col-md-6 fade-in-up stagger-5">
            <a href="{% url 'options_view' %}" class="text-decoration-none h-100">
                <div class="card module-card shadow-sm module-dark">
                    <div class="card-body">
                        <div class="module-icon-wrapper">
                            <i class="bi bi-gear"></i>
                        </div>
                        <h3 class="module-name">{{ MS_TRANS.settings }}</h3>
                        <p class="module-desc">{{ MS_TRANS.settings_desc }}</p>
                        <div class="module-action mt-auto text-warning">
                            {{ MS_TRANS.go }} <i class="bi bi-arrow-{% if CURRENT_DIR == 'rtl' %}left{% else %}right{% endif %} ms-2"></i>
                        </div>
                    </div>
                </div>
            </a>
        </div>

        <!-- 6. SYSTEM SETUP (Admin Only) -->
        {% if user.is_superuser %}
        <div class="col-xl-4 col-md-6 fade-in-up stagger-6">
            <a href="{% if SYSTEM_SETUP_REQUIRED %}{% url 'system_setup' %}{% else %}{% url 'options_view' %}{% endif %}" class="text-decoration-none h-100">
                <div class="card module-card shadow-sm module-blood">
                    <div class="card-body">
                        <div class="module-icon-wrapper">
                            <i class="bi bi-sliders"></i>
                        </div>
                        <h3 class="module-name">{{ MS_TRANS.system_settings_label|default:"System Setup" }}</h3>
                        <p class="module-desc">{{ MS_TRANS.system_settings_desc|default:"Configure global system settings and defaults." }}</p>
                        <div class="module-action mt-auto text-dark">
                            {{ MS_TRANS.go }} <i class="bi bi-arrow-{% if CURRENT_DIR == 'rtl' %}left{% else %}right{% endif %} ms-2"></i>
                        </div>
                    </div>
                </div>
            </a>
        </div>
        {% endif %}
    </div>

    <!-- Activity Chart Section -->
    <div class="row justify-content-center mt-5">
        <div class="col-12 px-0">
            <div class="chart-container-sys">
                <div id="activityChart24h"
                     class="ms-dashboard-chart"
                     data-chart-title="{{ MS_TRANS.activity_24h }}"
                     data-chart-locale="{{ CURRENT_LANG|default:'en' }}"></div>
            </div>
        </div>
    </div>
</div>
{{ chart_data.last_24h|json_script:"dashboard-activity-24h-data" }}

<script src="{% static 'plotly/plotly.min.js' %}"></script>
{% if CURRENT_LANG == 'ar' %}
<script src="{% static 'plotly/plotly-locale-ar.js' %}"></script>
{% endif %}
<script src="{% static 'microsys/main/js/dashboard.js' %}?v=20260506a" nonce="{{ request.csp_nonce }}" defer></script>
{% endblock %}