<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home</title>
    <!-- Bootstrap CSS -->
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>

<body class="bg-light">
    <div class="container mt-5">
        <a href="{{ url_for('wallet') }}" class="btn btn-info mt-3">View Wallet</a>
        <a href="{{ url_for('transactions') }}" class="btn btn-info mt-3">View Transaction History</a>

        <h1>Welcome, {{ user['username'] }}#{{ user['discriminator'] }}</h1>
        <img src="https://cdn.discordapp.com/avatars/{{ user['id'] }}/{{ user['avatar'] }}.png" alt="Avatar"
            class="img-thumbnail mb-3" width="100">

        <p>Total Users: {{ stats.total_users }}</p>
        <p>Number of Servers: {{ stats.servers }}</p>

        <h2>Your Servers:</h2>
        <ul class="list-group">
            {% for guild in guilds %}
            <li class="list-group-item d-flex justify-content-between align-items-center">
                <a href="{{ url_for('guild_settings', guild_id=guild['id']) }}" class="text-decoration-none">
                    <strong>{{ guild['name'] }}</strong> (ID: {{ guild['id'] }})
                </a>
                <small class="text-muted">Members: {{ guild.get('approx_member_count', 'N/A') }}</small>
            </li>
            {% else %}
            <li class="list-group-item">You are not in any servers.</li>
            {% endfor %}
        </ul>

        <a href="{{ url_for('logout') }}" class="btn btn-danger mt-3">Logout</a>
    </div>
    <!-- Bootstrap JS and dependencies -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>

</html>