python-tdd/src/templates/apps/gameboard/my_sea_gate.html

{% extends "core/base.html" %}
{% load static %}

{% block title_text %}Game Sea Gate{% endblock title_text %}
{% block header_text %}<span>Game</span><span>Gate</span>{% endblock header_text %}

{% block content %}
{# Sprint 6 iter 6a — solo my-sea gatekeeper. Token-deposit-to-redraw    #}
{# within the 24h window after the user's daily free draw is spent.     #}
{# Layout: `--duoUser` page bg + darkened Gaussian-glass modal centered  #}
{# over it (mirrors the room gatekeeper's `.gate-overlay` + `.gate-     #}
{# modal` chrome). No hex / chair-seats — the gatekeeper is a transient #}
{# in-flight UI; seats live on the my-sea picker page itself.           #}
<div class="my-sea-page my-sea-gate-page"
     data-phase="gate"
     data-polarity="{% if significator_reversed %}gravity{% else %}levity{% endif %}">

    <div id="id_gate_wrapper" class="my-sea-gate-wrapper">
        <div class="gate-backdrop"></div>
        <div class="gate-overlay my-sea-gate-overlay">
            <div class="gate-modal my-sea-gate-modal" role="dialog" aria-label="My Sea Gatekeeper">

                {# Coin-slot rails — INSERT TOKEN TO PLAY pre-deposit;     #}
                {# PUSH TO RETURN (refund btn) post-deposit. Mirrors        #}
                {# `_gatekeeper.html`'s `.token-slot` shape so the SCSS    #}
                {# from `_room.scss` carries over (rail glow on active     #}
                {# state, claimed state on deposit, etc.).                 #}
                <div class="token-slot{% if not deposit_reserved %} active{% else %} pending{% endif %}">
                    {% if not deposit_reserved %}
                    <form method="POST" action="{% url 'my_sea_insert_token' %}" style="display:contents">
                        {% csrf_token %}
                        <button type="submit" class="token-rails" aria-label="Insert token to play">
                            <span class="rail"></span>
                            <span class="rail"></span>
                        </button>
                    </form>
                    {% else %}
                    <div class="token-rails">
                        <span class="rail"></span>
                        <span class="rail"></span>
                    </div>
                    {% endif %}
                    <div class="token-panel">
                        <div class="token-denomination">1</div>
                        <span class="token-insert-label">INSERT TOKEN TO PLAY</span>
                        <span class="token-return-label">PUSH TO RETURN</span>
                    </div>
                    {% if deposit_reserved %}
                    <form method="POST" action="{% url 'my_sea_refund_token' %}" style="display:contents">
                        {% csrf_token %}
                        <button type="submit" class="token-return-btn" aria-label="Push to return"></button>
                    </form>
                    {% endif %}
                </div>

                {# PAID DRAW — commits the deposit + redirects to my-sea.  #}
                {# Mirrors the room's PICK ROLES btn shape (`.btn-primary` #}
                {# alongside the coin-slot in `.gate-top-row`).            #}
                {% if deposit_reserved %}
                <form method="POST" action="{% url 'my_sea_paid_draw' %}" class="my-sea-paid-draw-form">
                    {% csrf_token %}
                    <button type="submit"
                            id="id_my_sea_paid_draw_btn"
                            class="btn btn-primary">PAID<br>DRAW</button>
                </form>
                {% endif %}

            </div>
        </div>
    </div>
</div>
{% endblock content %}