<%- include('partials/header') %>
<%- include('partials/welcome', { 
    user: user,
    contextButtons: [
        { href: `/campaign/${campaign.id}/view`, text: 'View as Player', class: 'btn-secondary' },
        { href: '/dashboard', text: 'Dashboard' }
    ]
}) %>

        <main>
            <% if (error) { %>
                <div class="error">
                    <% if (error === 'user_not_found') { %> User not found. <% } %>
                    <% if (error === 'player_already_in') { %> That player is already in the campaign. <% } %>
                    <% if (error === 'kick_failed' || error === 'edit_failed') { %> An error occurred. Please try again. <% } %>
                </div>
            <% } %>

            <form action="/campaign/<%= campaign.id %>/edit" method="POST">
                <section class="character-header" style="margin-bottom: 20px;">
                    <% if (isGM) { %>
                        <div class="form-group">
                            <label for="name" style="color:#ff0080; text-align: left;">Campaign Name</label>
                            <input type="text" name="name" id="name" value="<%= campaign.name %>">
                        </div>
                        <div class="form-group">
                            <label for="description" style="color:#ff0080; text-align: left;">Description</label>
                            <textarea name="description" id="description" rows="4"><%= campaign.description %></textarea>
                        </div>
                    <% } else { %>
                        <h2><%= campaign.name %></h2>
                        <p style="font-size: 1.1rem; color: #cccccc;"><%= campaign.description %></p>
                    <% } %>

                    <div class="campaign-meta" style="margin-top: 15px;">
                        <div class="form-group" style="margin-bottom: 0;">
                            <label for="status">Status</label>
                            <% if (isGM) { %>
                                <select name="status" id="status">
                                    <option value="active" <%= campaign.status === 'active' ? 'selected' : '' %>>Active</option>
                                    <option value="on_hold" <%= campaign.status === 'on_hold' ? 'selected' : '' %>>On Hold</option>
                                    <option value="recruiting" <%= campaign.status === 'recruiting' ? 'selected' : '' %>>Recruiting</option>
                                    <option value="completed" <%= campaign.status === 'completed' ? 'selected' : '' %>>Completed</option>
                                </select>
                            <% } else { %>
                                <p><span class="status status-<%= campaign.status %>"><%= campaign.status %></span></p>
                            <% } %>
                        </div>
                    </div>
                    <% if (isGM) { %>
                        <div class="form-actions" style="margin-top: 20px;">
                            <button type="submit" class="btn btn-primary">Save Changes</button>
                        </div>
                    <% } %>
                </section>
            </form>

            <section class="character-section">
                <h3>Players</h3>
                <div class="characters-grid">
                    <% if (players.length > 0) { %>
                        <% players.forEach(player => { %>
                            <div class="character-card">
                                <h4><%= player.username %></h4>
                                <% if (isGM) { %>
                                    <form action="/campaign/<%= campaign.id %>/kick-player" method="POST" onsubmit="return confirm('Are you sure you want to remove this player?');" style="margin-top: auto;">
                                        <input type="hidden" name="playerId" value="<%= player.id %>">
                                        <button type="submit" class="btn btn-small" style="border-color: #ff4444; color: #ff4444; width: 100%;">Kick Player</button>
                                    </form>
                                <% } %>
                            </div>
                        <% }); %>
                    <% } else { %>
                        <p class="no-abilities">No players have joined yet.</p>
                    <% } %>
                </div>
                <% if (isGM) { %>
                    <div class="form-section" style="margin-top: 30px; border-color: #00ffff;">
                        <h4 style="color: #00ffff;">Add a Player</h4>
                        <form action="/campaign/<%= campaign.id %>/add-player" method="POST">
                            <div class="form-group">
                                <label for="usernameOrEmail">Add Player by Username or Email:</label>
                                <input type="text" id="usernameOrEmail" name="usernameOrEmail" required placeholder="Enter player's username or email">
                            </div>
                            <button type="submit" class="btn btn-secondary">Add Player</button>
                        </form>
                    </div>
                <% } %>
            </section>
            <% if (isGM) { %>
                <div class="delete-section" style="margin-top: 40px; text-align: center;">
                    <hr style="border-color: #ff4444; margin-bottom: 20px;">
                    <h3 style="color: #ff4444;">Danger Zone</h3>
                    <p style="color: #cccccc; margin-bottom: 15px;">Deleting a campaign is permanent and cannot be undone. This will remove all players and notes associated with it.</p>
                    <form action="/campaign/<%= campaign.id %>/delete" method="POST" onsubmit="return confirm('Are you sure you want to permanently delete this campaign and all of its data?');">
                        <button type="submit" class="btn" style="border-color: #ff4444; color: #ff4444;">Delete Campaign</button>
                    </form>
                </div>
            <% } %>
        </main>

<%- include('partials/footer') %>