<?php
$wizard_steps = isset($wizard_steps) && is_array($wizard_steps) ? $wizard_steps : [];
$wizard_steps = array_values($wizard_steps);
$step_count = count($wizard_steps);
if ($step_count <= 0) {
    $wizard_steps = [
        ['title' => __('Step', 'nexdirectory'), 'icon' => 'fa-circle', 'description' => __('Setup step.', 'nexdirectory')],
    ];
    $step_count = 1;
}
$initial_step = isset($step) ? (int) $step : 1;
if ($initial_step < 1 || $initial_step > $step_count) {
    $initial_step = 1;
}
$initial_done = !empty($done);
$brand_name = isset($brand_name) ? (string) $brand_name : __('NexDirectory', 'nexdirectory');
$plural_label = isset($plural_label) ? (string) $plural_label : __('Listings', 'nexdirectory');
$operating_mode = isset($operating_mode) ? (string) $operating_mode : 'user';
$site_name = isset($site_name) ? (string) $site_name : '';
$accent_color = isset($accent_color) ? (string) $accent_color : '#4F46E5';

$save_preferences_action = isset($save_preferences_action) ? (string) $save_preferences_action : admin_url('admin-post.php');
$onboarding_step_three_url = admin_url('admin.php?page=eep-onboarding&step=3');
$onboarding_step_five_url = admin_url('admin.php?page=eep-onboarding&step=5');
$dashboard_url = isset($dashboard_url) ? (string) $dashboard_url : admin_url('admin.php?page=eep-dashboard');
$is_demo_mode = !empty($is_demo_mode);
$demo_event_limit = max(1, (int) ($demo_event_limit ?? 3));
$demo_event_used = max(0, (int) ($demo_event_used ?? 0));
$demo_event_remaining = max(0, (int) ($demo_event_remaining ?? max(0, $demo_event_limit - $demo_event_used)));
$demo_event_limit_reached = !empty($demo_event_limit_reached);
$upgrade_url = isset($upgrade_url) ? (string) $upgrade_url : 'https://nexdirectory.com/purchase';
$license_url = isset($license_url) ? (string) $license_url : admin_url('admin.php?page=eep-settings#eep-tab-monetization--boost-packages');
$license_label = isset($license_label) ? (string) $license_label : __('Activate License', 'nexdirectory');
$demo_import_count = 50;

$wizard_payload = [
    'step' => $initial_step,
    'isComplete' => $initial_done,
    'operatingMode' => $operating_mode,
    'siteName' => $site_name,
    'accentColor' => $accent_color,
    'brandName' => $brand_name,
    'pluralLabel' => $plural_label,
    'stepsData' => $wizard_steps,
    'stepCount' => $step_count,
];
?>

<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
<style>
    .eep-onboarding-modern [x-cloak] { display: none !important; }
</style>

