<%- include('partials/header') %>
<%- include('partials/welcome', { 
    user: user,
    contextButtons: [
        { href: '/profile', text: 'Profile', class: 'btn-secondary' }
    ]
}) %>

        <main class="dashboard">
            <div class="dashboard-section">
                <h2>Your Campaigns</h2>
                <% if (campaigns.length > 0) { %>
                    <div class="campaigns-grid">
                        <% campaigns.forEach(campaign => { %>
                            <div class="campaign-card">
                                <h3><%= campaign.name %></h3>
                                <p><%= campaign.description || 'No description' %></p>
                                <div class="campaign-meta">
                                    <span class="gm">GM: <b><%= campaign.gm_name %></b></span>
                                    <span class="players">Players: <b><%= campaign.player_count %></b></span>
                                    <span class="status status-<%= campaign.status %>">Campaign Status: <%= campaign.status %></span>
                                </div>
                                <br/>
                                <div class="campaign-actions">
                                    <a href="/campaign/<%= campaign.id %>/view" class="btn btn-small btn-primary">View</a>
                                    <% if (campaign.gm_id == user.id) { %>
                                        <a href="/campaign/<%= campaign.id %>" class="btn btn-small btn-secondary">Manage</a>
                                    <% } %>
                                </div>
                            </div>
                        <% }); %>
                    </div>
                <% } else { %>
                    <p class="empty-state">You're not part of any campaigns yet.</p>
                <% } %>
                <br />
                <hr style="border-color: #00ff41; margin-bottom: 20px;">
                <div class="section-actions">
                    <a href="/campaign/create" class="btn btn-primary">Create Campaign</a>
                    <!--a href="/campaign/join" class="btn btn-secondary">Join Campaign</a-->
                </div>
            </div>
            <br/>
            <div class="dashboard-section">
                <h2>Your Characters</h2>
                <% if (characters.length > 0) { %>
                    <div class="characters-grid">
                        <% characters.forEach(character => { %>
                            <div class="character-card">
                                <h3><%= character.name %></h3>
                                <p class="archetype"><b><%= character.archetype.charAt(0).toUpperCase() + character.archetype.slice(1) %> <%= character.concept || 'No concept defined' %></b></p>
                                <div class="character-meta">
                                    <% if (character.campaign_name) { %>
                                        <p class="campaign">Campaign: <b><i><%= character.campaign_name %></i></b></p>
                                    <% } else { %>
                                        <p class="campaign">Not assigned to campaign</p>
                                    <% } %>
                                    <p class="resources">
                                        Karma: <%= character.karma_current %>/<%= character.karma_max %> | 
                                        Resolve: <%= character.resolve_current %>/<%= character.resolve_max %>
                                    </p>
                                </div>
                                <div class="character-actions">
                                    <a href="/character/<%= character.id %>" class="btn btn-small btn-primary">View</a>
                                    <a href="/character/<%= character.id %>/edit" class="btn btn-small btn-secondary">Edit</a>
                                </div>
                            </div>
                        <% }); %>
                    </div>
                <% } else { %>
                    <p class="empty-state">You haven't created any characters yet.</p>
                <% } %>
                <br />
                <hr style="border-color: #00ff41; margin-bottom: 20px;">
                <div class="section-actions">
                    <a href="/character/create" class="btn btn-primary">Create Character</a>
                </div>
            </div>

        </main>

<%- include('partials/footer') %>