{% extends "base.html" %}

{% block title %}Dashboard{% endblock %}

{% block content %}
<div class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1 class="m-0">Dashboard</h1>
            </div>
        </div>
    </div>
</div>

<section class="content" 
         data-server-status-url="{{ url_for('server_status_api') }}" 
         data-services-status-url="{{ url_for('server_services_status_api') }}"
         data-restart-hysteria-url="{{ url_for('restart_service') }}"
         data-version-url="{{ url_for('get_version_info') }}" 
         data-check-version-url="{{ url_for('check_version_info') }}">
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-3 col-md-6 col-12">
                <div class="info-box shadow-sm">
                    <span class="info-box-icon bg-info"><i class="fas fa-microchip"></i></span>
                    <div class="info-box-content">
                        <span class="info-box-text">CPU Usage</span>
                        <span class="info-box-number" id="cpu-usage">--</span>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-12">
                <div class="info-box shadow-sm">
                    <span class="info-box-icon bg-warning"><i class="fas fa-memory"></i></span>
                    <div class="info-box-content">
                        <span class="info-box-text">RAM Usage</span>
                        <span class="info-box-number" id="ram-usage">-- / --</span>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-12">
                <div class="info-box shadow-sm">
                    <span class="info-box-icon bg-success"><i class="fas fa-users"></i></span>
                    <div class="info-box-content">
                        <span class="info-box-text">Online Users</span>
                        <span class="info-box-number" id="online-users">--</span>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-12">
                <div class="info-box shadow-sm">
                    <span class="info-box-icon bg-secondary"><i class="fas fa-clock"></i></span>
                    <div class="info-box-content">
                        <span class="info-box-text">Uptime</span>
                        <span class="info-box-number" id="uptime">--</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-3 col-md-6 col-12">
                <div class="info-box shadow-sm">
                    <span class="info-box-icon bg-primary"><i class="fas fa-exchange-alt"></i></span>
                    <div class="info-box-content">
                        <span class="info-box-text">Network Speed</span>
                        <div style="font-size: 16px; line-height: 1.3; font-weight: bold;">
                            <span class="d-block" id="download-speed">🔽 --</span>
                            <span class="d-block" id="upload-speed">🔼 --</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-12">
                <div class="info-box shadow-sm">
                    <span class="info-box-icon bg-dark"><i class="fas fa-project-diagram"></i></span>
                    <div class="info-box-content">
                        <span class="info-box-text">Connections</span>
                        <div style="font-size: 16px; line-height: 1.3; font-weight: bold;">
                            <span class="d-block" id="tcp-connections">TCP: --</span>
                            <span class="d-block" id="udp-connections">UDP: --</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-12">
                <div class="info-box shadow-sm" id="ip-info-box">
                    <span class="info-box-icon bg-purple"><i class="fas fa-network-wired"></i></span>
                    <div class="info-box-content">
                        <span class="info-box-text">Server IPs
                            <a href="#" id="toggle-ip-visibility" class="text-muted ml-2"><i class="fas fa-eye"></i></a>
                        </span>
                        <div id="ip-addresses" style="filter: blur(5px); font-size: 16px; line-height: 1.3; font-weight: bold;">
                            <span class="d-block" id="server-ipv4">IPv4: --</span>
                            <span class="d-block" id="server-ipv6">IPv6: --</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-12">
                <div class="info-box shadow-sm">
                    <span class="info-box-icon bg-indigo"><i class="fas fa-info-circle"></i></span>
                    <div class="info-box-content">
                        <span class="info-box-text">Version Info</span>
                        <div style="font-size: 16px; line-height: 1.3; font-weight: bold;">
                            <a href="https://github.com/ReturnFI/Blitz/releases" target="_blank" rel="noopener noreferrer" class="text-reset d-block">
                                Panel: <strong id="panel-version-display">...</strong>
                            </a>
                            <a id="core-version-row" href="https://github.com/apernet/hysteria/releases" target="_blank" rel="noopener noreferrer" class="text-reset d-block" style="display: none;">
                                Core: <strong id="core-version-display">...</strong>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-lg-6">
                <div class="card card-outline card-danger">
                    <div class="card-header">
                        <h3 class="card-title"><i class="fas fa-power-off mr-2"></i>Traffic Since Last Reboot</h3>
                    </div>
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center border-bottom mb-3 pb-2">
                            <p class="text-lg text-success"><i class="fas fa-arrow-up mr-2"></i>Uploaded</p>
                            <p class="text-lg" id="reboot-uploaded-traffic">--</p>
                        </div>
                        <div class="d-flex justify-content-between align-items-center border-bottom mb-3 pb-2">
                            <p class="text-lg text-primary"><i class="fas fa-arrow-down mr-2"></i>Downloaded</p>
                            <p class="text-lg" id="reboot-downloaded-traffic">--</p>
                        </div>
                        <div class="d-flex justify-content-between align-items-center">
                            <p class="text-lg text-info"><i class="fas fa-chart-line mr-2"></i>Combined</p>
                            <p class="text-lg" id="reboot-total-traffic">--</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="card card-outline card-info">
                    <div class="card-header">
                        <h3 class="card-title"><i class="fas fa-history mr-2"></i>User Traffic (All Time)</h3>
                    </div>
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center border-bottom mb-3 pb-2">
                            <p class="text-lg text-success"><i class="fas fa-arrow-up mr-2"></i>Uploaded</p>
                            <p class="text-lg" id="user-uploaded-traffic">--</p>
                        </div>
                        <div class="d-flex justify-content-between align-items-center border-bottom mb-3 pb-2">
                            <p class="text-lg text-primary"><i class="fas fa-arrow-down mr-2"></i>Downloaded</p>
                            <p class="text-lg" id="user-downloaded-traffic">--</p>
                        </div>
                        <div class="d-flex justify-content-between align-items-center">
                            <p class="text-lg text-info"><i class="fas fa-chart-line mr-2"></i>Combined</p>
                            <p class="text-lg" id="user-total-traffic">--</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-lg-3 col-6">
                <div class="small-box" id="hysteria2-status-box">
                    <div class="inner">
                        <h3 id="hysteria2-status">--</h3>
                        <p>Hysteria2 Core</p>
                    </div>
                    <div class="icon">
                        <i class="fas fa-bolt"></i>
                    </div>
                    <a href="#" id="restart-hysteria2-btn" class="small-box-footer" style="display: none;">
                        Restart Service <i class="fas fa-sync-alt ml-1"></i>
                    </a>
                </div>
            </div>
            <div class="col-lg-3 col-6">
                <div class="small-box" id="telegrambot-status-box">
                    <div class="inner">
                        <h3 id="telegrambot-status">--</h3>
                        <p>Telegram Bot</p>
                    </div>
                    <div class="icon">
                        <i class="fab fa-telegram"></i>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-6">
                <div class="small-box" id="iplimit-status-box">
                    <div class="inner">
                        <h3 id="iplimit-status">--</h3>
                        <p>IP Limit Service</p>
                    </div>
                    <div class="icon">
                        <i class="fas fa-ban"></i>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-6">
                <div class="small-box" id="normalsub-status-box">
                    <div class="inner">
                        <h3 id="normalsub-status">--</h3>
                        <p>Subscription Service</p>
                    </div>
                    <div class="icon">
                        <i class="fas fa-rss"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}

{% block javascripts %}
<script src="{{ url_for('assets', path='js/index.js') }}"></script>
{% endblock %}