{% extends "base.html" %}
{% load django_bootstrap5 %}

{% block title %}Edit Campaign: {{ campaign.title }}{% endblock %}

{% block content %}
<div class="container">
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h1>Edit Campaign</h1>
                <div>
                    <a href="{% url 'lead_capture:campaign_preview' campaign.slug %}" class="btn btn-outline-primary">
                        <i class="bi bi-eye"></i> Preview
                    </a>
                    <a href="{% url 'lead_capture:campaign_list' %}" class="btn btn-outline-secondary">
                        <i class="bi bi-arrow-left"></i> Back to Campaigns
                    </a>
                </div>
            </div>

            <div class="card">
                <div class="card-header">
                    <h3 class="mb-0">{{ campaign.title }}</h3>
                    <small class="text-muted">
                        Edit the AI-generated content below. Changes will be saved when you submit the form.
                    </small>
                </div>

                <div class="card-body">
                    <form method="post">
                        {% csrf_token %}

                        <div class="row">
                            <div class="col-md-8">
                                <h4 class="h5 mb-3">Basic Information</h4>
                                {% bootstrap_field form.title %}
                                {% bootstrap_field form.template_type %}

                                <hr class="my-4">

                                <h4 class="h5 mb-3">Content</h4>
                                {% bootstrap_field form.headline %}
                                {% bootstrap_field form.subheadline %}
                                {% bootstrap_field form.value_proposition %}
                                {% bootstrap_field form.benefits %}
                                {% bootstrap_field form.cta_button_text %}
                                {% bootstrap_field form.thank_you_message %}

                                <hr class="my-4">

                                <h4 class="h5 mb-3">Launch Configuration</h4>
                                {% bootstrap_field form.launch_date %}

                                <div class="row">
                                    <div class="col-md-6">
                                        {% bootstrap_field form.show_countdown %}
                                    </div>
                                    <div class="col-md-6">
                                        {% bootstrap_field form.show_social_proof %}
                                    </div>
                                </div>

                                <hr class="my-4">

                                <h4 class="h5 mb-3">SEO Settings</h4>
                                {% bootstrap_field form.meta_title %}
                                {% bootstrap_field form.meta_description %}

                                <div class="d-grid gap-2 mt-4">
                                    <button type="submit" class="btn btn-primary btn-lg">
                                        <i class="bi bi-check-circle"></i> Save Changes
                                    </button>
                                </div>
                            </div>

                            <div class="col-md-4">
                                <div class="card bg-light">
                                    <div class="card-header">
                                        <h5 class="mb-0">Campaign Stats</h5>
                                    </div>
                                    <div class="card-body">
                                        <div class="row text-center mb-3">
                                            <div class="col-6">
                                                <div class="h4 mb-0">{{ campaign.page_views }}</div>
                                                <small class="text-muted">Views</small>
                                            </div>
                                            <div class="col-6">
                                                <div class="h4 mb-0">{{ campaign.conversion_count }}</div>
                                                <small class="text-muted">Leads</small>
                                            </div>
                                        </div>

                                        <div class="text-center mb-3">
                                            <div class="h4 mb-0">{{ campaign.conversion_rate }}%</div>
                                            <small class="text-muted">Conversion Rate</small>
                                        </div>

                                        <hr>

                                        <p><strong>Status:</strong>
                                            {% if campaign.is_active %}
                                                <span class="badge bg-success">Active</span>
                                            {% else %}
                                                <span class="badge bg-secondary">Inactive</span>
                                            {% endif %}
                                        </p>

                                        <p><strong>Created:</strong><br>
                                            {{ campaign.created_at|date:"M j, Y g:i A" }}
                                        </p>

                                        <p><strong>Last Updated:</strong><br>
                                            {{ campaign.updated_at|date:"M j, Y g:i A" }}
                                        </p>

                                        {% if campaign.questionnaire_data.llm_model_name %}
                                        <p><strong>AI Model Used:</strong><br>
                                            <small>{{ campaign.questionnaire_data.llm_model_name }}</small>
                                        </p>
                                        {% endif %}
                                    </div>
                                </div>

                                <div class="mt-3">
                                    <div class="alert alert-info">
                                        <h6 class="alert-heading">
                                            <i class="bi bi-lightbulb"></i> Tips
                                        </h6>
                                        <ul class="mb-0 small">
                                            <li>Keep headlines under 60 characters for best impact</li>
                                            <li>Benefits should be specific and outcome-focused</li>
                                            <li>Use action words in your CTA button</li>
                                            <li>Preview your changes before publishing</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .alert-info {
        border-left: 4px solid #0dcaf0;
    }
</style>
{% endblock %}