{% extends "base.html" %}

{% block title %}Squid代理用户管理系统{% endblock %}

{% block content %}
<div class="home-header">
    <h1>Squid代理用户管理系统</h1>
    <p class="subtitle">高效、安全的代理服务管理平台</p>
</div>

<div class="dashboard">
    <div class="dashboard-card">
        <div class="card-icon">👥</div>
        <h3>用户数量</h3>
        <p class="stat">{{ user_count }}</p>
        <p class="card-desc">当前活跃用户总数</p>
    </div>

    <div class="dashboard-card">
        <div class="card-icon">🔌</div>
        <h3>代理地址</h3>
        <p class="stat">{{ proxy_address }}:{{ proxy_port }}</p>
        <p class="card-desc">服务器连接信息</p>
    </div>
</div>

<div class="proxy-info">
    <h2><i class="icon">📋</i> 代理使用说明</h2>
    <div class="info-steps">
        <div class="step">
            <span class="step-number">1</span>
            <p>在浏览器或系统设置中配置代理服务器</p>
        </div>
        <div class="step">
            <span class="step-number">2</span>
            <p>地址: <code>{{ proxy_address }}</code> 端口: <code>{{ proxy_port }}</code></p>
        </div>
        <div class="step">
            <span class="step-number">3</span>
            <p>使用格式: <code>http://用户名:密码@{{ proxy_address }}:{{ proxy_port }}</code></p>
        </div>
        <div class="step">
            <span class="step-number">4</span>
            <p>或者在PAC文件中配置: <code>PROXY {{ proxy_address }}:{{ proxy_port }}</code></p>
        </div>
    </div>
</div>

<div class="quick-actions">
    <a href="{{ url_for('clients') }}" class="action-card">
        <div class="action-icon">👤</div>
        <h3>用户管理</h3>
        <p>添加、编辑或删除用户</p>
    </a>
    <a href="{{ url_for('settings') }}" class="action-card">
        <div class="action-icon">⚙️</div>
        <h3>系统设置</h3>
        <p>配置代理参数</p>
    </a>
</div>
{% endblock %}