{% extends "admin_base.html" %}
{% import "macros/admin_crud_list.html" as crud %}
{% import "macros/modal.html" as modal %}
{% import "macros/loading_spinner.html" as spinner %}

{% block extra_head %}
{% include "partials/admin_vendor_chartjs.html" %}
{% endblock %}

{% block page_title %}Keyword Tracking{% endblock %}

{% block admin_content %}
<div class="mx-auto w-full max-w-7xl space-y-5 p-4 sm:p-6" data-plugin="seo-tool" id="seo-keywords-root">
    {{ crud::shell_open(config_url="/plugins/seo-tool/assets/admin/keywords_list.json", mount_id="seo-keywords-list", custom_mount=true) }}

    <div class="flex flex-wrap items-center gap-3" data-crud-toolbar-extra data-crud-toolbar-placement="below">
        <label for="seo-kw-domain-filter" class="text-sm font-medium">Filter by domain</label>
        <select id="seo-kw-domain-filter" class="blocks-input w-full sm:w-auto sm:min-w-64" disabled>
            <option value="">Loading domains…</option>
        </select>
    </div>

    <div class="min-w-0">
        <table class="w-full">
            <thead></thead>
            <tbody>
                {{ spinner::table_skeleton(colspan=5, lines=3, label="Loading keywords…") }}
            </tbody>
        </table>
    </div>

    {{ crud::shell_close() }}

    <div class="space-y-3 rounded-xl border border-divider bg-surface p-4 shadow-sm sm:p-5" id="seo-kw-chart-wrap" hidden>
        <h2 class="text-lg font-semibold">Rank history</h2>
        <canvas id="seo-kw-chart" height="180"></canvas>
    </div>
</div>

<script type="application/json" id="seo-domains-json">[]</script>

{{ modal::modal(id="seoKwModal", title='<span id="seo-kw-modal-title">Track keyword</span>', body_html='<div id="seo-kw-form-fields"></div>') }}
{% endblock %}

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