{% 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-primary" style="--p: {{ progress }}%; width: var(--p);"></div>
            </div>
        </div>

        <div class="card border-0 shadow-sm p-4">
            <h2 class="h4 fw-bold mb-4">Step 4: Select KPIs</h2>
            <p class="text-muted mb-4">Choose the metrics you want to track for this strategy.</p>

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

                <div class="row g-3">
                    <!-- GSC Metrics -->
                    <div class="col-md-6">
                        <div class="card h-100 border bg-light">
                            <div class="card-header bg-white fw-bold text-primary">Google Search Console</div>
                            <div class="card-body">
                                <div class="form-check mb-2">
                                    <input class="form-check-input" type="checkbox" name="metrics" value="gsc:clicks"
                                        id="gsc_clicks" checked>
                                    <label class="form-check-label" for="gsc_clicks">Clicks</label>
                                </div>
                                <div class="form-check mb-2">
                                    <input class="form-check-input" type="checkbox" name="metrics"
                                        value="gsc:impressions" id="gsc_imp" checked>
                                    <label class="form-check-label" for="gsc_imp">Impressions</label>
                                </div>
                                <div class="form-check mb-2">
                                    <input class="form-check-input" type="checkbox" name="metrics" value="gsc:ctr"
                                        id="gsc_ctr">
                                    <label class="form-check-label" for="gsc_ctr">CTR</label>
                                </div>
                                <div class="form-check mb-2">
                                    <input class="form-check-input" type="checkbox" name="metrics" value="gsc:position"
                                        id="gsc_pos">
                                    <label class="form-check-label" for="gsc_pos">Average Position</label>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- GA4 Metrics -->
                    <div class="col-md-6">
                        <div class="card h-100 border bg-light">
                            <div class="card-header bg-white fw-bold text-warning">Google Analytics 4</div>
                            <div class="card-body">
                                <div class="form-check mb-2">
                                    <input class="form-check-input" type="checkbox" name="metrics" value="ga4:sessions"
                                        id="ga4_sess" checked>
                                    <label class="form-check-label" for="ga4_sess">Sessions</label>
                                </div>
                                <div class="form-check mb-2">
                                    <input class="form-check-input" type="checkbox" name="metrics"
                                        value="ga4:conversions" id="ga4_conv" checked>
                                    <label class="form-check-label" for="ga4_conv">Conversions</label>
                                </div>
                                <div class="form-check mb-2">
                                    <input class="form-check-input" type="checkbox" name="metrics"
                                        value="ga4:engagement_rate" id="ga4_eng">
                                    <label class="form-check-label" for="ga4_eng">Engagement Rate</label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="d-flex justify-content-between mt-4">
                    <a href="{{ url_for('wizard.step', id=case_study.id, step=3) }}"
                        class="btn btn-outline-secondary">Back</a>
                    <button type="submit" class="btn btn-primary px-5">Next Step <i
                            class="bi bi-arrow-right ms-2"></i></button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}