{% extends "base.html" %}
{% load i18n %}
{% block title %}
    {% translate "Account Limit Reached" %} - Eenos
{% endblock title %}
{% block content %}
    <div class="eenos-page-header">
        <div>
            <h1 class="eenos-page-title">{% translate "Account Limit Reached" %}</h1>
            <div class="eenos-page-subtitle">{% translate "Your reseller account has reached its hosting account allowance." %}</div>
        </div>
        <a href="{% url 'listuser' %}" class="btn btn-outline-secondary">
            <i data-lucide="users"></i>
            {% translate "Hosting Accounts" %}
        </a>
    </div>
    <nav class="eenos-breadcrumb" aria-label="{% translate 'Breadcrumb' %}">
        <a href="{% url 'dashboard' %}">{% translate "Dashboard" %}</a>
        <span class="eenos-breadcrumb-separator" aria-hidden="true"><i data-lucide="chevron-right"></i></span>
        <span>{% translate "Hosting" %}</span>
        <span class="eenos-breadcrumb-separator" aria-hidden="true"><i data-lucide="chevron-right"></i></span>
        <span>{% translate "User Accounts" %}</span>
        <span class="eenos-breadcrumb-separator" aria-hidden="true"><i data-lucide="chevron-right"></i></span>
        <span class="eenos-breadcrumb-current" aria-current="page">{% translate "Create User" %}</span>
    </nav>
    {% include "includes/form_alerts.html" %}
    <div class="eenos-card">
        <div class="eenos-card-header">
            <div>
                <div class="eenos-panel-title">{% translate "Hosting Account Limit Exceeded" %}</div>
                <div class="eenos-panel-subtitle">{% translate "A new hosting account cannot be created until account capacity becomes available." %}</div>
            </div>
            <i data-lucide="users-round" class="eenos-card-action-icon"></i>
        </div>
        <div class="eenos-notice eenos-notice-warning mb-4">
            <div class="eenos-notice-icon">
                <i data-lucide="triangle-alert"></i>
            </div>
            <div class="eenos-notice-content">
                <div class="eenos-notice-title">{% translate "No account slots are available" %}</div>
                <div class="eenos-notice-text">
                    {% translate "Accounts created directly by you and accounts created by your sub-resellers count toward this limit. Remove an unused hosting account or request a higher reseller limit before creating another account." %}
                </div>
            </div>
        </div>
        <div class="row g-3 mb-4">
            <div class="col-12 col-md-6">
                <div class="border rounded p-3 h-100">
                    <div class="text-muted small mb-1">{% translate "Accounts in Use" %}</div>
                    <div class="fs-4 fw-semibold">{{ myusage }}</div>
                </div>
            </div>
            <div class="col-12 col-md-6">
                <div class="border rounded p-3 h-100">
                    <div class="text-muted small mb-1">{% translate "Reseller Account Limit" %}</div>
                    <div class="fs-4 fw-semibold">{{ mylimit }}</div>
                </div>
            </div>
        </div>
        <a href="{% url 'listuser' %}" class="btn btn-primary">
            <i data-lucide="arrow-left"></i>
            {% translate "Manage Hosting Accounts" %}
        </a>
    </div>
{% endblock content %}