{% extends "base.html" %}

{% block title %}Campaigns{% endblock %}

{% block content %}
<div class="container" style="max-width: 800px; margin: auto;">

    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2 class="fw-bold text-primary">📢 Campaigns</h2>
        <a href="{{ url_for('send_campaign') }}" class="btn btn-success shadow-sm" style="font-weight: 600; letter-spacing: 0.03em;">
            ➕ New Campaign
        </a>
    </div>

    {% if campaigns %}
        <div class="list-group shadow-sm">
            {% for c in campaigns %}
                <div class="list-group-item mb-3 p-4 rounded border border-1 border-light bg-white"
                    style="transition: box-shadow 0.3s ease; cursor: pointer;"
                    onmouseover="this.style.boxShadow='0 4px 12px rgba(0, 123, 255, 0.15)';"
                    onmouseout="this.style.boxShadow='none';">

                    <p class="mb-2 fs-5" style="font-weight: 600; color: #212529;">{{ c.message_body }}</p>
                    <div class="d-flex justify-content-between text-muted" style="font-size: 0.9em;">
                        <span>Status: <span class="badge bg-{{ 'success' if c.status == 'sent' else 'secondary' }}">{{ c.status.capitalize() }}</span></span>
                        <span>Sent: {{ c.sent_at.strftime('%b %d, %Y %I:%M %p') }}</span>
                    </div>
                </div>
            {% endfor %}
        </div>
    {% else %}
        <div class="alert alert-info text-center" role="alert" style="font-size: 1.1em;">
            No campaigns sent yet. Click <strong>New Campaign</strong> to start messaging your customers!
        </div>
    {% endif %}

</div>
{% endblock %}