{% extends "common/base.html" %}

{% block title %}Room Members - {{ room.name }}{% endblock %}

{% block extra_css %}
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css" rel="stylesheet" />
<link href="{{ url_for('static', filename='css/room_members.css') }}" rel="stylesheet" />
{% endblock %}

{% block content %}
<div class="container mt-4">
    <div class="row mb-4">
        <div class="col">
            <h2>Room Members - {{ room.name }}</h2>
            <p class="text-muted">Manage who has access to this room.</p>
        </div>
    </div>

    <div class="row">
        <div class="col-md-8">
            {% from "components/member_list.html" import member_list %}
            {{ member_list(room) }}
        </div>

        <div class="col-md-4">
            {% from "components/add_member_form.html" import add_member_form %}
            {{ add_member_form(room, available_users) }}
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script src="{{ url_for('static', filename='js/room_members.js') }}"></script>
{% endblock %}