{% extends "base.html" %}

{% block title %}Join Crew - Rats with Gats{% endblock %}

{% block content %}
<div class="join-container glass-panel text-center">
    <h2>Join the {% if game.crew_name %}{{ game.crew_name }}{% else %}Pi-Rat{% endif %} Crew!</h2>
    <p>The mathematical transformation spell is about to cast. Enter your name below to stow away in the cargo hold.</p>
    
    <form action="/game/{{ game.id }}/join" method="POST" class="join-form">
        <div class="form-group">
            <label for="name-input">Your Stowaway Name:</label>
            <input type="text" id="name-input" name="name" placeholder="e.g. Whisker-Face" required class="input-field text-center" autofocus>
        </div>
        <button type="submit" class="btn btn-primary btn-large glow-effect">Transform into a Pi-Rat!</button>
    </form>
    
    <div class="back-link">
        <a href="/">Back to Main Menu</a>
    </div>
</div>
{% endblock %}