<script>
document.addEventListener('alpine:init', () => {
    const seed = <?php echo wp_json_encode($wizard_payload); ?>;
    Alpine.data('onboardingWizard', () => ({
        step: Number(seed.step || 1),
        isComplete: Boolean(seed.isComplete),
        showNotice: true,
        importBusy: false,
        homepageBusy: false,
        operatingMode: String(seed.operatingMode || 'user'),
        siteName: String(seed.siteName || ''),
        accentColor: String(seed.accentColor || '#4f46e5'),
        brandName: String(seed.brandName || 'NexDirectory'),
        pluralLabel: String(seed.pluralLabel || 'Listings'),
        stepsData: Array.isArray(seed.stepsData) && seed.stepsData.length ? seed.stepsData : [{ title: 'Step', icon: 'fa-circle', description: 'Setup step.' }],

        get maxStep() {
            return this.stepsData.length;
        },

        get currentStepData() {
            return this.stepsData[Math.max(0, this.step - 1)] || this.stepsData[0];
        },

        get progressWidth() {
            if (this.maxStep <= 1) {
                return 0;
            }
            return ((this.step - 1) / (this.maxStep - 1)) * 100;
        },

        nextStep() {
            if (this.step === 1 && this.$refs.step1SaveForm) {
                if (typeof this.$refs.step1SaveForm.requestSubmit === 'function') {
                    this.$refs.step1SaveForm.requestSubmit();
                } else {
                    this.$refs.step1SaveForm.submit();
                }
                return;
            }

            if (this.step === 3 && this.$refs.step3SaveForm) {
                if (typeof this.$refs.step3SaveForm.requestSubmit === 'function') {
                    this.$refs.step3SaveForm.requestSubmit();
                } else {
                    this.$refs.step3SaveForm.submit();
                }
                return;
            }

            if (this.step < this.maxStep) {
                this.step++;
                window.scrollTo({ top: 0, behavior: 'smooth' });
            }
        },

        prevStep() {
            if (this.step > 1) {
                this.step--;
                window.scrollTo({ top: 0, behavior: 'smooth' });
            }
        },

        setStep(newStep) {
            const parsed = Number(newStep || 1);
            if (parsed >= 1 && parsed <= this.maxStep) {
                this.step = parsed;
            }
        },

        markComplete() {
            this.isComplete = true;
        },

        getStepClasses(i) {
            if (i < this.step) {
                return 'bg-indigo-600 text-white shadow-md cursor-pointer hover:bg-indigo-700';
            }
            if (i === this.step) {
                return 'bg-white border-2 border-indigo-600 text-indigo-600 shadow-md ring-4 ring-indigo-50 cursor-pointer';
            }
            return 'bg-white border-2 border-slate-200 text-slate-400 hover:border-slate-300 cursor-pointer';
        }
    }));
});
</script>
<script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>

