<%- include('partials/header') %>
<%- include('partials/welcome', { 
    user: user,
    contextButtons: [
        { href: '/dashboard', text: 'Back to Dashboard' }
    ]
}) %>

        <main class="character-creation">
            <h2>Create New Campaign</h2>
            <p class="creation-intro">Start a new story in the world of Freaks. Give your campaign a name and a compelling premise to attract players.</p>

            <% if (error) { %>
                <div class="error"><%= error %></div>
            <% } %>

            <form action="/campaign/create" method="POST" class="character-form">
                <section class="form-section">
                    <h3>Campaign Details</h3>
                    
                    <div class="form-group">
                        <label for="name">Campaign Name:</label>
                        <input type="text" id="name" name="name" required placeholder="e.g., The Silent Summer of '89">
                        <small>The title of your campaign story.</small>
                    </div>

                    <div class="form-group">
                        <label for="description">Description / Premise:</label>
                        <textarea id="description" name="description" rows="5" placeholder="Set the stage for your players. What is the central conflict? Where does the story begin?"></textarea>
                        <small>A brief summary that will be visible to potential players.</small>
                    </div>

                    <div class="form-group">
                        <label for="theme">Campaign Theme:</label>
                        <select id="theme" name="theme">
                            <% availableThemes.forEach(themeOption => { %>
                                <option value="<%= themeOption.key %>"><%= themeOption.name %></option>
                            <% }); %>
                        </select>
                        <small>This sets the visual theme and ruleset for the campaign.</small>
                    </div>

                    <div class="form-group">
                        <label for="status">Initial Status:</label>
                        <select id="status" name="status">
                            <option value="recruiting" selected>Recruiting - Open for players to join.</option>
                            <option value="active">Active - The game is currently in progress.</option>
                            <option value="on_hold">On Hold - The game is temporarily paused.</option>
                            <option value="completed">Completed - The story has concluded.</option>
                        </select>
                        <small>You can change this status at any time.</small>
                    </div>
                </section>

                <div class="form-actions">
                    <button type="submit" class="btn btn-primary">Create Campaign</button>
                    <a href="/dashboard" class="btn btn-secondary">Cancel</a>
                </div>
            </form>
        </main>

<%- include('partials/footer') %>