{# Game-views carousel — the "reelhouse": the fivefold applet-scroll carousel   #}
{# in the table-hex aperture's 2nd vertical snap pane                           #}
{# ([[project-room-game-views-carousel]]). A horizontal scroll-snap strip of    #}
{# five views reached by scrolling DOWN from the hex, landing on SCROLL (2nd).  #}
{# room-views.js sets the initial scrollLeft, drives the icon strip / title     #}
{# reel, and handles wheel/icon nav + the POST composer + the ATLAS merge.      #}
{# The aperture + this scroller set NO z-index/transform so the root stacking   #}
{# context (position strip z-130, overlays) is preserved.                       #}
{% load lyric_extras %}
<div id="id_room_views" class="room-views reelhouse">
    {# ATLAS — provenance + post-thread, time-merged. The feed body is rebuilt #}
    {# client-side from the live SCROLL + POST DOM on activation (room-views.js #}
    {# buildAtlasFeed), so a just-typed line shows without a reload.            #}
    <div class="room-view room-view--atlas" data-view="atlas">
        <div class="applet-scroll room-view-card">
            <h2>{{ room.name }}</h2>
            {# Body is filled client-side by room-views.js (buildAtlasFeed) on  #}
            {# activation — no server placeholder; the ATLAS is never reached   #}
            {# before SCROLL has its "Welcome to <game>!" creation event.       #}
            <div id="id_room_atlas" class="room-atlas-feed"></div>
        </div>
    </div>

    {# SCROLL — the provenance feed (unchanged _room_scroll.html). Default view. #}
    <div class="room-view room-view--scroll" data-view="scroll">
        {% include "apps/gameboard/_partials/_room_scroll.html" %}
    </div>

    {# YARN — stub view this sprint (no backing model yet). The route icon +   #}
    {# the shared [Feature forthcoming] partial stand in.                      #}
    <div class="room-view room-view--yarn" data-view="yarn">
        <div class="applet-scroll room-view-card">
            <h2>{{ room.name }}</h2>
            <div class="room-view-stub"><i class="fa-solid fa-route"></i>{% include "core/_partials/_forthcoming.html" %}</div>
        </div>
    </div>

    {# POST — the room-scoped game-table thread. Same #id_post_table + composer  #}
    {# markup as post.html (shared _post_line.html), but the composer appends    #}
    {# via the epic:room_post AJAX endpoint (room-views.js) so the carousel      #}
    {# stays put instead of navigating to the standalone billpost page.          #}
    <div class="room-view room-view--post" data-view="post">
        <div class="applet-scroll room-view-card">
            <h2>{{ room.name }}</h2>
            {# Shared post-header (same partial as post.html): a hardcoded       #}
            {# "Gamer Introduction" title + the gamers OCCUPYING SEATS as the    #}
            {# chat's recipients (seat occupants, NOT token-depositors who could #}
            {# retract + leave). A dynamic title template comes later.           #}
            {% include "apps/billboard/_partials/_post_header.html" with header_title="Gamer Introduction" other_recipients=seated_others self_user=request.user %}
            <ul id="id_post_table" class="post-lines">
                {% for line in room_post_lines %}
                    {% include "apps/billboard/_partials/_post_line.html" %}
                {% endfor %}
                <li class="post-line-buffer" aria-hidden="true"></li>
            </ul>
            <form id="id_post_line_form" method="POST"
                  action="{% url 'epic:room_post' room.id %}"
                  class="post-line-form" data-room-post="1"
                  data-author="{{ request.user|at_handle }}">
                {% csrf_token %}
                <div class="composer-row">
                    {# Canonical post-line placeholder — same as the billboard   #}
                    {# New Post applet (_form.html) + post.html, not a bespoke    #}
                    {# variant.                                                   #}
                    <input id="id_post_line_text" name="text" class="form-control"
                           placeholder="Enter a post line" autocomplete="off" required>
                    {# OK on an .applet-btn-panel so the green .btn-confirm reads  #}
                    {# against the --duoUser felt — mirrors the New Post applet.   #}
                    <div class="applet-btn-panel">
                        <button type="submit" id="id_post_line_btn" class="btn btn-confirm">OK</button>
                    </div>
                </div>
                <div id="id_post_line_feedback" class="invalid-feedback"></div>
            </form>
        </div>
    </div>

    {# PULSE — stub view this sprint (no backing model yet). The chart icon +  #}
    {# the shared [Feature forthcoming] partial stand in.                      #}
    <div class="room-view room-view--pulse" data-view="pulse">
        <div class="applet-scroll room-view-card">
            <h2>{{ room.name }}</h2>
            <div class="room-view-stub"><i class="fa-solid fa-chart-pie"></i>{% include "core/_partials/_forthcoming.html" %}</div>
        </div>
    </div>
</div>