{% extends "base.html" %}

{% block title %}Welcome - Rats with Gats{% endblock %}

{% block content %}
<div class="welcome-container glass-panel">
    <div class="welcome-hero text-center">
        <h2>Steal Ships. Commit Piracy. Run on Math Magic.</h2>
        <p class="subtitle">A collaborative storytelling web-app to facilitate remote play of the whimsical roleplaying game.</p>
    </div>
    
    <div class="welcome-actions">
        <div class="action-card glass-panel text-center">
            <h3>Start a New Adventure</h3>
            <p>Generate a fresh game deck and name your crew of mathematical pirates.</p>
            <form action="/game/create" method="POST">
                <div class="form-group">
                    <input type="text" name="crew_name" placeholder="Name your Crew (e.g. The Math-Gat Rats)" required class="input-field text-center">
                </div>
                <button type="submit" class="btn btn-primary btn-large glow-effect">Create Game</button>
            </form>
        </div>
        
        <div class="action-card glass-panel text-center">
            <h3>Join an Existing Crew</h3>
            <p>Enter a Game ID or Join Link provided by your Captain.</p>
            <form onsubmit="event.preventDefault(); window.location.href = '/game/' + document.getElementById('game-id-input').value.trim() + '/join';">
                <div class="form-group">
                    <input type="text" id="game-id-input" placeholder="e.g. 550e8400-e29b-41d4-a716-446655440000" required class="input-field text-center">
                </div>
                <button type="submit" class="btn btn-secondary btn-large">Join Game</button>
            </form>
        </div>
    </div>
</div>
{% endblock %}