<?php if ( ! defined( 'ABSPATH' ) ) exit; ?>
<div class="max-w-3xl mx-auto p-4 -ms-20px">
    <?php \RistrettoApps\Spawnster\Helpers\ComponentView::render('components/stepper', ['doneSteps' => [1,2]]) ?>
</div>
<div class="relative">
    <div id="loader" class="absolute bg-white bg-opacity-60 z-10 h-full w-full flex items-center justify-center hidden">
        <div class="w-full flex justify-center items-center mt-12 gap-8 text-indigo-700">
            <section class="h-56 w-56 flex justify-center items-center text-indigo-700">
                <div class="relative flex flex-col justify-center items-center select-none">
                    <svg class="relative flex w-48 h-48 items-center justify-center transform -rotate-90">
                        <circle class="text-slate-400" stroke="currentColor" stroke-width="4" cx="50%" cy="50%" r="48" fill="transparent" />
                        <circle cx="50%" cy="50%" r="48" stroke="currentColor" id="robin" stroke-linecap="round" stroke-width="4" fill="transparent" class="text-indigo-500 transition-all duration-500" />
                    </svg>
                    <span class="absolute text-2xl top-20" id="robin1"></span>
                    <div class="flex gap-2">
                        <div class="w-5 h-5 rounded-full animate-pulse bg-indigo-600"></div>
                        <div class="w-5 h-5 rounded-full animate-pulse bg-indigo-600"></div>
                        <div class="w-5 h-5 rounded-full animate-pulse bg-indigo-600"></div>
                        <div class="w-5 h-5 rounded-full animate-pulse bg-indigo-600"></div>
                        <div class="w-5 h-5 rounded-full animate-pulse bg-indigo-600"></div>
                    </div>
                </div>
            </section>
        </div>
    </div>

    <?php \RistrettoApps\Spawnster\Helpers\ComponentView::render('components/success_modal', []) ?>
    <?php \RistrettoApps\Spawnster\Helpers\ComponentView::render('components/failure_modal', []) ?>

    <section class="text-gray-600 body-font">
        <div class="flex items-center justify-center gap-3 mb-5">
            <img src="<?php echo esc_url(\RistrettoApps\Spawnster\Base\Constants::logo()); ?>" alt="Spawnster Logo" class="w-12 h-12">
            <span class="block text-sm font-medium tracking-widest text-center uppercase dark:text-violet-600">SPAWNSTER</span>
        </div>
        <h2 class="text-3xl font-bold text-center dark:text-gray-900 pb-5">Let's build your pages!</h2>
        <h4 class="text-3xl font-bold text-center dark:text-gray-900 pb-5">Click on any title or description to change it before generating</h4>
        <form method="post" id="wizard_form" name="wizard_form">
            <?php wp_nonce_field('content-generation-wizard'); ?>
            <div class="container wizard_container px-5 mx-auto flex flex-wrap">
                <?php foreach ($pages as $i => $page): ?>
                    <div class="flex relative pb-10 sm:items-center md:w-2/3 mx-auto">
                        <div class="h-full w-6 absolute inset-0 flex items-center justify-center">
                            <div class="h-full w-1 bg-gray-200 pointer-events-none"></div>
                        </div>
                        <div class="counter cursor-pointer flex-shrink-0 w-6 h-6 rounded-full mt-10 sm:mt-0 inline-flex items-center justify-center bg-indigo-500 text-white relative title-font font-medium text-sm" data-id="<?php echo esc_attr($i+1); ?>"><?php echo esc_attr($i+1); ?></div>
                        <div class="flex-grow md:pl-8 pl-6 flex sm:items-center items-start flex-col sm:flex-row">
                            <div class="flex-shrink-0 w-24 h-24 bg-indigo-100 text-indigo-500 rounded-full inline-flex items-center justify-center">
                                <?php echo wp_kses($page['svg'], [
                                    'svg' => [
                                        'xmlns' => [],
                                        'viewbox' => [],
                                        'fill' => [],
                                        'class' => [],
                                    ],
                                    'path' => [
                                        'fill-rule' => [],
                                        'clip-rule' => [],
                                        'd' => [],
                                    ],
                                ]); ?>
                            </div>
                            <div class="flex-grow sm:pl-6 mt-6 sm:mt-0">
                                <input type="hidden" name="page_id[]" value="0" id="page_id_<?php echo esc_attr($i+1); ?>">
                                <textarea rows="1" name="page_name[]" id="editable-text-area-with-value" class="page_name text-xl text-gray-900 block w-full pr-10 p-1 -ml-1 rounded resize-none border-transparent bg-transparent cursor-pointer hover:bg-gray-100 focus:bg-transparent focus:outline-none focus:ring focus:ring-blue-500/50 focus:border-blue-500 group-focus-within:border-blue-500" placeholder="Page name"><?php echo esc_textarea($page['label']); ?></textarea>
                                <textarea rows="2" name="page_description[]" id="editable-text-area-with-value" class="block w-full p-1 -ml-1 rounded resize-none border-transparent bg-transparent cursor-pointer hover:bg-gray-100 focus:bg-transparent focus:outline-none focus:ring focus:ring-blue-500/50 focus:border-blue-500 group-focus-within:border-blue-500" placeholder="<?php echo esc_attr(\RistrettoApps\Spawnster\Base\DefaultPages::PLACEHOLDER); ?>"></textarea>
                            </div>
                        </div>
                    </div>
                <?php endforeach; ?>
                <?php \RistrettoApps\Spawnster\Helpers\ComponentView::render('components/wizard_add_generate_button', []) ?>
            </div>
        </form>
    </section>
</div>
