<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pre-Save Campaigns - Admin</title>
    <link rel="stylesheet" href="/css/styles.css">
</head>
<body>
    <layout name="admin">
        <div class="container">
            <div class="page-header">
                <h1>Pre-Save Campaigns</h1>
                <a href="/admin/presave/campaigns/create" class="btn btn-primary">New Campaign</a>
            </div>

            <if condition="{stats}">
                <div class="stats-grid">
                    <div class="stat-card">
                        <h3>Total Campaigns</h3>
                        <p class="stat-value">{stats.total}</p>
                    </div>
                    <div class="stat-card">
                        <h3>Active</h3>
                        <p class="stat-value">{stats.active}</p>
                    </div>
                    <div class="stat-card">
                        <h3>Total Registrations</h3>
                        <p class="stat-value">{stats.total_registrations}</p>
                    </div>
                    <div class="stat-card">
                        <h3>Completed</h3>
                        <p class="stat-value">{stats.completed}</p>
                    </div>
                </div>
            </if>

            <if condition="{campaigns}">
                <div class="campaigns-list">
                    <for items="{campaigns}" as="campaign">
                        <div class="campaign-card">
                            <div class="campaign-header">
                                <img src="{campaign.coverImageUrl}" alt="{campaign.title}" class="campaign-cover">
                                <div class="campaign-info">
                                    <h3>{campaign.title}</h3>
                                    <p class="artist">{campaign.artistName}</p>
                                    <p class="release-date">Release: {campaign.releaseDate|date}</p>
                                </div>
                                <div class="campaign-status">
                                    <span class="badge badge-{campaign.status.value}">{campaign.status.value}</span>
                                </div>
                            </div>
                            <div class="campaign-actions">
                                <a href="/admin/presave/campaigns/{campaign.id}" class="btn btn-sm">View</a>
                                <a href="/admin/presave/campaigns/{campaign.id}/edit" class="btn btn-sm">Edit</a>

                                <if condition="{campaign.status.value === 'draft'}">
                                    <form action="/admin/presave/campaigns/{campaign.id}/activate" method="POST" style="display: inline;">
                                        <csrf-token />
                                        <button type="submit" class="btn btn-sm btn-success">Activate</button>
                                    </form>
                                </if>

                                <if condition="{campaign.status.value === 'active'}">
                                    <form action="/admin/presave/campaigns/{campaign.id}/pause" method="POST" style="display: inline;">
                                        <csrf-token />
                                        <button type="submit" class="btn btn-sm btn-warning">Pause</button>
                                    </form>
                                </if>

                                <button class="btn btn-sm btn-danger" onclick="deleteCampaign({campaign.id})">Delete</button>
                            </div>
                        </div>
                    </for>
                </div>
            </if>

            <if condition="{!campaigns || campaigns.length === 0}">
                <div class="empty-state">
                    <p>No campaigns yet.</p>
                    <a href="/admin/presave/campaigns/create" class="btn btn-primary">Create your first campaign</a>
                </div>
            </if>
        </div>
    </layout>

    <script>
        async function deleteCampaign(id) {
            if (!confirm('Are you sure you want to delete this campaign? This will also delete all registrations.')) {
                return;
            }

            try {
                const response = await fetch(`/admin/presave/campaigns/${id}`, {
                    method: 'DELETE',
                    headers: {
                        'Content-Type': 'application/json'
                    }
                });

                const data = await response.json();

                if (data.success) {
                    window.location.reload();
                } else {
                    alert(data.message || 'Failed to delete campaign');
                }
            } catch (error) {
                alert('Error deleting campaign');
                console.error(error);
            }
        }
    </script>
</body>
</html>
