{% extends "base.html" %}
{% load i18n %}
{% block title %}{% translate "Dashboard" %} - Eenos{% endblock %}
{% block extra_css %}
    <style>
      .progress .progress-bar.eenos-progress-success { background: var(--eenos-success); }
      .progress .progress-bar.eenos-progress-warning { background: var(--eenos-warning); }
      .progress .progress-bar.eenos-progress-danger { background: var(--eenos-danger); }
    </style>
{% endblock %}
{% block content %}
    <div class="eenos-page-header flex-wrap">
        <div>
            <h1 class="eenos-page-title">{% translate "Reseller Overview" %}</h1>
            <div class="eenos-page-subtitle">{% translate "Monitor your hosting accounts, resource usage, account health, and recent activity." %}</div>
        </div>
        <div class="d-grid col-12 col-sm-auto">
            <a href="{% url 'createuser' %}"
               class="btn btn-primary d-inline-flex align-items-center justify-content-center gap-2 px-3 py-2 text-nowrap"><i data-lucide="user-plus"></i><span>{% translate "Create Hosting Account" %}</span></a>
        </div>
    </div>
    {% include "includes/form_alerts.html" %}
    <div class="row g-3 mb-4">
        <div class="col-12 col-md-4">
            <a href="{% url 'listuser' %}"
               class="eenos-card eenos-metric-card h-100 d-flex flex-column text-reset">
                <div class="d-flex align-items-center justify-content-between gap-3 mb-3">
                    <div class="d-flex align-items-center gap-2">
                        <i data-lucide="users" class="text-muted"></i>
                        <span class="small fw-semibold">{% translate "Hosting Accounts" %}</span>
                    </div>
                    <i data-lucide="arrow-up-right" class="text-muted"></i>
                </div>
                <div class="fs-2 fw-semibold lh-1 mb-2">{{ dashboard_data.account_count }}</div>
                <div class="small text-muted mt-auto">
                    <span class="text-success fw-semibold">{{ dashboard_data.active_accounts }} {% translate "active" %}</span>
                    {% if dashboard_data.suspended_accounts %}<span> · {{ dashboard_data.suspended_accounts }} {% translate "suspended" %}</span>{% endif %}
                </div>
            </a>
        </div>
        <div class="col-12 col-md-4">
            <a href="{% url 'listpkg' %}"
               class="eenos-card eenos-metric-card h-100 d-flex flex-column text-reset">
                <div class="d-flex align-items-center justify-content-between gap-3 mb-3">
                    <div class="d-flex align-items-center gap-2">
                        <i data-lucide="package" class="text-muted"></i>
                        <span class="small fw-semibold">{% translate "Hosting Packages" %}</span>
                    </div>
                    <i data-lucide="arrow-up-right" class="text-muted"></i>
                </div>
                <div class="fs-2 fw-semibold lh-1 mb-2">{{ dashboard_data.plan_count }}</div>
                <div class="small text-muted mt-auto">{% translate "Available hosting plans" %}</div>
            </a>
        </div>
        <div class="col-12 col-md-4">
            <a href="{% url 'ssl_domains' %}"
               class="eenos-card eenos-metric-card h-100 d-flex flex-column text-reset">
                <div class="d-flex align-items-center justify-content-between gap-3 mb-3">
                    <div class="d-flex align-items-center gap-2">
                        <i data-lucide="shield-check" class="text-muted"></i>
                        <span class="small fw-semibold">{% translate "Protected Domains" %}</span>
                    </div>
                    <i data-lucide="arrow-up-right" class="text-muted"></i>
                </div>
                {% if dashboard_data.ssl.available %}
                    <div class="fs-2 fw-semibold lh-1 mb-2">{{ dashboard_data.ssl.protected }}</div>
                    <div class="small mt-auto {% if dashboard_data.ssl.attention %}text-warning{% else %}text-success{% endif %}">{{ dashboard_data.ssl.attention }} {% translate "require attention" %}</div>
                {% else %}
                    <div class="fs-2 fw-semibold lh-1 mb-2">—</div>
                    <div class="small text-muted mt-auto">{% translate "Certificate data unavailable" %}</div>
                {% endif %}
            </a>
        </div>
    </div>
    <div class="row g-4 mb-4">
        <div class="col-12 order-2">
            <div class="eenos-card h-auto">
                <div class="d-flex flex-wrap justify-content-between align-items-start gap-3 mb-4">
                    <div>
                        <div class="eenos-panel-title">{% translate "Reseller Resource Usage" %}</div>
                        <div class="eenos-panel-subtitle">{% translate "Current usage across your reseller account and hosted customers." %}</div>
                    </div>
                    <div class="d-grid d-sm-flex gap-2 col-12 col-sm-auto">
                        <a href="{% url 'disk_usage' %}"
                           class="btn btn-sm btn-outline-secondary text-nowrap"><i data-lucide="hard-drive"></i>{% translate "Disk Usage" %}</a>
                        <a href="{% url 'bandwidth_usage' %}"
                           class="btn btn-sm btn-outline-secondary text-nowrap"><i data-lucide="chart-no-axes-combined"></i>{% translate "Bandwidth Usage" %}</a>
                    </div>
                </div>
                <div class="row g-4">
                    <div class="col-12 col-md-4">
                        <div class="d-flex justify-content-between align-items-end gap-3 mb-2">
                            <div>
                                <div class="small text-muted">{% translate "Hosting Accounts" %}</div>
                                <div class="fs-4 fw-semibold">{{ dashboard_data.resources.accounts.usage }} {% if dashboard_data.resources.accounts.unlimited %}<span class="fs-6 text-muted">/ ∞</span>{% else %}<span class="fs-6 text-muted">/ {{ dashboard_data.resources.accounts.limit }}</span>{% endif %}</div>
                            </div>
                            {% if dashboard_data.resources.accounts.percent != None %}<span class="badge eenos-badge-neutral">{{ dashboard_data.resources.accounts.percent }}%</span>{% endif %}
                        </div>
                        {% if dashboard_data.resources.accounts.percent != None %}
                            <div class="progress"
                                 role="progressbar"
                                 aria-label="{% translate 'Account allocation used' %}"
                                 aria-valuenow="{{ dashboard_data.resources.accounts.percent }}"
                                 aria-valuemin="0"
                                 aria-valuemax="100">
                                <div class="progress-bar {% if dashboard_data.resources.accounts.percent >= 90 %}eenos-progress-danger{% elif dashboard_data.resources.accounts.percent >= 70 %}eenos-progress-warning{% else %}eenos-progress-success{% endif %}"
                                     style="width: {{ dashboard_data.resources.accounts.percent }}%"></div>
                            </div>
                            <div class="small text-muted mt-2">{{ dashboard_data.resources.accounts.available }} {% translate "accounts available" %}</div>
                        {% else %}
                            <div class="small text-muted mt-2">{% translate "Unlimited account allocation" %}</div>
                        {% endif %}
                    </div>
                    <div class="col-12 col-md-4">
                        <div class="d-flex justify-content-between align-items-end gap-3 mb-2">
                            <div>
                                <div class="small text-muted">{% translate "Disk Space" %}</div>
                                <div class="fs-4 fw-semibold">{{ dashboard_data.resources.quota.usage_display }} {% if dashboard_data.resources.quota.unlimited %}<span class="fs-6 text-muted">/ ∞</span>{% else %}<span class="fs-6 text-muted">/ {{ dashboard_data.resources.quota.limit_display }}</span>{% endif %}</div>
                            </div>
                            {% if dashboard_data.resources.quota.percent != None %}<span class="badge eenos-badge-neutral">{{ dashboard_data.resources.quota.percent }}%</span>{% endif %}
                        </div>
                        {% if dashboard_data.resources.quota.percent != None %}
                            <div class="progress"
                                 role="progressbar"
                                 aria-label="{% translate 'Disk allocation used' %}"
                                 aria-valuenow="{{ dashboard_data.resources.quota.percent }}"
                                 aria-valuemin="0"
                                 aria-valuemax="100">
                                <div class="progress-bar {% if dashboard_data.resources.quota.percent >= 90 %}eenos-progress-danger{% elif dashboard_data.resources.quota.percent >= 70 %}eenos-progress-warning{% else %}eenos-progress-success{% endif %}"
                                     style="width: {{ dashboard_data.resources.quota.percent }}%"></div>
                            </div>
                            <div class="small text-muted mt-2">{{ dashboard_data.resources.quota.available_display }} {% translate "available" %}</div>
                        {% else %}
                            <div class="small text-muted mt-2">{% translate "Unlimited disk allocation" %}</div>
                        {% endif %}
                    </div>
                    <div class="col-12 col-md-4">
                        <div class="d-flex justify-content-between align-items-end gap-3 mb-2">
                            <div>
                                <div class="small text-muted">{% translate "Monthly Bandwidth" %}</div>
                                <div class="fs-4 fw-semibold">{{ dashboard_data.resources.bandwidth.usage_display }} {% if dashboard_data.resources.bandwidth.unlimited %}<span class="fs-6 text-muted">/ ∞</span>{% else %}<span class="fs-6 text-muted">/ {{ dashboard_data.resources.bandwidth.limit_display }}</span>{% endif %}</div>
                            </div>
                            {% if dashboard_data.resources.bandwidth.percent != None %}<span class="badge eenos-badge-neutral">{{ dashboard_data.resources.bandwidth.percent }}%</span>{% endif %}
                        </div>
                        {% if dashboard_data.resources.bandwidth.percent != None %}
                            <div class="progress"
                                 role="progressbar"
                                 aria-label="{% translate 'Bandwidth allocation used' %}"
                                 aria-valuenow="{{ dashboard_data.resources.bandwidth.percent }}"
                                 aria-valuemin="0"
                                 aria-valuemax="100">
                                <div class="progress-bar {% if dashboard_data.resources.bandwidth.percent >= 90 %}eenos-progress-danger{% elif dashboard_data.resources.bandwidth.percent >= 70 %}eenos-progress-warning{% else %}eenos-progress-success{% endif %}"
                                     style="width: {{ dashboard_data.resources.bandwidth.percent }}%"></div>
                            </div>
                            <div class="small text-muted mt-2">{{ dashboard_data.resources.bandwidth.available_display }} {% translate "available this month" %}</div>
                        {% else %}
                            <div class="small text-muted mt-2">{% translate "Unlimited bandwidth allocation" %}</div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12 order-1">
            <div class="eenos-card">
                <div class="eenos-panel-title">{% translate "My Reseller Account" %}</div>
                <div class="eenos-panel-subtitle mb-4">{% translate "View my account details, hosting plan, nameservers, and assigned resource limits." %}</div>
                <div class="row g-4">
                    <div class="col-12 col-lg-5">
                        <div class="d-flex align-items-start gap-3 pb-3">
                            <i data-lucide="building-2" class="flex-shrink-0"></i>
                            <div class="min-w-0">
                                <div class="fw-semibold text-break">{{ user }}</div>
                                <div class="small text-muted text-break">{% if userdata.domain %}{{ userdata.domain }}{% else %}{% translate "Main domain not available" %}{% endif %}</div>
                            </div>
                        </div>
                        <div class="d-flex flex-wrap align-items-center gap-3 py-3 border-top">
                            <i data-lucide="mail" class="flex-shrink-0 text-muted"></i>
                            <div class="flex-grow-1 min-w-0">
                                <div class="small fw-semibold">{% translate "Contact Email" %}</div>
                                {% if userdata.contactemail %}
                                    <a class="link-secondary small text-break"
                                       href="mailto:{{ userdata.contactemail }}">{{ userdata.contactemail }}</a>
                                {% else %}
                                    <div class="small text-muted">{% translate "Not configured" %}</div>
                                {% endif %}
                            </div>
                            <button type="button"
                                    class="btn btn-sm btn-outline-secondary text-nowrap"
                                    data-bs-toggle="modal"
                                    data-bs-target="#contactEmailModal"
                                    title="{% translate 'Update Contact Email' %}">
                                <i data-lucide="pencil"></i>
                                {% translate "Update" %}
                            </button>
                        </div>
                        <div class="d-flex flex-wrap align-items-start gap-3 pt-3 border-top">
                            <i data-lucide="network" class="flex-shrink-0 text-muted"></i>
                            <div class="flex-grow-1 min-w-0">
                                <div class="small fw-semibold">{% translate "Reseller Nameservers" %}</div>
                                <div class="d-flex flex-wrap gap-2 mt-2">
                                    {% for nameserver in resellerdata.nameservers %}
                                        <span class="badge eenos-badge-neutral">{{ nameserver }}</span>
                                    {% empty %}
                                        <span class="small text-muted">{% translate "Not configured" %}</span>
                                    {% endfor %}
                                </div>
                            </div>
                            <a href="{% url 'mynameservers' %}"
                               class="btn btn-sm btn-outline-secondary text-nowrap">
                                <i data-lucide="settings-2"></i>
                                {% translate "Manage" %}
                            </a>
                        </div>
                    </div>
                    <div class="col-12 col-lg-7">
                        <div>
                            <div class="d-flex flex-wrap align-items-center gap-2 mb-3">
                                <i data-lucide="package" class="flex-shrink-0 text-muted"></i>
                                <span class="small fw-semibold">{% translate "Hosting Plan" %}</span>
                                {% if userdata.package %}
                                    <span class="badge eenos-badge-neutral">{{ userdata.package }}</span>
                                {% else %}
                                    <span class="small text-muted">{% translate "Not assigned" %}</span>
                                {% endif %}
                            </div>
                            <div class="pt-4 border-top">
                                <div class="fw-semibold">{% translate "Resource Limits" %}</div>
                                <div class="small text-muted">{% translate "Maximum resources assigned to this reseller account." %}</div>
                                <div class="row g-3 mt-1">
                                    <div class="col-12 col-sm-4">
                                        <div class="eenos-summary-item h-100 border-top pt-3">
                                            <div class="d-flex align-items-center gap-2 small fw-semibold">
                                                <i data-lucide="users" class="flex-shrink-0 text-muted"></i>
                                                <span>{% translate "Accounts" %}</span>
                                            </div>
                                            <div class="fs-4 fw-semibold my-2">
                                                {% if resellerdata.reseller_limt == "unlimited" or not resellerdata.reseller_limt %}
                                                    <span class="badge eenos-badge-neutral p-1"
                                                          role="img"
                                                          title="{% translate 'Unlimited' %}"
                                                          aria-label="{% translate 'Unlimited' %}"><i data-lucide="infinity" width="14" height="14"></i></span>
                                                {% else %}
                                                    {{ resellerdata.reseller_limt }}
                                                {% endif %}
                                            </div>
                                            <div class="small text-muted">{% translate "Hosted accounts" %}</div>
                                        </div>
                                    </div>
                                    <div class="col-12 col-sm-4">
                                        <div class="eenos-summary-item h-100 border-top pt-3">
                                            <div class="d-flex align-items-center gap-2 small fw-semibold">
                                                <i data-lucide="hard-drive" class="flex-shrink-0 text-muted"></i>
                                                <span>{% translate "Disk" %}</span>
                                            </div>
                                            <div class="fs-4 fw-semibold text-nowrap my-2">
                                                {% if resellerdata.reseller_quota == "unlimited" or not resellerdata.reseller_quota %}
                                                    <span class="badge eenos-badge-neutral p-1"
                                                          role="img"
                                                          title="{% translate 'Unlimited' %}"
                                                          aria-label="{% translate 'Unlimited' %}"><i data-lucide="infinity" width="14" height="14"></i></span>
                                                {% else %}
                                                    {{ dashboard_data.resources.quota.limit_display }}
                                                {% endif %}
                                            </div>
                                            <div class="small text-muted">{% translate "Storage quota" %}</div>
                                        </div>
                                    </div>
                                    <div class="col-12 col-sm-4">
                                        <div class="eenos-summary-item h-100 border-top pt-3">
                                            <div class="d-flex align-items-center gap-2 small fw-semibold">
                                                <i data-lucide="arrow-left-right" class="flex-shrink-0 text-muted"></i>
                                                <span>{% translate "Bandwidth" %}</span>
                                            </div>
                                            <div class="fs-4 fw-semibold text-nowrap my-2">
                                                {% if resellerdata.reseller_bandwidth == "unlimited" or not resellerdata.reseller_bandwidth %}
                                                    <span class="badge eenos-badge-neutral p-1"
                                                          role="img"
                                                          title="{% translate 'Unlimited' %}"
                                                          aria-label="{% translate 'Unlimited' %}"><i data-lucide="infinity" width="14" height="14"></i></span>
                                                {% else %}
                                                    {{ dashboard_data.resources.bandwidth.limit_display }}
                                                {% endif %}
                                            </div>
                                            <div class="small text-muted">{% translate "Monthly transfer" %}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row g-4 mb-4">
        <div class="col-12 col-xl-8">
            <div class="eenos-card h-100">
                <div class="d-flex flex-wrap justify-content-between align-items-start gap-3 mb-3">
                    <div>
                        <div class="eenos-panel-title">{% translate "Recent Hosting Accounts" %}</div>
                        <div class="eenos-panel-subtitle">{% translate "The latest customer accounts created under your reseller account." %}</div>
                    </div>
                    <a href="{% url 'listuser' %}" class="eenos-link small text-nowrap">{% translate "View All Accounts" %}</a>
                </div>
                <div class="d-none d-md-block">
                    <table class="table table-hover align-middle mb-0">
                        <thead>
                            <tr>
                                <th>{% translate "Primary Domain" %}</th>
                                <th>{% translate "Account" %}</th>
                                <th>{% translate "Hosting Plan" %}</th>
                                <th>{% translate "Created" %}</th>
                                <th>{% translate "Status" %}</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for account in dashboard_data.recent_accounts %}
                                <tr>
                                    <td class="text-break">
                                        {% if account.domain %}
                                            <a class="text-break"
                                               href="https://{{ account.domain }}"
                                               target="_blank"
                                               rel="noopener noreferrer">{{ account.domain }}</a>
                                        {% else %}
                                            <span class="text-muted">{% translate "Not available" %}</span>
                                        {% endif %}
                                    </td>
                                    <td><span class="fw-semibold">{{ account.username }}</span></td>
                                    <td>
                                        {% if account.package %}<span class="badge eenos-badge-neutral">{{ account.package }}</span>{% else %}<span class="text-muted">{% translate "Not available" %}</span>{% endif %}
                                    </td>
                                    <td class="text-nowrap">{% if account.setup_time_display %}<span title="{{ account.setup_time }}">{{ account.setup_time_display }}</span>{% else %}<span class="text-muted">{% translate "Not available" %}</span>{% endif %}</td>
                                    <td>
                                        {% if account.status == "suspended" %}
                                            <span class="eenos-status text-warning"><i data-lucide="pause-circle"></i><span>{% translate "Suspended" %}</span></span>
                                        {% else %}
                                            <span class="eenos-status text-success"><i data-lucide="circle-check"></i><span>{% translate "Active" %}</span></span>
                                        {% endif %}
                                    </td>
                                </tr>
                            {% empty %}
                                <tr>
                                    <td colspan="5" class="text-center text-muted py-4">{% translate "No hosting accounts are available." %}</td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                <div class="d-md-none">
                    {% for account in dashboard_data.recent_accounts %}
                        <div class="py-3 border-bottom">
                            <div class="d-flex justify-content-between align-items-start gap-3 mb-2">
                                <div class="overflow-hidden">
                                    {% if account.domain %}
                                        <a class="d-block text-break fw-semibold"
                                           href="https://{{ account.domain }}"
                                           target="_blank"
                                           rel="noopener noreferrer">{{ account.domain }}</a>
                                    {% else %}
                                        <span class="text-muted">{% translate "Not available" %}</span>
                                    {% endif %}
                                    <div class="small text-muted text-truncate">{{ account.username }}</div>
                                </div>
                                {% if account.status == "suspended" %}
                                    <span class="eenos-status text-warning flex-shrink-0"><i data-lucide="pause-circle"></i><span>{% translate "Suspended" %}</span></span>
                                {% else %}
                                    <span class="eenos-status text-success flex-shrink-0"><i data-lucide="circle-check"></i><span>{% translate "Active" %}</span></span>
                                {% endif %}
                            </div>
                            <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 small">
                                {% if account.package %}<span class="badge eenos-badge-neutral">{{ account.package }}</span>{% else %}<span class="text-muted">{% translate "No hosting plan" %}</span>{% endif %}
                                {% if account.setup_time_display %}<span class="text-muted" title="{{ account.setup_time }}">{{ account.setup_time_display }}</span>{% else %}<span class="text-muted">{% translate "Creation time unavailable" %}</span>{% endif %}
                            </div>
                        </div>
                    {% empty %}
                        <div class="text-center text-muted py-4">{% translate "No hosting accounts are available." %}</div>
                    {% endfor %}
                </div>
            </div>
        </div>
        <div class="col-12 col-xl-4">
            <div class="eenos-card h-100">
                <div class="d-flex justify-content-between align-items-start gap-3 mb-4">
                    <div>
                        <div class="eenos-panel-title">{% translate "Recent Activity" %}</div>
                        <div class="eenos-panel-subtitle">{% translate "Latest reseller-panel actions." %}</div>
                    </div>
                    <a href="{% url 'audit_activity' %}"
                       class="btn btn-sm btn-outline-secondary flex-shrink-0"><i data-lucide="arrow-right"></i>{% translate "View All" %}</a>
                </div>
                {% for activity in dashboard_data.activities %}
                    <div class="d-flex gap-3 pb-3 mb-3{% if not forloop.last %} border-bottom{% endif %}">
                        <span class="d-inline-flex align-items-center flex-shrink-0 {% if activity.status == 'failed' %}text-danger{% else %}text-success{% endif %}"><i data-lucide="activity"></i></span>
                        <div class="min-w-0">
                            <div class="small fw-semibold text-break">{{ activity.summary|default:activity.action }}</div>
                            <div class="small text-muted text-break">{% if activity.resource_id %}{{ activity.resource_id }} · {% endif %}<span title="{{ activity.created_at }}">{{ activity.created_at_display|default:"Not available" }}</span></div>
                        </div>
                    </div>
                {% empty %}
                    <div class="text-center text-muted py-4">{% translate "No recent activity is available." %}</div>
                {% endfor %}
            </div>
        </div>
    </div>
    <div class="row g-4 mb-4">
        <div class="col-12 col-lg-6">
            <div class="eenos-card h-100">
                <div class="eenos-panel-title">{% translate "Attention Required" %}</div>
                <div class="eenos-panel-subtitle mb-4">{% translate "Issues that may affect customer accounts or hosted services." %}</div>
                {% if dashboard_data.health.issue_count %}
                    {% if dashboard_data.suspended_accounts %}
                        <div class="d-flex flex-wrap align-items-center gap-3 py-3 border-bottom">
                            <span class="d-inline-flex align-items-center flex-shrink-0 text-warning"><i data-lucide="user-lock"></i></span>
                            <div class="flex-grow-1">
                                <div class="fw-semibold">{% translate "Suspended hosting accounts" %}</div>
                                <div class="small text-muted">{{ dashboard_data.suspended_accounts }} {% translate "customer accounts are currently suspended." %}</div>
                            </div>
                            <a href="{% url 'suspenduser' %}"
                               class="btn btn-sm btn-outline-secondary text-nowrap">{% translate "Review" %}</a>
                        </div>
                    {% endif %}
                    {% if not dashboard_data.ssl.available %}
                        <div class="d-flex flex-wrap align-items-center gap-3 py-3 border-bottom">
                            <span class="d-inline-flex align-items-center flex-shrink-0 text-warning"><i data-lucide="shield-question"></i></span>
                            <div class="flex-grow-1">
                                <div class="fw-semibold">{% translate "SSL status unavailable" %}</div>
                                <div class="small text-muted">{% translate "Certificate health could not be evaluated." %}</div>
                            </div>
                            <a href="{% url 'ssl_domains' %}"
                               class="btn btn-sm btn-outline-secondary text-nowrap">{% translate "Review" %}</a>
                        </div>
                    {% elif dashboard_data.ssl.attention %}
                        <div class="d-flex flex-wrap align-items-center gap-3 py-3 border-bottom">
                            <span class="d-inline-flex align-items-center flex-shrink-0 text-warning"><i data-lucide="shield-alert"></i></span>
                            <div class="flex-grow-1">
                                <div class="fw-semibold">{% translate "SSL certificates require attention" %}</div>
                                <div class="small text-muted">{{ dashboard_data.ssl.attention }} {% translate "hosted domains are not currently protected." %}</div>
                            </div>
                            <a href="{% url 'ssl_domains' %}"
                               class="btn btn-sm btn-outline-secondary text-nowrap">{% translate "Review" %}</a>
                        </div>
                    {% endif %}
                    {% if dashboard_data.health.quota_warning %}
                        <div class="d-flex flex-wrap align-items-center gap-3 py-3 border-bottom">
                            <span class="d-inline-flex align-items-center flex-shrink-0 text-warning"><i data-lucide="hard-drive"></i></span>
                            <div class="flex-grow-1">
                                <div class="fw-semibold">{% translate "Disk allocation is running low" %}</div>
                                <div class="small text-muted">{{ dashboard_data.resources.quota.percent }}% {% translate "of the reseller disk allocation is in use." %}</div>
                            </div>
                            <a href="{% url 'disk_usage' %}"
                               class="btn btn-sm btn-outline-secondary text-nowrap">{% translate "Review" %}</a>
                        </div>
                    {% endif %}
                    {% if dashboard_data.health.bandwidth_warning %}
                        <div class="d-flex flex-wrap align-items-center gap-3 py-3 border-bottom">
                            <span class="d-inline-flex align-items-center flex-shrink-0 text-warning"><i data-lucide="chart-no-axes-combined"></i></span>
                            <div class="flex-grow-1">
                                <div class="fw-semibold">{% translate "Bandwidth allocation is running low" %}</div>
                                <div class="small text-muted">{{ dashboard_data.resources.bandwidth.percent }}% {% translate "of this month's bandwidth allocation is in use." %}</div>
                            </div>
                            <a href="{% url 'bandwidth_usage' %}"
                               class="btn btn-sm btn-outline-secondary text-nowrap">{% translate "Review" %}</a>
                        </div>
                    {% endif %}
                    {% if dashboard_data.health.failed_activity_count %}
                        <div class="d-flex flex-wrap align-items-center gap-3 py-3">
                            <span class="d-inline-flex align-items-center flex-shrink-0 text-danger"><i data-lucide="circle-x"></i></span>
                            <div class="flex-grow-1">
                                <div class="fw-semibold">{% translate "Recent operations failed" %}</div>
                                <div class="small text-muted">{{ dashboard_data.health.failed_activity_count }} {% translate "of the latest reseller actions were unsuccessful." %}</div>
                            </div>
                            <a href="{% url 'audit_activity' %}"
                               class="btn btn-sm btn-outline-secondary text-nowrap">{% translate "Review" %}</a>
                        </div>
                    {% endif %}
                {% else %}
                    <div class="d-flex align-items-center gap-3 py-4">
                        <span class="d-inline-flex align-items-center flex-shrink-0 text-success"><i data-lucide="circle-check"></i></span>
                        <div>
                            <div class="fw-semibold text-success">{% translate "Everything looks healthy" %}</div>
                            <div class="small text-muted">{% translate "No account or resource issues currently require your attention." %}</div>
                        </div>
                    </div>
                {% endif %}
            </div>
        </div>
        <div class="col-12 col-lg-6">
            <div class="eenos-card h-100">
                <div class="eenos-panel-title">{% translate "Account Distribution" %}</div>
                <div class="eenos-panel-subtitle mb-4">{% translate "Top hosting plans by account usage." %}</div>
                {% for item in dashboard_data.distribution %}
                    <div class="d-flex justify-content-between gap-3 mb-2"><span class="text-break">{{ item.name }}</span><span class="fw-semibold">{{ item.count }}</span></div>
                    <div class="progress{% if not forloop.last %} mb-3{% endif %}"
                         role="progressbar"
                         aria-label="{{ item.name }}"
                         aria-valuenow="{{ item.percent }}"
                         aria-valuemin="0"
                         aria-valuemax="100">
                        <div class="progress-bar" style="width: {{ item.percent }}%"></div>
                    </div>
                {% empty %}
                    <div class="text-center text-muted py-4">{% translate "No hosting account distribution is available." %}</div>
                {% endfor %}
            </div>
        </div>
    </div>
    <div class="eenos-card">
        <div class="mb-3">
            <div class="eenos-panel-title">{% translate "Quick Actions" %}</div>
            <div class="eenos-panel-subtitle">{% translate "Manage customer accounts, hosting plans, security, and activity." %}</div>
        </div>
        <div class="row g-2">
            <div class="col-12 col-sm-6 col-xl-4">
                <a href="{% url 'createuser' %}"
                   class="btn btn-outline-secondary d-flex align-items-center gap-2 w-100 text-start p-3">
                    <i data-lucide="user-plus"></i><span class="fw-semibold">{% translate "Create Account" %}</span><i data-lucide="chevron-right" class="ms-auto"></i>
                </a>
            </div>
            <div class="col-12 col-sm-6 col-xl-4">
                <a href="{% url 'addpkg' %}"
                   class="btn btn-outline-secondary d-flex align-items-center gap-2 w-100 text-start p-3">
                    <i data-lucide="package-plus"></i><span class="fw-semibold">{% translate "Create Package" %}</span><i data-lucide="chevron-right" class="ms-auto"></i>
                </a>
            </div>
            <div class="col-12 col-sm-6 col-xl-4">
                <a href="{% url 'addfeature' %}"
                   class="btn btn-outline-secondary d-flex align-items-center gap-2 w-100 text-start p-3">
                    <i data-lucide="list-plus"></i><span class="fw-semibold">{% translate "Create Feature" %}</span><i data-lucide="chevron-right" class="ms-auto"></i>
                </a>
            </div>
            <div class="col-12 col-sm-6 col-xl-4">
                <a href="{% url 'bandwidth_usage' %}"
                   class="btn btn-outline-secondary d-flex align-items-center gap-2 w-100 text-start p-3">
                    <i data-lucide="chart-no-axes-combined"></i><span class="fw-semibold">{% translate "Bandwidth Usage" %}</span><i data-lucide="chevron-right" class="ms-auto"></i>
                </a>
            </div>
            <div class="col-12 col-sm-6 col-xl-4">
                <a href="{% url 'ssl_domains' %}"
                   class="btn btn-outline-secondary d-flex align-items-center gap-2 w-100 text-start p-3">
                    <i data-lucide="shield-check"></i><span class="fw-semibold">{% translate "Manage SSL Certificates" %}</span><i data-lucide="chevron-right" class="ms-auto"></i>
                </a>
            </div>
            <div class="col-12 col-sm-6 col-xl-4">
                <a href="{% url 'audit_activity' %}"
                   class="btn btn-outline-secondary d-flex align-items-center gap-2 w-100 text-start p-3">
                    <i data-lucide="activity"></i><span class="fw-semibold">{% translate "Activity Logs" %}</span><i data-lucide="chevron-right" class="ms-auto"></i>
                </a>
            </div>
        </div>
    </div>
    <div class="modal fade"
         id="contactEmailModal"
         tabindex="-1"
         aria-labelledby="contactEmailModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <form method="post" class="modal-content eenos-form" data-parsley-validate>
                {% csrf_token %}
                <div class="modal-header">
                    <div>
                        <h5 class="modal-title d-flex align-items-center gap-2"
                            id="contactEmailModalLabel">
                            <i data-lucide="mail"></i>
                            {% translate "Update Contact Email" %}
                        </h5>
                        <div class="text-muted small mt-1">{% translate "Change the primary email address for your reseller account." %}</div>
                    </div>
                    <button type="button"
                            class="btn-close"
                            data-bs-dismiss="modal"
                            aria-label="{% translate 'Close' %}"></button>
                </div>
                <div class="modal-body">
                    <div class="eenos-modal-account mb-4">
                        <div class="eenos-modal-account-icon">
                            <i data-lucide="building-2"></i>
                        </div>
                        <div class="eenos-modal-account-info">
                            <div class="eenos-modal-label">{% translate "Reseller Account" %}</div>
                            <div class="eenos-modal-account-name">{{ user }}</div>
                        </div>
                    </div>
                    <div class="eenos-modal-field mb-3">
                        <div class="form-label">{% translate "Current Email" %}</div>
                        <div class="eenos-modal-value">
                            <i data-lucide="mail"></i>
                            <span>{% if userdata.contactemail %}{{ userdata.contactemail }}{% else %}{% translate "Not available" %}{% endif %}</span>
                        </div>
                    </div>
                    <div>
                        <label for="resellerContactEmail" class="form-label fw-medium">{% translate "New Contact Email" %}</label>
                        <div class="input-group">
                            <span class="input-group-text">
                                <i data-lucide="mail-plus"></i>
                            </span>
                            <input type="email"
                                   class="form-control"
                                   id="resellerContactEmail"
                                   name="contactemail"
                                   autocomplete="email"
                                   placeholder="{% translate 'Enter the new contact email' %}"
                                   required
                                   data-parsley-required-message="{% translate 'Please enter the contact email address.' %}"
                                   data-parsley-type-message="{% translate 'Please enter a valid email address.' %}" />
                        </div>
                        <div class="form-text">{% translate "This address will be used for reseller account notifications and contact information." %}</div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button"
                            class="btn btn-outline-secondary"
                            data-bs-dismiss="modal">{% translate "Cancel" %}</button>
                    <button type="submit" class="btn btn-primary" name="change_contact" value="1">
                        <i data-lucide="save"></i>
                        {% translate "Update Email" %}
                    </button>
                </div>
            </form>
        </div>
    </div>
{% endblock %}