{% if users %}
    {% for user in users %}
        <div class="user-card user-item"
             data-username="{{ user.username }}"
             data-active="{{ 'true' if user.is_active else 'false' }}"
             data-datalimited="{{ 'true' if user.is_data_limited else 'false' }}"
             data-last-seen="{{ user.last_connection_at.isoformat() if user.last_connection_at else '' }}">
            <div class="user-card-top">
                <div class="username-box user-card-identity"
                     id="username-box-mobile-{{ user.username }}"
                     data-tooltip-text="{% if user.active_connections > 0 %}Online{% elif user.last_connection_at %}Last Seen: {{ user.last_connection_at | jalali_date }} {{ user.last_connection_at.strftime('%H:%M') }}{% else %}Never connected{% endif %}">
                    <span class="status-circle status-circle-{{ user.username }} {% if user.active_connections > 0 %}online{% else %}offline{% endif %}"></span>

                    <span class="user-card-username username">
                        {{ user.username }}
                    </span>

                    <span class="text-xs user-status-icon-container" id="status-icon-mobile-{{ user.username }}">
                        {% if user.is_expired %}<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-red-500" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd" /></svg>
                        {% elif user.is_data_limited or not user.is_active %}<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-orange-500" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd" /></svg>
                        {% else %}<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-green-500" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 011.414 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293z" clip-rule="evenodd" /></svg>
                        {% endif %}
                    </span>
                </div>
                <div class="flex items-center gap-2 user-status-controls flex-shrink-0" id="status-controls-mobile-{{ user.username }}">
                    <label class="switch">
                        <input type="checkbox" {% if user.is_active and not user.is_expired and not user.is_data_limited %}checked{% endif %} {% if user.is_expired or user.is_data_limited %}disabled{% endif %} onchange="toggleUserStatus('{{ user.username }}', this.checked)">
                        <span class="slider round {% if user.is_expired or user.is_data_limited %}disabled{% endif %}"></span>
                    </label>
                </div>
            </div>

            {% if user.enable_openvpn or user.enable_l2tp or user.enable_cisco or user.enable_wireguard or user.enable_singbox %}
            <div class="user-protocol-icons">
                {% if user.enable_openvpn %}<i class="fas fa-shield-alt" title="OpenVPN" style="--stat-rgb: 59,130,246;"></i>{% endif %}
                {% if user.enable_l2tp %}<i class="fas fa-key" title="L2TP" style="--stat-rgb: 167,139,250;"></i>{% endif %}
                {% if user.enable_cisco %}<i class="fas fa-globe" title="Cisco" style="--stat-rgb: 45,212,191;"></i>{% endif %}
                {% if user.enable_wireguard %}<i class="fas fa-network-wired" title="WireGuard" style="--stat-rgb: 74,222,128;"></i>{% endif %}
                {% if user.enable_singbox %}<i class="fas fa-bolt" title="sing-box" style="--stat-rgb: 251,191,36;"></i>{% endif %}
            </div>
            {% endif %}

            <div class="user-card-chips">
                <div class="user-chip connection-badge {% if user.disable_reason == 'CONNECTION_LIMIT' %}user-chip-danger{% endif %}" data-username="{{ user.username }}">
                    <i class="fas fa-user-group"></i>
                    <span class="user-connections-{{ user.username }}">{{ user.max_clients }}/{{ user.active_connections }}</span>
                </div>
                <div class="user-chip" id="expiry-div-{{ user.username }}">
                    {% if user.activation_type == 'flexible_days' and user.first_connection_at == None %}
                        <i class="fas fa-hourglass-start"></i>
                        <span>Pending ({{ user.pending_activation_days }}d)</span>
                    {% else %}
                        <i class="fas fa-calendar-alt"></i>
                        <span>{{ user.expiry_date | jalali_date if user.expiry_date != "Unlimited" else "Unlimited" }}</span>
                    {% endif %}
                </div>
            </div>

            {% set usage = get_usage_bar_info(user) %}
            <div class="user-card-usage-row">
                <div class="user-chip hover-traffic usage-chip" data-username="{{ user.username }}" style="width:100%; --stat-rgb: {{ usage.color }}; --stat-rgb-light: {{ usage.color_light }};">
                    <div class="usage-chip-content">
                        <i class="fas fa-database"></i>
                        <span id="total-mobile-{{ user.username }}">
                            {{ user.total_traffic|format_bytes }}
                            {% if user.data_limit %}
                                / {{ (user.data_limit * (1024*1024 if user.data_limit_unit == 'MB' else 1024**3))|format_bytes }}
                            {% else %}
                                / Unlimited
                            {% endif %}
                        </span>
                    </div>
                    <div class="usage-bar-track">
                        <div class="usage-bar-fill" style="width: {{ usage.pct }}%;"></div>
                    </div>
                    <div class="traffic-details">
                        <span id="download-details-mobile-{{ user.username }}"><svg class="inline h-4 w-4 mr-1 text-blue-400" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24"><path d="M12 8l-4 5h3v7h2v-7h3l-4-5zM3 4v2h18V4H3z"/></svg>0 B</span>
                        <span id="upload-details-mobile-{{ user.username }}"><svg class="inline h-4 w-4 mr-1 text-green-400" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24"><path d="M12 16l4-5h-3V4h-2v7H8l4 5zm-9 2v2h18v-2H3z"/></svg>0 B</span>
                    </div>
                </div>
            </div>

            <div class="user-card-actions">
                {% if user_role == 'main_admin' or user_role == 'sub_admin' %}
                    <a href="{{ url_for('download_ovpn', username=user.username) }}" class="open-download-modal-btn user-action-btn user-action-btn-download" title="Download">
                        <i class="fas fa-download"></i>
                    </a>
                {% endif %}

                <a href="#"
                   class="sub-link-btn user-action-btn user-action-btn-link"
                   data-username="{{ user.username }}"
                   data-url="{{ get_smart_sub_url(user) }}"
                   title="Subscription Link">
                   <i class="fas fa-link"></i>
                </a>

                <button
                    onclick="openEditModal(this)"
                    data-username="{{ user.username }}"
                    data-expiry-date="{{ user.expiry_date if user.expiry_date != 'Unlimited' else '' }}"
                    data-max-clients="{{ user.max_clients if user.max_clients else 1 }}"
                    data-data-limit="{{ user.data_limit if user.data_limit else '' }}"
                    data-data-limit-unit="{{ user.data_limit_unit if user.data_limit_unit else 'GB' }}"
                    data-notes="{{ user.notes | e if user.notes else '' }}"
                    data-activation-type="{{ user.activation_type }}"
                    data-pending-days="{{ user.pending_activation_days if user.pending_activation_days is not none else '' }}"
                    data-first-connection-at="{{ user.first_connection_at if user.first_connection_at else '' }}"
                    class="user-action-btn" title="Edit">
                    <i class="fas fa-edit"></i>
                </button>

                <button onclick="openRenewModal('{{ user.username }}')" class="user-action-btn user-action-btn-success" title="Renew User">
                    <i class="fas fa-sync-alt"></i>
                </button>

                <a href="#" onclick="openDeleteConfirmModal('{{ user.username }}')" class="user-action-btn user-action-btn-danger" title="Delete">
                    <i class="fas fa-trash"></i>
                </a>
            </div>
        </div>
    {% endfor %}
{% else %}
    <div class="no-users-placeholder">
        <div class="no-users-placeholder-inner">
            <i class="fas fa-user-slash"></i>
            <span>No users found matching your criteria.</span>
        </div>
    </div>
{% endif %}