{% extends "base.html" %}

{% block title %}Game #{{ game.id[:8] }} - {% if player %}{{ player.name }}{% else %}Lobby{% endif %}{% endblock %}

{% block header_extra %}
<div class="header-status">
    {% if player %}
    <span class="player-pill"><span class="bullet"></span> {{ player.name }} (Rank {{ player.rank }})</span>
    {% endif %}
    <span class="phase-pill">{{ game.phase.replace('_', ' ').title() }}</span>
</div>
{% endblock %}

{% block content %}
<!-- Main game container that polls the server for phase changes and state updates -->
<div id="game-view" 
     hx-get="/game/{{ game.id }}/player/{{ player.id }}/view" 
     hx-trigger="load, phase-changed from:body" 
     hx-swap="innerHTML scroll:top">
     <div class="loader-container text-center">
         <div class="spinner"></div>
         <p>Contacting the math-magic spirits...</p>
     </div>
</div>
{% endblock %}