{% extends "base.html" %}

{% block content %}
    <h2>Manage Teams for Season: {{ season.name }}</h2>

    <div style="display: flex; gap: 2rem; flex-wrap: wrap;">
        <!-- Left Column: Pending and Approved Teams -->
        <div style="flex: 1; min-width: 300px;">
            <h3>Pending Requests</h3>
            {% if pending_teams %}
                <ul style="list-style: none; padding: 0;">
                {% for team in pending_teams %}
                    <li style="background: var(--bg-primary); padding: 1rem; margin-bottom: 0.5rem; border: 1px solid var(--deco-border); display: flex; justify-content: space-between; align-items: center;">
                        <span>{{ team.team_name }} ({{ team.username }})</span>
                        <div style="display: flex; gap: 0.5rem;">
                            <form method="POST" style="margin:0; width: auto;">
                                <input type="hidden" name="action" value="approve">
                                <input type="hidden" name="user_id" value="{{ team.id }}">
                                <button type="submit" style="background-color: green; font-size: 0.8rem; padding: 4px 8px;">Approve</button>
                            </form>
                            <form method="POST" style="margin:0; width: auto;">
                                <input type="hidden" name="action" value="deny">
                                <input type="hidden" name="user_id" value="{{ team.id }}">
                                <button type="submit" style="background-color: red; font-size: 0.8rem; padding: 4px 8px;">Deny</button>
                            </form>
                        </div>
                    </li>
                {% endfor %}
                </ul>
            {% else %}
                <p>No pending requests.</p>
            {% endif %}

            <h3 style="margin-top: 2rem;">Approved Teams</h3>
            {% if approved_teams %}
                <ul style="list-style: none; padding: 0;">
                {% for team in approved_teams %}
                    <li style="background: var(--bg-primary); padding: 1rem; margin-bottom: 0.5rem; border: 1px solid var(--deco-border); display: flex; justify-content: space-between; align-items: center;">
                        <span>{{ team.team_name }} ({{ team.username }})</span>
                        <form method="POST" style="margin:0; width: auto;">
                            <input type="hidden" name="action" value="remove">
                            <input type="hidden" name="user_id" value="{{ team.id }}">
                            <button type="submit" style="background-color: red; font-size: 0.8rem; padding: 4px 8px;">Remove</button>
                        </form>
                    </li>
                {% endfor %}
                </ul>
            {% else %}
                <p>No approved teams.</p>
            {% endif %}
        </div>

        <!-- Right Column: Add Teams Directly -->
        <div style="flex: 1; min-width: 300px; background: var(--bg-primary); padding: 2rem; border: 1px solid var(--deco-border);">
            <h3>Directly Add Teams</h3>
            <p>Select teams to bypass the request process and approve immediately.</p>
            <form method="POST">
                <input type="hidden" name="action" value="add">
                <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1.5rem;">
                    {% for team in all_teams %}
                        {% if team.id not in enrolled_ids %}
                        <label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer;">
                            <input type="checkbox" name="team_ids" value="{{ team.id }}">
                            {{ team.team_name }}
                        </label>
                        {% endif %}
                    {% endfor %}
                </div>
                <button type="submit">Add Selected Teams</button>
            </form>
            <div style="margin-top: 2rem;">
                <a href="{{ url_for('admin') }}" style="color: var(--text-accent); text-decoration: underline; font-weight: bold;">&larr; Back to Admin Dashboard</a>
            </div>
        </div>
    </div>
{% endblock %}