<div class="wrap eep-onboarding-modern" x-data="onboardingWizard" x-cloak>
    <?php echo wp_kses_post((string) $this->render_notice()); ?>

    <div class="max-w-4xl mx-auto space-y-6 py-4">
        <div x-show="showNotice" x-transition class="bg-blue-50 border-l-4 border-blue-500 p-4 rounded-r-md flex justify-between items-start shadow-sm">
            <div class="flex">
                <div class="flex-shrink-0">
                    <i class="fas fa-info-circle text-blue-500 mt-1"></i>
                </div>
                <div class="ml-3">
                    <p class="text-sm text-blue-700"><?php esc_html_e('Welcome to the onboarding experience. Complete the steps below to configure your platform.', 'nexdirectory'); ?></p>
                </div>
            </div>
            <button @click="showNotice = false" class="text-blue-500 hover:text-blue-700 transition"><i class="fas fa-times"></i></button>
        </div>

        <?php if ($is_demo_mode) : ?>
            <section class="bg-orange-50 border border-orange-200 rounded-2xl shadow-sm p-5 flex flex-col md:flex-row md:items-center md:justify-between gap-4">
                <div>
                    <h2 class="text-lg font-bold text-orange-900 mb-1"><?php echo esc_html(sprintf(__('Demo Mode Active: %d Free Events', 'nexdirectory'), $demo_event_limit)); ?></h2>
                    <p class="text-sm text-orange-800"><?php echo esc_html(sprintf(__('This install starts in demo mode. Publish up to %d events, then upgrade or activate your Freemius license to continue.', 'nexdirectory'), $demo_event_limit)); ?></p>
                    <p class="mt-2 inline-flex items-center rounded-full border border-orange-300 bg-white/70 px-3 py-1 text-xs font-bold text-orange-900">
                        <?php
                        echo esc_html(
                            sprintf(
                                __('Used %1$d of %2$d (Remaining: %3$d)', 'nexdirectory'),
                                $demo_event_used,
                                $demo_event_limit,
                                $demo_event_remaining
                            )
                        );
                        ?>
                    </p>
                    <p class="mt-2 text-xs font-medium text-orange-700"><?php esc_html_e('Demo imports stay fully visible but are read-only on free mode. Duplicate any demo event to create an editable copy that counts toward your free limit.', 'nexdirectory'); ?></p>
                </div>
                <div class="flex flex-wrap gap-2">
                    <a href="<?php echo esc_url($upgrade_url); ?>" target="_blank" rel="noopener noreferrer" class="inline-flex items-center justify-center px-4 py-2 rounded-lg text-sm font-semibold text-white bg-indigo-600 hover:bg-indigo-700 transition-colors"><?php esc_html_e('Buy / Upgrade', 'nexdirectory'); ?></a>
                    <a href="<?php echo esc_url($license_url); ?>" class="inline-flex items-center justify-center px-4 py-2 rounded-lg text-sm font-semibold text-slate-700 bg-white border border-slate-300 hover:bg-slate-50 transition-colors"><?php echo esc_html($license_label); ?></a>
                </div>
            </section>
        <?php endif; ?>

        <header class="bg-white rounded-2xl shadow-sm p-8 border border-slate-200 text-center relative overflow-hidden">
            <div class="absolute -top-24 -right-24 w-48 h-48 bg-indigo-50 rounded-full blur-3xl opacity-60 pointer-events-none"></div>
            <span class="inline-block py-1 px-3 rounded-full bg-indigo-100 text-indigo-700 text-xs font-bold tracking-wider uppercase mb-4"><?php esc_html_e('Launch Wizard', 'nexdirectory'); ?></span>
            <h1 class="text-3xl sm:text-4xl font-extrabold text-slate-900 mb-4 tracking-tight"><span x-text="brandName"></span> <?php esc_html_e('Onboarding', 'nexdirectory'); ?></h1>
            <p class="text-lg text-slate-500 max-w-2xl mx-auto" x-text="`Complete setup steps to launch your ${brandName} workflow for ${pluralLabel}.`"></p>
        </header>

        <section class="bg-white rounded-2xl shadow-sm p-6 sm:p-8 border border-slate-200">
            <div class="relative max-w-2xl mx-auto">
                <div class="absolute top-5 left-0 w-full h-1 bg-slate-100 -translate-y-1/2 rounded-full z-0"></div>
                <div class="absolute top-5 left-0 h-1 bg-indigo-600 -translate-y-1/2 rounded-full z-0 transition-all duration-500 ease-out" :style="`width: ${progressWidth}%`"></div>

                <ul class="flex w-full justify-between relative z-10">
                    <template x-for="i in maxStep" :key="i">
                        <li class="flex flex-col items-center group">
                            <button @click="setStep(i)" class="w-10 h-10 rounded-full flex items-center justify-center transition-all duration-300 focus:outline-none focus:ring-4 focus:ring-indigo-100" :class="getStepClasses(i)" :aria-current="step === i ? 'step' : 'false'">
                                <span x-show="i < step"><i class="fas fa-check"></i></span>
                                <span x-show="i >= step" class="font-bold text-sm" x-text="i"></span>
                            </button>
                            <span class="mt-3 text-xs font-bold uppercase tracking-widest hidden sm:block transition-colors" :class="step === i ? 'text-indigo-600' : (i < step ? 'text-slate-600' : 'text-slate-400')" x-text="'Step ' + i"></span>
                        </li>
                    </template>
                </ul>
            </div>
        </section>

        <section class="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden transform transition-all">
            <div class="p-8 sm:p-10">
                <div class="flex flex-col sm:flex-row sm:items-center gap-4 mb-6">
                    <div class="flex-shrink-0 w-12 h-12 bg-indigo-50 text-indigo-600 rounded-xl flex items-center justify-center">
                        <i class="fas text-xl" :class="currentStepData.icon || 'fa-circle'"></i>
                    </div>
                    <div>
                        <h2 class="text-2xl font-bold text-slate-900" x-text="`Step ${step}: ${currentStepData.title}`"></h2>
                    </div>
                </div>

                <p class="text-slate-600 text-lg leading-relaxed mb-8" x-text="currentStepData.description"></p>

                <div x-show="step === 1" x-cloak class="space-y-4 mb-8">
                    <label class="relative flex cursor-pointer rounded-xl border bg-white p-5 shadow-sm transition-all" :class="operatingMode === 'user' ? 'border-indigo-600 ring-1 ring-indigo-600 bg-indigo-50/30' : 'border-slate-200 hover:border-slate-300 hover:bg-slate-50'">
                        <input type="radio" name="operatingMode" value="user" x-model="operatingMode" class="sr-only">
                        <span class="flex flex-1">
                            <span class="flex flex-col">
                                <span class="block text-base font-bold text-slate-900"><?php esc_html_e('User-Generated Event Platforms (Default)', 'nexdirectory'); ?></span>
                                <span class="mt-1 flex items-center text-sm text-slate-500"><?php esc_html_e('Allows multiple users or vendors to register, submit, and manage their own events.', 'nexdirectory'); ?></span>
                            </span>
                        </span>
                        <i class="fas fa-check-circle text-indigo-600 text-2xl ml-4 self-center transition-opacity" :class="operatingMode === 'user' ? 'opacity-100' : 'opacity-0'"></i>
                    </label>

                    <label class="relative flex cursor-pointer rounded-xl border bg-white p-5 shadow-sm transition-all" :class="operatingMode === 'single' ? 'border-indigo-600 ring-1 ring-indigo-600 bg-indigo-50/30' : 'border-slate-200 hover:border-slate-300 hover:bg-slate-50'">
                        <input type="radio" name="operatingMode" value="single" x-model="operatingMode" class="sr-only">
                        <span class="flex flex-1">
                            <span class="flex flex-col">
                                <span class="block text-base font-bold text-slate-900"><?php esc_html_e('Single-Organisation Event Sites', 'nexdirectory'); ?></span>
                                <span class="mt-1 flex items-center text-sm text-slate-500"><?php esc_html_e('Only administrators can create and manage events.', 'nexdirectory'); ?></span>
                            </span>
                        </span>
                        <i class="fas fa-check-circle text-indigo-600 text-2xl ml-4 self-center transition-opacity" :class="operatingMode === 'single' ? 'opacity-100' : 'opacity-0'"></i>
                    </label>

                    <form x-ref="step1SaveForm" method="post" action="<?php echo esc_url($save_preferences_action); ?>" class="hidden">
                        <input type="hidden" name="action" value="eep_save_onboarding_preferences">
                        <input type="hidden" name="eep_onboarding_step" value="2">
                        <?php wp_nonce_field('eep_onboarding_save_preferences', 'eep_onboarding_save_nonce'); ?>
                        <input type="hidden" name="eep_onboarding_operating_mode" :value="operatingMode">
                    </form>
                </div>

                <div x-show="step === 2" x-cloak class="mb-8">
                    <form method="post" action="<?php echo esc_url($save_preferences_action); ?>" class="inline-block">
                        <input type="hidden" name="action" value="eep_generate_pages">
                        <input type="hidden" name="eep_redirect_to" value="<?php echo esc_attr($onboarding_step_three_url); ?>">
                        <?php wp_nonce_field('eep_generate_pages', 'eep_generate_pages_nonce'); ?>
                        <button type="submit" class="inline-flex items-center justify-center px-6 py-3 rounded-lg text-white bg-indigo-600 hover:bg-indigo-700 shadow-md font-semibold transition-all">
                            <i class="fas fa-file-medical mr-2"></i> <?php esc_html_e('Create Core Pages', 'nexdirectory'); ?>
                        </button>
                    </form>
                </div>

                <div x-show="step === 3" x-cloak class="space-y-6 mb-8 max-w-lg">
                    <form x-ref="step3SaveForm" method="post" action="<?php echo esc_url($save_preferences_action); ?>" class="space-y-6">
                        <input type="hidden" name="action" value="eep_save_onboarding_preferences">
                        <input type="hidden" name="eep_onboarding_step" value="4">
                        <?php wp_nonce_field('eep_onboarding_save_preferences', 'eep_onboarding_save_nonce'); ?>

                        <div>
                            <label class="block text-sm font-semibold text-slate-700 mb-2"><?php esc_html_e('Site Name', 'nexdirectory'); ?></label>
                            <input type="text" x-model="siteName" name="eep_onboarding_site_name" class="w-full rounded-lg border-slate-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 px-4 py-2 border outline-none" placeholder="<?php esc_attr_e('E.g. My Event Directory', 'nexdirectory'); ?>">
                        </div>
                        <div>
                            <label class="block text-sm font-semibold text-slate-700 mb-2"><?php esc_html_e('Brand Accent Color', 'nexdirectory'); ?></label>
                            <div class="flex items-center space-x-4">
                                <input type="color" x-model="accentColor" name="eep_onboarding_accent_color" class="h-12 w-12 rounded-lg border border-slate-200 cursor-pointer p-0.5 outline-none">
                                <span class="text-sm text-slate-600 font-mono bg-slate-100 px-3 py-1 rounded-md" x-text="accentColor.toUpperCase()"></span>
                            </div>
                        </div>
                        <input type="hidden" name="eep_onboarding_operating_mode" :value="operatingMode">
                    </form>
                </div>

                <div x-show="step === 4" x-cloak class="mb-8">
                    <div class="bg-amber-50 border border-amber-200 rounded-xl p-4 flex items-start mb-6">
                        <i class="fas fa-lightbulb text-amber-500 text-lg mt-0.5 mr-3"></i>
                        <p class="text-sm text-amber-800"><strong><?php esc_html_e('Note:', 'nexdirectory'); ?></strong> <?php esc_html_e('You can remove demo entries later after replacing them with live content.', 'nexdirectory'); ?></p>
                    </div>
                    <form method="post" action="<?php echo esc_url($save_preferences_action); ?>" class="inline-block" @submit="importBusy = true">
                        <input type="hidden" name="action" value="eep_import_demo_events">
                        <input type="hidden" name="eep_demo_count" value="<?php echo esc_attr((string) $demo_import_count); ?>">
                        <input type="hidden" name="eep_demo_profile" :value="operatingMode === 'single' ? 'events_single_organisation' : 'events'">
                        <input type="hidden" name="eep_demo_apply_presets" value="1">
                        <input type="hidden" name="eep_redirect_to" value="<?php echo esc_attr($onboarding_step_five_url); ?>">
                        <?php wp_nonce_field('eep_import_demo_events_nonce', 'eep_import_demo_nonce'); ?>
                        <button type="submit" class="inline-flex items-center justify-center px-6 py-3 rounded-lg text-white bg-indigo-600 hover:bg-indigo-700 shadow-md font-semibold transition-all disabled:opacity-70 disabled:cursor-not-allowed" :disabled="importBusy">
                            <span x-show="!importBusy" class="inline-flex items-center">
                                <i class="fas fa-cloud-download-alt mr-2"></i> <?php esc_html_e('Import Demo Content', 'nexdirectory'); ?>
                            </span>
                            <span x-show="importBusy" class="inline-flex items-center">
                                <svg class="animate-spin -ml-1 mr-2 h-4 w-4 text-white" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"></path>
                                </svg>
                                <?php esc_html_e('Importing Demo Content...', 'nexdirectory'); ?>
                            </span>
                        </button>
                    </form>
                </div>

                <div x-show="step === 5" x-cloak class="mb-8">
                    <div class="bg-slate-50 p-6 rounded-xl border border-slate-200 shadow-inner">
                        <h4 class="text-lg font-bold text-slate-800 mb-3 flex items-center"><i class="fas fa-house text-indigo-500 mr-2 bg-indigo-100 p-2 rounded-lg"></i><?php esc_html_e('Set Your Homepage', 'nexdirectory'); ?></h4>
                        <p class="text-slate-600 leading-relaxed text-sm mb-4"><?php esc_html_e('Recommended: use the What\'s New page as your static homepage so visitors see fresh content first.', 'nexdirectory'); ?></p>
                        <form method="post" action="<?php echo esc_url($save_preferences_action); ?>" class="inline-block" @submit="homepageBusy = true">
                            <input type="hidden" name="action" value="eep_set_onboarding_homepage">
                            <input type="hidden" name="eep_onboarding_step" value="5">
                            <?php wp_nonce_field('eep_set_onboarding_homepage', 'eep_set_onboarding_homepage_nonce'); ?>
                            <button type="submit" class="inline-flex items-center justify-center px-6 py-3 rounded-lg text-white bg-indigo-600 hover:bg-indigo-700 shadow-md font-semibold transition-all disabled:opacity-70 disabled:cursor-not-allowed" :disabled="homepageBusy">
                                <span x-show="!homepageBusy" class="inline-flex items-center">
                                    <i class="fas fa-check mr-2"></i> <?php esc_html_e('Set "What\'s New" as Homepage', 'nexdirectory'); ?>
                                </span>
                                <span x-show="homepageBusy" class="inline-flex items-center">
                                    <svg class="animate-spin -ml-1 mr-2 h-4 w-4 text-white" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"></path>
                                    </svg>
                                    <?php esc_html_e('Saving Homepage...', 'nexdirectory'); ?>
                                </span>
                            </button>
                        </form>
                    </div>
                </div>

                <div x-show="step === 6" x-cloak class="mb-8">
                    <div class="bg-slate-900 rounded-2xl shadow-xl p-8 sm:p-10 border border-slate-800 text-center relative overflow-hidden">
                        <div class="mx-auto w-16 h-16 bg-green-500/20 text-green-400 rounded-full flex items-center justify-center mb-6">
                            <i class="fas fa-flag-checkered text-2xl"></i>
                        </div>
                        <h3 class="text-2xl font-bold text-white mb-3"><?php esc_html_e('Ready to Launch?', 'nexdirectory'); ?></h3>
                        <p class="text-slate-300 mb-8 max-w-xl mx-auto"><?php esc_html_e('Your setup is complete. Mark onboarding done, then head to your dashboard.', 'nexdirectory'); ?></p>

                        <div class="flex flex-wrap justify-center gap-3">
                            <form method="post" action="<?php echo esc_url($save_preferences_action); ?>" @submit="markComplete">
                                <input type="hidden" name="action" value="eep_mark_onboarding_complete">
                                <?php wp_nonce_field('eep_mark_onboarding_complete', 'eep_onboarding_nonce'); ?>
                                <button type="submit" class="inline-flex items-center px-6 py-3 border border-transparent text-sm font-bold rounded-xl shadow-lg text-slate-900 bg-gradient-to-r from-green-400 to-emerald-500 hover:from-green-500 hover:to-emerald-600 transition-all">
                                    <span x-text="isComplete ? '<?php echo esc_js(__('Mark Complete Again', 'nexdirectory')); ?>' : '<?php echo esc_js(__('Mark Onboarding Complete', 'nexdirectory')); ?>'"></span>
                                    <i class="fas fa-rocket ml-2"></i>
                                </button>
                            </form>
                            <a href="<?php echo esc_url($dashboard_url); ?>" class="inline-flex items-center px-6 py-3 rounded-xl text-sm font-bold text-white bg-indigo-600 hover:bg-indigo-700 shadow-lg transition-all">
                                <?php esc_html_e('Visit Dashboard', 'nexdirectory'); ?>
                                <i class="fas fa-arrow-right ml-2"></i>
                            </a>
                        </div>

                        <div x-show="isComplete" x-transition class="mt-6 flex justify-center items-center text-green-300 text-sm font-medium bg-green-400/10 inline-flex mx-auto px-4 py-2 rounded-full">
                            <i class="fas fa-check-circle mr-2"></i> <?php esc_html_e('Onboarding is already marked complete.', 'nexdirectory'); ?>
                        </div>
                    </div>
                </div>

                <div class="pt-2 flex justify-end" x-show="step < maxStep">
                    <button @click="nextStep" class="inline-flex items-center px-6 py-3 rounded-lg text-sm font-semibold text-white bg-indigo-600 hover:bg-indigo-700 shadow-md transition-all">
                        <?php esc_html_e('Next Step', 'nexdirectory'); ?> <i class="fas fa-arrow-right ml-2"></i>
                    </button>
                </div>
            </div>

            <div class="bg-slate-50 px-8 py-5 border-t border-slate-200 flex justify-start items-center">
                <button @click="prevStep" class="inline-flex items-center px-4 py-2 text-sm font-semibold text-slate-600 hover:text-slate-900 transition-colors" :disabled="step === 1" :class="step === 1 ? 'invisible' : ''">
                    <i class="fas fa-arrow-left mr-2"></i> <?php esc_html_e('Previous Step', 'nexdirectory'); ?>
                </button>
            </div>
        </section>
    </div>
</div>
