{% extends "admin_base.html" %}

{% block extra_head %}
{% endblock %}

{% block page_title %}Import competitors{% endblock %}

{% block admin_content %}
<div class="mx-auto w-full max-w-3xl space-y-5 p-4 sm:p-6" data-plugin="seo-tool" id="seo-serp-import-root">
    <div class="space-y-4 rounded-xl border border-divider bg-surface p-5 shadow-sm sm:p-6">
        <h1 class="text-xl font-semibold">Import competitors from Google</h1>
        <p id="seo-serp-import-status" class="text-muted" role="status" aria-live="polite">Preparing import…</p>
        <p id="seo-serp-import-detail" class="text-sm text-muted" hidden></p>
        <div id="seo-serp-import-actions" class="flex flex-wrap gap-2" hidden>
            <button type="button" class="blocks-button blocks-button-primary" id="seo-serp-import-confirm">Add competitors</button>
            <button type="button" class="blocks-button blocks-button-secondary" id="seo-serp-import-cancel">Cancel</button>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="/plugins/seo-tool/assets/js/seo_common.js"></script>
<script src="/plugins/seo-tool/assets/js/serp_import.js"></script>
{% endblock %}