{% extends "base.html" %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-lg-8">
        <div class="mb-5">
            <div class="progress" style="height: 4px;">
                <div class="progress-bar bg-success" style="width: 100%"></div>
            </div>
        </div>

        <div class="card border-0 shadow-sm p-4">
            <div class="text-center mb-5">
                <div class="display-1 text-primary mb-3"><i class="bi bi-check-circle"></i></div>
                <h2 class="h2 fw-bold">Ready to Track</h2>
                <p class="text-muted">Review your strategy settings before starting.</p>
            </div>

            <dl class="row mb-5">
                <dt class="col-sm-3 text-secondary text-uppercase small fw-bold">Strategy</dt>
                <dd class="col-sm-9 fw-medium">{{ strategy.name }}</dd>

                <dt class="col-sm-3 text-secondary text-uppercase small fw-bold">Period</dt>
                <dd class="col-sm-9">{{ case_study.benchmark_start_date }} to {{ case_study.benchmark_end_date }}
                    (Bench)<br>
                    {{ case_study.post_start_date }} to {{ case_study.post_end_date }} (Post)</dd>

                <dt class="col-sm-3 text-secondary text-uppercase small fw-bold">Properties</dt>
                <dd class="col-sm-9">{{ case_study.ga4_property_id }} / {{ case_study.gsc_site_url }}</dd>
            </dl>

            <form method="POST">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">

                <div class="d-flex justify-content-center gap-3">
                    <a href="{{ url_for('wizard.step', id=case_study.id, step=4) }}"
                        class="btn btn-outline-secondary">Edit Settings</a>
                    <button type="submit" class="btn btn-success btn-lg px-5 shadow">Start Tracking</button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}