{% macro chatroom_widget(config) %}
{% set show_participants = config.show_participants %}
{# Page-local CSS and JavaScript are supplied by the ChatRoom component through
   its resource hooks (see psynet/chatroom.py), so this macro
   stays focused on markup and remains compatible with in-place transitions. #}
<div id="chatroom-widget">
    {% if show_participants %}
    <div id="chatroom-sidebar">
        <h6>Participants</h6>
        <ul id="chatroom-participants"></ul>
    </div>
    {% endif %}

    <div id="chatroom-main">
        <div id="chatroom-messages"></div>
        <div id="chatroom-input-row">
            <input
                type="text"
                id="chatroom-chat-input"
                class="form-control"
                placeholder="Type a message…"
                autocomplete="off"
            />
            <button id="chatroom-send-btn" class="btn btn-primary" disabled>Send</button>
        </div>
    </div>
</div>
{% endmacro %}