{% extends 'layout.html' %}

{% block content %}
<div class="container">
    <h1>Manage Team: {{ team.name }}</h1>
    
    <div class="card mb-4">
        <div class="card-header">
            <h2>Team Details</h2>
        </div>
        <div class="card-body">
            <form method="POST" action="{{ url_for('manage_team', team_id=team.id) }}">
                <input type="hidden" name="action" value="update_team">
                <div class="mb-3">
                    <label for="name" class="form-label">Team Name</label>
                    <input type="text" class="form-control" id="name" name="name" value="{{ team.name }}" required>
                </div>
                <div class="mb-3">
                    <label for="description" class="form-label">Description</label>
                    <textarea class="form-control" id="description" name="description" rows="3">{{ team.description }}</textarea>
                </div>
                <button type="submit" class="btn btn-primary">Update Team</button>
            </form>
        </div>
    </div>
    
    <div class="card mb-4">
        <div class="card-header">
            <h2>Team Members</h2>
        </div>
        <div class="card-body">
            {% if team_members %}
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>Username</th>
                            <th>Email</th>
                            <th>Role</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for member in team_members %}
                            <tr>
                                <td>{{ member.username }}</td>
                                <td>{{ member.email }}</td>
                                <td>{{ member.role.value }}</td>
                                <td>
                                    <form method="POST" action="{{ url_for('manage_team', team_id=team.id) }}" class="d-inline">
                                        <input type="hidden" name="action" value="remove_member">
                                        <input type="hidden" name="user_id" value="{{ member.id }}">
                                        <button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('Are you sure you want to remove this user from the team?')">
                                            Remove
                                        </button>
                                    </form>
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            {% else %}
                <p>No members in this team yet.</p>
            {% endif %}
        </div>
    </div>
    
    <div class="card">
        <div class="card-header">
            <h2>Add Team Member</h2>
        </div>
        <div class="card-body">
            {% if available_users %}
                <form method="POST" action="{{ url_for('manage_team', team_id=team.id) }}">
                    <input type="hidden" name="action" value="add_member">
                    <div class="mb-3">
                        <label for="user_id" class="form-label">Select User</label>
                        <select class="form-select" id="user_id" name="user_id" required>
                            <option value="">-- Select User --</option>
                            {% for user in available_users %}
                                <option value="{{ user.id }}">{{ user.username }} ({{ user.email }})</option>
                            {% endfor %}
                        </select>
                    </div>
                    <button type="submit" class="btn btn-success">Add to Team</button>
                </form>
            {% else %}
                <p>No available users to add to this team.</p>
            {% endif %}
        </div>
    </div>
    
    <div class="mt-3">
        <a href="{{ url_for('admin_teams') }}" class="btn btn-secondary">Back to Teams</a>
    </div>
</div>
{% endblock %}