{% extends "admin_base.html" %}
{% import "macros/admin_management_header.html" as mh %}
{% import "macros/modal.html" as modal %}
{% import "macros/loading_spinner.html" as spinner %}

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

{% block page_title %}Guided Tour{% endblock %}

{% block admin_content %}
{{ mh::management_header_open(
    title="Guided Tour",
    subtitle="Configure one-time mobile onboarding for the storefront and admin panel."
) }}
<div class="mb-4 flex flex-wrap items-center gap-2">
    <span id="gt-version-label" class="text-sm text-muted">Version: —</span>
    <button type="button" class="blocks-button blocks-button-secondary blocks-button-sm" id="gt-preview-btn">
        <i class="fas fa-mobile-alt" aria-hidden="true"></i> Preview tour
    </button>
    <button type="button" class="blocks-button blocks-button-primary blocks-button-sm" id="gt-publish-btn">
        <i class="fas fa-upload" aria-hidden="true"></i> Publish tour
    </button>
</div>
{{ mh::management_header_close() }}

<div id="gt-feedback" class="mb-3 text-sm" role="status" aria-live="polite" aria-atomic="true"></div>
<div class="mb-4 flex gap-2 border-b border-divider" role="tablist" aria-label="Tour area">
    <button id="gt-tab-storefront" type="button" class="gt-area-tab border-b-2 border-brand px-4 py-2 font-semibold text-brand" data-area="storefront" role="tab" aria-controls="guided-tour-panel" aria-selected="true">Storefront</button>
    <button id="gt-tab-admin" type="button" class="gt-area-tab border-b-2 border-transparent px-4 py-2 font-semibold text-muted" data-area="admin" role="tab" aria-controls="guided-tour-panel" aria-selected="false" tabindex="-1">Admin</button>
</div>

<div id="guided-tour-panel" role="tabpanel" aria-labelledby="gt-tab-storefront" tabindex="0">
    <div id="guided-tour-steps-list" class="min-w-0" data-config-url="/plugins/guided-tour/assets/admin/steps_list.json">
        <table class="blocks-admin-table responsive-table w-full">
            <thead></thead>
            <tbody>
                {{ spinner::table_skeleton(colspan=7, lines=3, label="Loading steps…") }}
            </tbody>
        </table>
    </div>
</div>

{{ modal::modal(id="guided-tour-step-modal", title='<h3 id="guided-tour-step-modal-title">Add step</h3>', body_html='<div id="guided-tour-step-form-fields"></div>', extra_class="w-full max-w-xl") }}
{% endblock %}

{% block scripts %}
<script src="/plugins/guided-tour/assets/js/guided-tour-admin.js" defer></script>
{% endblock %}