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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Guild Settings - {{ guild.name }}</title>
    <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">
        <h1>Settings for {{ guild.name }}</h1>
        <div class="mb-3">
            <img src="{% if guild.icon %}https://cdn.discordapp.com/icons/{{ guild.id }}/{{ guild.icon }}.png{% else %}/static/default_guild_icon.png{% endif %}"
                alt="Guild Icon" class="img-thumbnail" width="100">
        </div>
        <ul class="list-group mb-4">
            <li class="list-group-item"><strong>Guild ID:</strong> {{ guild.id }}</li>
            <li class="list-group-item"><strong>Guild Name:</strong> {{ guild.name }}</li>
            <li class="list-group-item"><strong>Owner:</strong> {{ owner_name }}</li>
            <li class="list-group-item"><strong>Permissions:</strong> {{ guild.permissions }}</li>
            <li class="list-group-item"><strong>Member Count:</strong> {{ member_count }}</li>
            {% if guild.features %}
            <li class="list-group-item"><strong>Features:</strong> {{ guild.features|join(', ') }}</li>
            {% endif %}
            {% if guild.description %}
            <li class="list-group-item"><strong>Description:</strong> {{ guild.description }}</li>
            {% endif %}
        </ul>

        {% if guild.roles %}
        <div class="mb-4">
            <h3>Roles</h3>
            <ul class="list-group">
                {% for role in guild.roles %}
                <li class="list-group-item">
                    <strong>{{ role.name }}</strong>
                    <span class="text-muted">(ID: {{ role.id }})</span>
                    {% if role.permissions %}
                    <br><small>Permissions: {{ role.permissions }}</small>
                    {% endif %}
                    {% if role.managed %}
                    <span class="badge badge-info ml-2">Managed</span>
                    {% endif %}
                    {% if role.hoist %}
                    <span class="badge badge-secondary ml-2">Hoisted</span>
                    {% endif %}
                </li>
                {% endfor %}
            </ul>
        </div>
        {% endif %}

        <form method="POST" action="{{ url_for('guild_settings', guild_id=guild.id) }}">
            <div class="form-group">
                <label for="guildName">Guild Name</label>
                <input type="text" class="form-control" id="guildName" name="guild_name" value="{{ guild.name }}"
                    required>
            </div>
            <div class="form-group">
                <label for="guildDescription">Description</label>
                <textarea class="form-control" id="guildDescription"
                    name="guild_description">{{ guild.description }}</textarea>
            </div>
            <button type="submit" class="btn btn-primary">Save Settings</button>
        </form>

        <a href="{{ url_for('home') }}" class="btn btn-secondary mt-3">Back to Home</a>
    </div>

    <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>