{% set sa_id_str = sa.id | string %}
{% set link_info = sub_admin_links.get(sa.id) %}
{% set now_str = now_date_str %}

<div class="sub-admin-card group" id="sub-admin-card-{{ sa.id }}" style="--stat-rgb: {{ '74,222,128' if sa.is_active else '248,113,113' }}; --stat-rgb-light: {{ '22,163,74' if sa.is_active else '220,38,38' }};">

    <div class="flex justify-between items-start">
        <div class="flex items-center gap-3">
            <div class="sub-admin-card-icon">
                {% if sa.allocation_mode == 'credit' %}
                    <i class="fas fa-coins"></i>
                {% else %}
                    <i class="fas fa-user-shield"></i>
                {% endif %}
            </div>

            <div>
                <h4 class="font-semibold text-white group-hover:text-accent-500 transition-colors">{{ sa.username }}</h4>

                <div class="flex items-center gap-2 mt-1">
                    {% if sa.is_active %}
                        <span class="user-status-pill is-ok">
                            <i class="fas fa-check-circle"></i> Active
                        </span>
                    {% else %}
                        <span class="user-status-pill is-bad">
                            {% if sa.allocation_mode == 'credit' and sa.quota_exceeded %}
                                <i class="fas fa-wallet"></i> No Balance
                            {% elif sa.allocation_mode != 'credit' and sa.quota_exceeded %}
                                <i class="fas fa-database"></i> Quota Exceeded
                            {% elif sa.expiry_date and sa.expiry_date.strftime('%Y-%m-%d') < now_str %}
                                <i class="fas fa-calendar-times"></i> Expired
                            {% else %}
                                <i class="fas fa-ban"></i> Manually Disabled
                            {% endif %}
                        </span>
                    {% endif %}

                    {% if sa.allocation_mode == 'credit' %}
                        <span class="text-[9px] px-1.5 py-0.5 rounded-full bg-yellow-900/20 text-yellow-400 border border-yellow-800/40 uppercase tracking-wider">Pay-As-You-Go</span>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 gap-y-2 mt-4">
        {% if sa.allocation_mode == 'credit' %}
            <div class="node-stat-item">
                <i class="fas fa-wallet {{ 'text-green-400' if sa.wallet_balance > 0 else 'text-red-400' }}"></i>
                <span>Wallet Balance</span>
                <span class="stat-value {{ 'text-green-400' if sa.wallet_balance > 0 else 'text-red-400' }}">
                    {% if sa.currency_unit == 'DOLLAR' %}
                        $ {{ "{:,.4f}".format(sa.wallet_balance).rstrip('0').rstrip('.') }}
                    {% else %}
                        {{ "{:,.0f}".format(sa.wallet_balance) }} T
                    {% endif %}
                </span>
            </div>

            <div class="node-stat-item flex items-center justify-between">
                <div class="flex items-center gap-2">
                    <i class="fas fa-chart-pie text-blue-400"></i>
                    <span>Total Usage</span>
                </div>

                <div class="ml-auto flex items-center gap-2">
                    <span class="stat-value !ml-0">{{ sa.total_data_used_bytes|format_bytes }}</span>
                    <button type="button" onclick="openResetUsageModal('{{ sa_id_str }}', '{{ sa.username | e }}')" class="text-gray-400 hover:text-white transition-colors bg-gray-700/50 hover:bg-red-500/20 p-1 rounded" title="Reset Usage to Zero">
                        <i class="fas fa-sync-alt fa-xs"></i>
                    </button>
                </div>
            </div>

            <div class="node-stat-item">
                <i class="fas fa-tag text-purple-400"></i>
                <span>Rate</span>
                <span class="stat-value">
                    {% if sa.currency_unit == 'DOLLAR' %}
                        $ {{ "{:,.4f}".format(sa.price_per_gb).rstrip('0').rstrip('.') }} / GB
                    {% else %}
                        {{ "{:,.0f}".format(sa.price_per_gb) }} T / GB
                    {% endif %}
                </span>
            </div>
        {% else %}
            <div class="node-stat-item">
                <i class="fas fa-users text-blue-400"></i>
                <span>Users</span>
                <span class="stat-value">{{ user_count }} / {{ sa.max_users_limit if sa.max_users_limit is not none else '∞' }}</span>
            </div>

            <div class="node-stat-item">
                <i class="fas fa-calendar-alt text-purple-400"></i>
                <span>Expiry Date</span>
                <span class="stat-value stat-value-date">{{ sa.expiry_date | jalali_date if sa.expiry_date else 'Unlimited' }}</span>
            </div>

            <div class="node-stat-item flex items-center justify-between">
                <div class="flex items-center gap-2">
                    <i class="fas fa-hdd text-cyan-400"></i>
                    <span>Data Usage</span>
                </div>

                <div class="ml-auto flex items-center gap-2">
                    <span class="stat-value !ml-0 {{ 'text-red-400' if sa.quota_exceeded else 'text-f1f5f9' }}">
                        {{ sa.total_data_used_bytes|format_bytes }} / {{ (sa.total_usage_quota_gb * 1024**3)|format_bytes if sa.total_usage_quota_gb is not none else '∞' }}
                    </span>
                    <button type="button" onclick="openResetUsageModal('{{ sa_id_str }}', '{{ sa.username | e }}')" class="text-gray-400 hover:text-white transition-colors bg-gray-700/50 hover:bg-red-500/20 p-1 rounded" title="Reset Usage to Zero">
                        <i class="fas fa-sync-alt fa-xs"></i>
                    </button>
                </div>
            </div>
        {% endif %}
    </div>

    <div class="mt-4 pt-3 border-t border-gray-700">
        <div class="flex justify-between items-center mb-1.5 gap-2">
            <span class="text-[10px] font-bold text-gray-400 uppercase tracking-wider flex items-center gap-1.5">
                <i class="fas fa-link" style="color: rgb(var(--stat-rgb));"></i> Panel Access
            </span>

            <div class="flex items-center gap-1 flex-wrap justify-end">
                {% if link_info and link_info.is_custom %}
                    <span class="access-pill">Dedicated Domain</span>
                {% endif %}

                {% if link_info and link_info.has_custom_path %}
                    <span class="access-pill">/r/{{ link_info.panel_path }}</span>
                {% endif %}
            </div>
        </div>

        <div class="access-copy-box flex items-center p-1">
            <div class="pl-2 pr-1 flex-shrink-0" title="{{ 'Secure Connection' if link_info and link_info.protocol == 'https' else 'Not Secure' }}">
                {% if link_info and link_info.protocol == 'https' %}
                    <i class="fas fa-lock text-green-400 text-xs"></i>
                {% else %}
                    <i class="fas fa-lock-open text-orange-400 text-xs"></i>
                {% endif %}
            </div>

            <input type="text"
                   readonly
                   value="{{ link_info.url if link_info else '' }}"
                   class="access-copy-value bg-transparent border-none w-full focus:ring-0 p-1.5 truncate select-all"
                   onclick="this.select()"
                   title="{{ link_info.url if link_info else '' }}">

            <div class="flex items-center gap-1 ml-1 border-l border-gray-700 pl-1">
                <button type="button"
                        onclick="copyLinkToClipboard('{{ link_info.url if link_info else '' }}', this)"
                        class="p-1.5 rounded-md hover:bg-gray-700 text-gray-400 hover:text-white transition-colors relative"
                        title="Copy Link">
                    <i class="far fa-copy"></i>
                </button>

                {% if link_info and link_info.url %}
                    <a href="{{ link_info.url }}"
                       target="_blank"
                       class="p-1.5 rounded-md hover:bg-gray-700 text-gray-400 hover:text-white transition-colors mr-1"
                       title="Open in New Tab">
                        <i class="fas fa-external-link-alt"></i>
                    </a>
                {% endif %}
            </div>
        </div>
    </div>

    {% set extra_wg = sa.allowed_wg_instances | from_json | reject('equalto', 'wg1') | list %}
    {% set singbox_list = sa.allowed_singbox_inbounds | from_json %}
    {% if sa.allow_openvpn or sa.allow_l2tp or sa.allow_cisco or sa.allow_wg1 or extra_wg or singbox_list %}
    <div class="mt-4 pt-3 border-t border-gray-700">
        <span class="text-[10px] font-bold text-gray-400 uppercase tracking-wider flex items-center gap-1.5 mb-2">
            <i class="fas fa-layer-group" style="color: rgb(var(--stat-rgb));"></i> Protocols
        </span>
        <div class="flex flex-wrap gap-1.5">
            {% if sa.allow_openvpn %}
                <span class="protocol-chip" style="--stat-rgb: 59,130,246; --stat-rgb-light: 37,99,235;"><i class="fas fa-shield-alt"></i>OpenVPN</span>
            {% endif %}
            {% if sa.allow_l2tp %}
                <span class="protocol-chip" style="--stat-rgb: 167,139,250; --stat-rgb-light: 124,58,237;"><i class="fas fa-key"></i>L2TP</span>
            {% endif %}
            {% if sa.allow_cisco %}
                <span class="protocol-chip" style="--stat-rgb: 45,212,191; --stat-rgb-light: 13,148,136;"><i class="fas fa-globe"></i>Cisco</span>
            {% endif %}
            {% if sa.allow_wg1 %}
                <span class="protocol-chip" style="--stat-rgb: 74,222,128; --stat-rgb-light: 22,163,74;"><i class="fas fa-network-wired"></i>WireGuard</span>
            {% endif %}
            {% for name in extra_wg %}
                <span class="protocol-chip" style="--stat-rgb: 74,222,128; --stat-rgb-light: 22,163,74;"><i class="fas fa-network-wired"></i>{{ wg_instance_display_map.get(name, name) if wg_instance_display_map else name }}</span>
            {% endfor %}
            {% for tag in singbox_list %}
                <span class="protocol-chip" style="--stat-rgb: 251,191,36; --stat-rgb-light: 217,119,6;"><i class="fas fa-bolt"></i>{{ (singbox_inbound_type_map.get(tag, tag) if singbox_inbound_type_map else tag) | upper }}{% if singbox_inbound_port_map and singbox_inbound_port_map.get(tag) %}:{{ singbox_inbound_port_map.get(tag) }}{% endif %}</span>
            {% endfor %}
        </div>
    </div>
    {% endif %}

    <div class="node-actions-compact mt-4" style="grid-template-columns: repeat(2, 1fr);">
        <a href="{{ url_for('edit_sub_admin_route', sub_admin_id=sa.id) }}" class="node-action-btn-compact text-center" title="Edit Sub-Admin">
            <i class="fas fa-edit"></i>
        </a>

        <button type="button" onclick="openDeleteSubAdminModal('{{ sa_id_str }}', '{{ sa.username | e }}')" class="node-action-btn-compact" title="Delete Sub-Admin">
            <i class="fas fa-trash"></i>
        </button>
    </div>
</div>