{% extends "base.html" %}
{% load i18n %}
{% load uapp_filter %}
{% block title %}{% translate "Dashboard" %} - Eenos{% endblock %}
{% block extra_css %}
    <style>
        .eenos-deploy-card{position:relative;align-items:flex-start;padding-inline-end:7.5rem;min-height:92px}.eenos-deploy-card-action{position:absolute;inset-block-start:.75rem;inset-inline-end:.875rem}.eenos-dashboard-metric-card .eenos-summary-card-icon{width:34px;height:34px;flex-basis:34px}.eenos-dashboard-metric-card .eenos-summary-card-icon svg{width:17px;height:17px}.eenos-dashboard-metric-card:hover .eenos-summary-card-icon{color:var(--eenos-surface);background:var(--eenos-primary)}.eenos-dashboard-metric-card .eenos-metric-value{margin-top:.65rem}.eenos-metric-breakdown{margin-top:.65rem}.eenos-dashboard-alert{align-items:flex-start}.eenos-dashboard-alert-icon{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;flex:0 0 34px;border-radius:8px}.eenos-dashboard-alert-icon.warning{color:var(--eenos-warning);background:color-mix(in srgb,var(--eenos-warning) 12%,transparent)}.eenos-dashboard-alert-icon.danger{color:var(--eenos-danger);background:color-mix(in srgb,var(--eenos-danger) 10%,transparent)}.eenos-dashboard-activity-icon{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;flex:0 0 30px;color:var(--eenos-primary);background:var(--eenos-secondary-light);border-radius:50%}.eenos-dashboard-empty{padding:1.25rem;text-align:center;color:var(--eenos-text-muted);background:var(--eenos-secondary-light);border:1px dashed var(--eenos-border);border-radius:var(--eenos-radius)}@media(max-width:767.98px){.eenos-dashboard-account-row{display:flex;flex-direction:column}.eenos-dashboard-attention{order:-1}.eenos-deploy-card{padding-inline-end:1rem;padding-block-end:3.75rem}.eenos-deploy-card-action{inset-block-start:auto;inset-block-end:.875rem;inset-inline-start:1rem;inset-inline-end:auto}}
    </style>
{% endblock %}
{% block content %}
    {% with feature=request.session.feature %}
        {% ispython as is_python %}
        {% isnodejs as is_nodejs %}
        {% isruby as is_ruby %}
        {% isnginx as is_nginx %}
        {% ismysql as is_mysql %}
        {% ispgsql as is_pgsql %}
        {% ismongodb as is_mongodb %}
        {% isftp as is_ftp %}
        {% isexim as is_exim %}
        <div class="eenos-page-header flex-wrap align-items-start gap-3">
            <div>
                <h1 class="eenos-page-title"
                    id="dashboardGreeting"
                    data-morning="{% translate 'Good morning' %}"
                    data-afternoon="{% translate 'Good afternoon' %}"
                    data-evening="{% translate 'Good evening' %}"
                    data-username="{{ request.session.user }}">{% translate "Welcome back" %}, {{ request.session.user }}</h1>
                <div class="eenos-page-subtitle">{% translate "Welcome back. Here’s your account summary." %}</div>
            </div>
            <a href="{% url 'listall_domains' %}" class="btn btn-outline-secondary"><i data-lucide="globe-2"></i>{% translate "Manage Domains" %}</a>
        </div>
        {% with filestudio=feature.filestudio|default:"" codespace=feature.codespace|default:"" %}
            {% if filestudio == "on" or filestudio == "" or codespace == "on" or codespace == "" %}
                <div class="eenos-section-title">{% translate "Workspace" %}</div>
                <div class="row g-3 mb-4">
                    {% if filestudio == "on" or filestudio == "" %}
                        <div class="col-12 col-lg-6"><a href="{% url 'workspace-filestudio' %}"
   target="_blank"
   rel="noopener noreferrer"
   class="eenos-card d-flex align-items-center gap-4 text-decoration-none h-100"><span class="eenos-summary-card-icon fw-bold"
      data-bs-toggle="tooltip"
      title="{% translate 'File Studio' %}"
      aria-label="{% translate 'File Studio' %}">FS</span><span class="flex-grow-1"><span class="eenos-panel-title d-block">{% translate "File Studio" %}</span><span class="eenos-panel-subtitle d-block">{% translate "Manage, edit, upload, and organize website files." %}</span></span><span class="btn btn-sm eenos-primary-button"><i data-lucide="external-link"></i>{% translate "Open" %}</span></a></div>
                    {% endif %}
                    {% if codespace == "on" or codespace == "" %}
                        <div class="col-12 col-lg-6"><a href="{% url 'workspace-codespace' %}"
   target="_blank"
   rel="noopener noreferrer"
   class="eenos-card d-flex align-items-center gap-4 text-decoration-none h-100"><span class="eenos-summary-card-icon fw-bold"
      data-bs-toggle="tooltip"
      title="{% translate 'CodeSpace' %}"
      aria-label="{% translate 'CodeSpace' %}">CS</span><span class="flex-grow-1"><span class="eenos-panel-title d-block">{% translate "CodeSpace" %}</span><span class="eenos-panel-subtitle d-block">{% translate "Edit application code in the browser workspace." %}</span></span><span class="btn btn-sm btn-outline-secondary"><i data-lucide="external-link"></i>{% translate "Open" %}</span></a></div>
                    {% endif %}
                </div>
            {% endif %}
        {% endwith %}
        {% if feature.multipython == "on" and feature.pythonapps == "on" and is_python == "yes" or feature.multinodejs == "on" and feature.nodejsapps == "on" and is_nodejs == "yes" or feature.multiruby == "on" and feature.rubyapps == "on" and is_ruby == "yes" %}
            <div class="eenos-section-title">{% translate "Deploy Applications" %}</div>
            <div class="row row-cols-1 row-cols-md-2 row-cols-xl-3 g-3 mb-4">
                {% if feature.multipython == "on" and feature.pythonapps == "on" and is_python == "yes" %}
                    <div class="col">
                        <a href="{% url 'sandbox_python' %}"
                           class="eenos-card eenos-summary-card eenos-dashboard-quick-card eenos-deploy-card h-100">
                            <span class="eenos-summary-card-icon"><i data-lucide="braces"></i></span>
                            <span class="flex-grow-1"><span class="eenos-dashboard-quick-title d-block">{% translate "Python" %}</span><span class="small text-muted d-block">{% translate "Deploy a Python application" %}</span></span>
                            <span class="btn btn-sm btn-outline-primary eenos-deploy-card-action"><i data-lucide="rocket"></i><span>{% translate "Deploy" %}</span></span>
                        </a>
                    </div>
                {% endif %}
                {% if feature.multinodejs == "on" and feature.nodejsapps == "on" and is_nodejs == "yes" %}
                    <div class="col">
                        <a href="{% url 'sandbox_nodejs' %}"
                           class="eenos-card eenos-summary-card eenos-dashboard-quick-card eenos-deploy-card h-100">
                            <span class="eenos-summary-card-icon"><i data-lucide="hexagon"></i></span>
                            <span class="flex-grow-1"><span class="eenos-dashboard-quick-title d-block">{% translate "Node.js" %}</span><span class="small text-muted d-block">{% translate "Deploy a Node.js application" %}</span></span>
                            <span class="btn btn-sm btn-outline-primary eenos-deploy-card-action"><i data-lucide="rocket"></i><span>{% translate "Deploy" %}</span></span>
                        </a>
                    </div>
                {% endif %}
                {% if feature.multiruby == "on" and feature.rubyapps == "on" and is_ruby == "yes" %}
                    <div class="col">
                        <a href="{% url 'sandbox_ruby' %}"
                           class="eenos-card eenos-summary-card eenos-dashboard-quick-card eenos-deploy-card h-100">
                            <span class="eenos-summary-card-icon"><i data-lucide="gem"></i></span>
                            <span class="flex-grow-1"><span class="eenos-dashboard-quick-title d-block">{% translate "Ruby / Rails" %}</span><span class="small text-muted d-block">{% translate "Deploy a Ruby or Rails application" %}</span></span>
                            <span class="btn btn-sm btn-outline-primary eenos-deploy-card-action"><i data-lucide="rocket"></i><span>{% translate "Deploy" %}</span></span>
                        </a>
                    </div>
                {% endif %}
            </div>
        {% endif %}
        <div class="row g-3 mb-4">
            <div class="col-12 col-sm-6 col-xl-3">
                <a href="{% url 'disk_usage' %}"
                   class="eenos-card eenos-metric-card eenos-dashboard-metric-card d-block text-decoration-none h-100">
                    <div class="d-flex align-items-start justify-content-between gap-3">
                        <div class="eenos-metric-label">{% translate "DISK USAGE" %}</div>
                        <span class="eenos-summary-card-icon"><i data-lucide="hard-drive"></i></span>
                    </div>
                    <div class="eenos-metric-value">{{ dashboard.resources.disk.usage }}</div>
                    <div class="eenos-metric-note mt-0">
                        {% if dashboard.resources.disk.unlimited %}
                            {% translate "Unlimited storage" %}
                        {% else %}
                            {% blocktranslate with limit=dashboard.resources.disk.limit %}of {{ limit }} used{% endblocktranslate %}
                        {% endif %}
                    </div>
                    <div class="progress mt-3">
                        <div class="progress-bar {% if dashboard.resources.disk.utilization >= 90 %}eenos-progress-danger{% elif dashboard.resources.disk.utilization >= 70 %}eenos-progress-warning{% else %}eenos-progress-success{% endif %}"
                             role="progressbar"
                             aria-label="{% translate 'Disk usage' %}"
                             aria-valuenow="{{ dashboard.resources.disk.utilization_bar }}"
                             aria-valuemin="0"
                             aria-valuemax="100"
                             style="width:{{ dashboard.resources.disk.utilization_bar }}%"></div>
                    </div>
                </a>
            </div>
            <div class="col-12 col-sm-6 col-xl-3">
                <a href="{% url 'bandwidth_usage' %}"
                   class="eenos-card eenos-metric-card eenos-dashboard-metric-card d-block text-decoration-none h-100">
                    <div class="d-flex align-items-start justify-content-between gap-3">
                        <div class="eenos-metric-label">{% translate "BANDWIDTH" %}</div>
                        <span class="eenos-summary-card-icon"><i data-lucide="gauge"></i></span>
                    </div>
                    <div class="eenos-metric-value">{{ dashboard.resources.bandwidth.usage }}</div>
                    <div class="eenos-metric-note mt-0">
                        {% if dashboard.resources.bandwidth.unlimited %}
                            {% translate "Unlimited monthly bandwidth" %}
                        {% else %}
                            {% blocktranslate with limit=dashboard.resources.bandwidth.limit %}of {{ limit }} this month{% endblocktranslate %}
                        {% endif %}
                    </div>
                    <div class="progress mt-3">
                        <div class="progress-bar {% if dashboard.resources.bandwidth.utilization >= 90 %}eenos-progress-danger{% elif dashboard.resources.bandwidth.utilization >= 70 %}eenos-progress-warning{% else %}eenos-progress-success{% endif %}"
                             role="progressbar"
                             aria-label="{% translate 'Bandwidth usage' %}"
                             aria-valuenow="{{ dashboard.resources.bandwidth.utilization_bar }}"
                             aria-valuemin="0"
                             aria-valuemax="100"
                             style="width:{{ dashboard.resources.bandwidth.utilization_bar }}%"></div>
                    </div>
                </a>
            </div>
            <div class="col-12 col-sm-6 col-xl-3">
                <a href="{% url 'listall_domains' %}"
                   class="eenos-card eenos-metric-card eenos-dashboard-metric-card d-block text-decoration-none h-100">
                    <div class="d-flex align-items-start justify-content-between gap-3">
                        <div class="eenos-metric-label">{% translate "DOMAINS" %}</div>
                        <span class="eenos-summary-card-icon"><i data-lucide="globe-2"></i></span>
                    </div>
                    <div class="eenos-metric-value">{{ dashboard.domains.total }}</div>
                    <div class="eenos-metric-note mt-0">{% translate "Total hosted domains" %}</div>
                    <div class="eenos-metric-breakdown d-flex flex-wrap gap-1">
                        <span class="badge eenos-badge-primary">{{ dashboard.domains.primary }} {% translate "Primary" %}</span>
                        <span class="badge eenos-badge-neutral">{{ dashboard.domains.addon }} {% translate "Addon" %}</span>
                        <span class="badge eenos-badge-neutral">{{ dashboard.domains.subdomain }} {% translate "Subdomains" %}</span>
                    </div>
                </a>
            </div>
            {% if feature.email == "on" %}
                <div class="col-12 col-sm-6 col-xl-3">
                    <a href="{% url 'email_accounts' %}"
                       class="eenos-card eenos-metric-card eenos-dashboard-metric-card d-block text-decoration-none h-100">
                        <div class="d-flex align-items-start justify-content-between gap-3">
                            <div class="eenos-metric-label">{% translate "EMAIL ACCOUNTS" %}</div>
                            <span class="eenos-summary-card-icon"><i data-lucide="mail"></i></span>
                        </div>
                        <div class="eenos-metric-value">{{ dashboard.email_accounts }}</div>
                        <div class="eenos-metric-note mt-0">{% translate "Configured mailboxes" %}</div>
                        <div class="eenos-metric-breakdown">
                            <span class="badge eenos-badge-success">{{ dashboard.autoresponders }} {% translate "Autoresponders enabled" %}</span>
                        </div>
                    </a>
                </div>
            {% endif %}
        </div>
        <div class="row g-4 mb-4">
            <div class="col-12 col-xl-8">
                <div class="eenos-card h-100">
                    <div class="mb-4">
                        <div>
                            <div class="eenos-panel-title">{% translate "Hosting Overview" %}</div>
                            <div class="eenos-panel-subtitle">{% translate "Services available for your account." %}</div>
                        </div>
                    </div>
                    <div class="row g-3">
                        {% if feature.nginx == "on" and is_nginx == "yes" %}
                            <div class="col-12 col-md-6">
                                <div class="border rounded-3 p-3 h-100 d-flex flex-column">
                                    <div class="d-flex gap-3 mb-3">
                                        <i data-lucide="server"></i>
                                        <div>
                                            <div class="fw-semibold">{% translate "Nginx Websites" %}</div>
                                            <div class="small text-muted">{% blocktranslate with count=dashboard.nginx_websites %}{{ count }} configured websites{% endblocktranslate %}</div>
                                        </div>
                                    </div>
                                    <div class="small text-muted mb-3">{% translate "Manage performance and server settings for your Nginx websites." %}</div>
                                    <div class="mt-auto">
                                        <a href="{% url 'nginx_domains' %}"
                                           class="btn btn-sm btn-outline-secondary"><i data-lucide="gauge"></i>{% translate "Tune Nginx Performance" %}</a>
                                    </div>
                                </div>
                            </div>
                        {% endif %}
                        {% if feature.mysql == "on" and is_mysql == "yes" or feature.pgsql == "on" and is_pgsql == "yes" or feature.mongodb == "on" and is_mongodb == "yes" %}<div class="col-12 col-md-6"><div class="border rounded-3 p-3 h-100"><div class="d-flex gap-3 mb-3"><i data-lucide="database"></i><div><div class="fw-semibold">{% translate "Databases" %}</div><div class="small text-muted">{% translate "Configured databases" %}</div></div></div><div class="d-flex gap-4">{% if feature.mysql == "on" and is_mysql == "yes" %}<div><strong class="fs-4">{{ dashboard.databases.mysql }}</strong><div class="small text-muted">MySQL</div></div>{% endif %}{% if feature.pgsql == "on" and is_pgsql == "yes" %}<div><strong class="fs-4">{{ dashboard.databases.pgsql }}</strong><div class="small text-muted">PostgreSQL</div></div>{% endif %}{% if feature.mongodb == "on" and is_mongodb == "yes" %}<div><strong class="fs-4">{{ dashboard.databases.mongodb }}</strong><div class="small text-muted">MongoDB</div></div>{% endif %}</div></div></div>{% endif %}
                        {% if feature.ssl == "on" %}
                            <div class="col-12 col-md-6">
                                <div class="border rounded-3 p-3 h-100 d-flex flex-column">
                                    <div class="d-flex align-items-start justify-content-between gap-3 mb-3">
                                        <div class="d-flex gap-3">
                                            <i data-lucide="shield-check" class="text-success"></i>
                                            <div>
                                                <div class="fw-semibold">{% translate "SSL Protection" %}</div>
                                                <div class="small text-muted">{% translate "Certificate coverage for hosted domains" %}</div>
                                            </div>
                                        </div>
                                        {% if dashboard.ssl.expiring %}
                                            <span class="badge eenos-badge-warning">{% translate "Attention" %}</span>
                                        {% else %}
                                            <span class="badge eenos-badge-success">{% translate "Protected" %}</span>
                                        {% endif %}
                                    </div>
                                    <div class="d-flex align-items-baseline gap-2 mb-3">
                                        <strong class="fs-4 text-success">{{ dashboard.ssl.protected }}</strong>
                                        <span class="small text-muted">{% translate "domains protected by SSL" %}</span>
                                    </div>
                                    <div class="mt-auto">
                                        <a href="{% url 'ssl_domains' %}"
                                           class="btn btn-sm btn-outline-secondary"><i data-lucide="settings-2"></i>{% translate "Manage SSL" %}</a>
                                    </div>
                                </div>
                            </div>
                        {% endif %}
                        {% if feature.backup == "on" and request.session.backup_settings.status == "on" %}
                            <div class="col-12 col-md-6">
                                <div class="border rounded-3 p-3 h-100 d-flex flex-column">
                                    <div class="d-flex align-items-start justify-content-between gap-3 mb-3">
                                        <div class="d-flex gap-3">
                                            <i data-lucide="archive-restore"></i>
                                            <div>
                                                <div class="fw-semibold">{% translate "Backups" %}</div>
                                                <div class="small text-muted">{% translate "Account backup status and recovery" %}</div>
                                            </div>
                                        </div>
                                        {% if dashboard.backup.last_failed %}
                                            <span class="badge eenos-badge-danger">{% translate "Attention" %}</span>
                                        {% elif dashboard.backup.available %}
                                            <span class="badge eenos-badge-success">{% translate "Healthy" %}</span>
                                        {% else %}
                                            <span class="badge eenos-badge-neutral">{% translate "No Backups" %}</span>
                                        {% endif %}
                                    </div>
                                    <div class="mb-3">
                                        <div class="small text-muted">{% translate "Last successful backup" %}</div>
                                        <strong>
                                            {% if dashboard.backup.last_created_at %}
                                                {{ dashboard.backup.last_created_at }}
                                            {% else %}
                                                {% translate "No successful backup found" %}
                                            {% endif %}
                                        </strong>
                                        {% if request.session.backup_settings.userpool == "on" and request.session.backup_settings.userschedule == "on" %}
                                            {% if dashboard.backup.schedule_time %}
                                                <div class="small text-muted mt-1">
                                                    {% blocktranslate with time=dashboard.backup.schedule_time %}Scheduled time: {{ time }}{% endblocktranslate %}
                                                </div>
                                            {% endif %}
                                        {% endif %}
                                    </div>
                                    <div class="d-flex flex-wrap gap-2 mt-auto">
                                        {% if request.session.backup_settings.userpool == "on" and request.session.backup_settings.userschedule == "on" %}
                                            <a href="{% url 'backup_schedule' %}"
                                               class="btn btn-sm btn-outline-secondary"><i data-lucide="calendar-clock"></i>{% translate "Manage Schedule" %}</a>
                                        {% endif %}
                                        <a href="{% url 'backup_restore' %}"
                                           class="btn btn-sm btn-outline-primary"><i data-lucide="archive-restore"></i>{% translate "Restore Backup" %}</a>
                                    </div>
                                </div>
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>
            <div class="col-12 col-xl-4">
                <div class="eenos-card h-100">
                    <div class="d-flex justify-content-between gap-3 mb-4">
                        <div>
                            <div class="eenos-panel-title">{% translate "Recent Activity" %}</div>
                            <div class="eenos-panel-subtitle">{% translate "Latest important account actions." %}</div>
                        </div>
                        <a href="{% url 'audit_activity' %}"
                           class="btn btn-sm btn-outline-secondary"><i data-lucide="arrow-right"></i>{% translate "View All" %}</a>
                    </div>
                    {% for activity in dashboard.activity %}
                        <div class="d-flex gap-3 {% if not forloop.last %}pb-3 mb-3 border-bottom{% endif %}">
                            <span class="eenos-dashboard-activity-icon {% if activity.status == 'failed' %}text-danger{% endif %}"><i data-lucide="{{ activity.icon }}"></i></span>
                            <div class="flex-grow-1">
                                <div class="small fw-semibold">{{ activity.summary }}</div>
                                <div class="small text-muted">
                                    {% if activity.resource %}{{ activity.resource }} ·{% endif %}
                                    {% if activity.created_at %}
                                        {% blocktranslate with elapsed=activity.created_at|timesince %}{{ elapsed }} ago{% endblocktranslate %}
                                    {% endif %}
                                </div>
                            </div>
                            {% if activity.status == "failed" %}
                                <span class="badge eenos-badge-danger align-self-start">{% translate "Failed" %}</span>
                            {% else %}
                                <span class="badge eenos-badge-success align-self-start">{% translate "Success" %}</span>
                            {% endif %}
                        </div>
                    {% empty %}
                        <div class="eenos-dashboard-empty">
                            <i data-lucide="history" class="mb-2"></i>
                            <div class="fw-semibold">{% translate "No recent activity" %}</div>
                            <div class="small">{% translate "Important account actions will appear here." %}</div>
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>
        <div class="eenos-section-title">{% translate "Quick Access" %}</div>
        <div class="row row-cols-1 row-cols-sm-2 row-cols-xl-4 g-3 mb-4">
            <div class="col"><a href="{% url 'listall_domains' %}"
   class="eenos-card eenos-summary-card eenos-dashboard-quick-card"><span class="eenos-summary-card-icon"><i data-lucide="globe-2"></i></span><span class="eenos-dashboard-quick-title">{% translate "Domains" %}</span><i data-lucide="chevron-right" class="eenos-dashboard-quick-arrow"></i></a></div>
            {% if feature.email == "on" and is_exim == "yes" %}
                <div class="col"><a href="{% url 'email_accounts' %}"
   class="eenos-card eenos-summary-card eenos-dashboard-quick-card"><span class="eenos-summary-card-icon"><i data-lucide="mail"></i></span><span class="eenos-dashboard-quick-title">{% translate "Email" %}</span><i data-lucide="chevron-right" class="eenos-dashboard-quick-arrow"></i></a></div>
            {% endif %}
            {% if feature.ftp == "on" and is_ftp == "yes" %}
                <div class="col"><a href="{% url 'ftp_accounts' %}"
   class="eenos-card eenos-summary-card eenos-dashboard-quick-card"><span class="eenos-summary-card-icon"><i data-lucide="folder-sync"></i></span><span class="eenos-dashboard-quick-title">{% translate "FTP Accounts" %}</span><i data-lucide="chevron-right" class="eenos-dashboard-quick-arrow"></i></a></div>
            {% endif %}
            {% if feature.mysql == "on" and is_mysql == "yes" %}
                <div class="col"><a href="{% url 'mysql_dbs' %}"
   class="eenos-card eenos-summary-card eenos-dashboard-quick-card"><span class="eenos-summary-card-icon"><i data-lucide="database"></i></span><span class="eenos-dashboard-quick-title">{% translate "Databases" %}</span><i data-lucide="chevron-right" class="eenos-dashboard-quick-arrow"></i></a></div>
            {% elif feature.pgsql == "on" and is_pgsql == "yes" %}
                <div class="col"><a href="{% url 'pgsql_dbs' %}"
   class="eenos-card eenos-summary-card eenos-dashboard-quick-card"><span class="eenos-summary-card-icon"><i data-lucide="database"></i></span><span class="eenos-dashboard-quick-title">{% translate "Databases" %}</span><i data-lucide="chevron-right" class="eenos-dashboard-quick-arrow"></i></a></div>
            {% elif feature.mongodb == "on" and is_mongodb == "yes" %}
                <div class="col"><a href="{% url 'mongodb_dbs' %}"
   class="eenos-card eenos-summary-card eenos-dashboard-quick-card"><span class="eenos-summary-card-icon"><i data-lucide="database"></i></span><span class="eenos-dashboard-quick-title">{% translate "Databases" %}</span><i data-lucide="chevron-right" class="eenos-dashboard-quick-arrow"></i></a></div>
            {% endif %}
            {% if feature.ssl == "on" %}
                <div class="col"><a href="{% url 'ssl_domains' %}"
   class="eenos-card eenos-summary-card eenos-dashboard-quick-card"><span class="eenos-summary-card-icon"><i data-lucide="shield-check"></i></span><span class="eenos-dashboard-quick-title">{% translate "SSL" %}</span><i data-lucide="chevron-right" class="eenos-dashboard-quick-arrow"></i></a></div>
            {% endif %}
            {% if feature.backup == "on" and request.session.backup_settings.status == "on" %}
                <div class="col"><a href="{% url 'backup_restore' %}"
   class="eenos-card eenos-summary-card eenos-dashboard-quick-card"><span class="eenos-summary-card-icon"><i data-lucide="archive"></i></span><span class="eenos-dashboard-quick-title">{% translate "Backups" %}</span><i data-lucide="chevron-right" class="eenos-dashboard-quick-arrow"></i></a></div>
            {% endif %}
            {% if feature.cron == "on" %}
                <div class="col"><a href="{% url 'cron_jobs' %}"
   class="eenos-card eenos-summary-card eenos-dashboard-quick-card"><span class="eenos-summary-card-icon"><i data-lucide="clock-3"></i></span><span class="eenos-dashboard-quick-title">{% translate "Cron Jobs" %}</span><i data-lucide="chevron-right" class="eenos-dashboard-quick-arrow"></i></a></div>
            {% endif %}
            <div class="col"><a href="{% url 'audit_activity' %}"
   class="eenos-card eenos-summary-card eenos-dashboard-quick-card"><span class="eenos-summary-card-icon"><i data-lucide="history"></i></span><span class="eenos-dashboard-quick-title">{% translate "Activity" %}</span><i data-lucide="chevron-right" class="eenos-dashboard-quick-arrow"></i></a></div>
        </div>
        <div class="row g-4 eenos-dashboard-account-row">
            <div class="col-12 {% if dashboard.alerts %}col-lg-7{% else %}col-lg-12{% endif %}">
                <div class="eenos-card h-100">
                    <div class="d-flex flex-wrap justify-content-between align-items-start gap-3 mb-4">
                        <div>
                            <div class="eenos-panel-title">{% translate "Account Usage" %}</div>
                            <div class="eenos-panel-subtitle">{% translate "Current usage against your hosting plan limits." %}</div>
                        </div>
                        <a href="{% url 'account_plan' %}"
                           class="btn btn-sm btn-outline-secondary"><i data-lucide="chart-no-axes-column"></i>{% translate "View Plan Limits" %}</a>
                    </div>
                    {% if feature.email == "on" %}
                        <div class="d-flex justify-content-between mb-2">
                            <span>{% translate "Email accounts" %}</span>
                            <strong class="d-inline-flex align-items-center gap-1">{{ dashboard.usage.email.current }} / {% if dashboard.usage.email.unlimited %}<i data-lucide="infinity"
   aria-label="{% translate 'Unlimited' %}"
   title="{% translate 'Unlimited' %}"></i><span class="visually-hidden">{% translate "Unlimited" %}</span>{% else %}{{ dashboard.usage.email.limit }}{% endif %}</strong>
                        </div>
                        {% if not dashboard.usage.email.unlimited %}
                            <div class="progress mb-4">
                                <div class="progress-bar {{ dashboard.usage.email.progress_class }}"
                                     role="progressbar"
                                     aria-label="{% translate 'Email account usage' %}"
                                     aria-valuenow="{{ dashboard.usage.email.percent }}"
                                     aria-valuemin="0"
                                     aria-valuemax="100"
                                     style="width:{{ dashboard.usage.email.percent }}%"></div>
                            </div>
                        {% endif %}
                    {% endif %}
                    {% if feature.mysql == "on" or feature.pgsql == "on" or feature.mongodb == "on" %}
                        <div class="d-flex justify-content-between mb-2 {% if dashboard.usage.email.unlimited %}mt-4{% endif %}">
                            <span>{% translate "Databases" %}</span>
                            <strong class="d-inline-flex align-items-center gap-1">{{ dashboard.usage.database.current }} / {% if dashboard.usage.database.unlimited %}<i data-lucide="infinity"
   aria-label="{% translate 'Unlimited' %}"
   title="{% translate 'Unlimited' %}"></i><span class="visually-hidden">{% translate "Unlimited" %}</span>{% else %}{{ dashboard.usage.database.limit }}{% endif %}</strong>
                        </div>
                        {% if not dashboard.usage.database.unlimited %}
                            <div class="progress mb-4">
                                <div class="progress-bar {{ dashboard.usage.database.progress_class }}"
                                     role="progressbar"
                                     aria-label="{% translate 'Database usage' %}"
                                     aria-valuenow="{{ dashboard.usage.database.percent }}"
                                     aria-valuemin="0"
                                     aria-valuemax="100"
                                     style="width:{{ dashboard.usage.database.percent }}%"></div>
                            </div>
                        {% endif %}
                    {% endif %}
                    {% if feature.ftp == "on" %}
                        <div class="d-flex justify-content-between mb-2 {% if dashboard.usage.database.unlimited %}mt-4{% endif %}">
                            <span>{% translate "FTP accounts" %}</span>
                            <strong class="d-inline-flex align-items-center gap-1">{{ dashboard.usage.ftp.current }} / {% if dashboard.usage.ftp.unlimited %}<i data-lucide="infinity"
   aria-label="{% translate 'Unlimited' %}"
   title="{% translate 'Unlimited' %}"></i><span class="visually-hidden">{% translate "Unlimited" %}</span>{% else %}{{ dashboard.usage.ftp.limit }}{% endif %}</strong>
                        </div>
                        {% if not dashboard.usage.ftp.unlimited %}
                            <div class="progress">
                                <div class="progress-bar {{ dashboard.usage.ftp.progress_class }}"
                                     role="progressbar"
                                     aria-label="{% translate 'FTP account usage' %}"
                                     aria-valuenow="{{ dashboard.usage.ftp.percent }}"
                                     aria-valuemin="0"
                                     aria-valuemax="100"
                                     style="width:{{ dashboard.usage.ftp.percent }}%"></div>
                            </div>
                        {% endif %}
                    {% endif %}
                    {% if feature.email != "on" and feature.mysql != "on" and feature.pgsql != "on" and feature.mongodb != "on" and feature.ftp != "on" %}
                        <div class="eenos-dashboard-empty">
                            <i data-lucide="chart-no-axes-column" class="mb-2"></i>
                            <div class="fw-semibold">{% translate "No limited account resources to display" %}</div>
                            <div class="small">{% translate "Usage will appear here when a metered feature is enabled for your account." %}</div>
                        </div>
                    {% endif %}
                </div>
            </div>
            {% if dashboard.alerts %}
                <div class="col-12 col-lg-5 eenos-dashboard-attention">
                    <div class="eenos-card h-100">
                        <div class="eenos-panel-title">{% translate "Attention Required" %}</div>
                        <div class="eenos-panel-subtitle mb-4">{% translate "Items that may need your review." %}</div>
                        {% for alert in dashboard.alerts %}
                            <div class="d-flex gap-3 eenos-dashboard-alert {% if not forloop.last %}pb-3 mb-3 border-bottom{% endif %}">
                                <span class="eenos-dashboard-alert-icon {% if alert.severity == 'critical' %}danger{% else %}warning{% endif %}"><i data-lucide="{{ alert.icon }}"></i></span>
                                <div class="flex-grow-1">
                                    <div class="d-flex flex-wrap align-items-center gap-2 mb-1">
                                        <strong>{{ alert.title }}</strong>
                                        {% if alert.severity == "critical" %}
                                            <span class="badge eenos-badge-danger">{% translate "Critical" %}</span>
                                        {% else %}
                                            <span class="badge eenos-badge-warning">{% translate "Warning" %}</span>
                                        {% endif %}
                                    </div>
                                    <div class="small text-muted">{{ alert.detail }}</div>
                                </div>
                                <a href="{{ alert.url }}" class="btn btn-sm btn-outline-secondary">{% translate "Review" %}</a>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            {% endif %}
        </div>
    {% endwith %}
{% endblock %}
{% block extra_js %}
    <script>
document.addEventListener("DOMContentLoaded", function () {
    const greeting = document.getElementById("dashboardGreeting");
    const hour = new Date().getHours();
    const message = hour < 12
        ? greeting.dataset.morning
        : hour < 17
            ? greeting.dataset.afternoon
            : greeting.dataset.evening;
    greeting.textContent = message + ", " + greeting.dataset.username;

    if (typeof bootstrap !== "undefined" && bootstrap.Tooltip) {
        document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(function (element) {
            bootstrap.Tooltip.getOrCreateInstance(element);
        });
    }

});
    </script>
{% endblock %}