<!-- Import Process Section -->
<section class="flex-templates-import-process flex-free-import-process" style="display: none;">
    <!-- Step 1: Confirm Template Import -->
    <div id="free-import-process-confirm">
        <div class="flex-model-div-main container pt-5">
            <div class="row template-education" style="justify-content: space-between;">
                <div class="col-lg-6">
                    <div class="template-education-image">
                        <img id="free-import-process-mobile-image" src="" alt="Template Mobile Image" style="">
                    </div>
                </div>
                <div
                    class="col-lg-6 template-education-contents text-center align-self-center pr-lg-4  mr-0 pr-3 pt-lg-0 pt-5">
                    <div class="flex-main-dive">
                        <h3 class="text-center steps-done" id="free-import-process-title"></h3>
                        <p id="free-import-process-description"></p>
                        <div class="flex-modal-btns text-center">

                            <?php
                            $is_premium = defined('FLEXIMP_PREMIUM_THEME') && FLEXIMP_PREMIUM_THEME === true;
                            $is_premium_user = get_option('fleximp_is_premium', false);

                            if (!$is_premium || $is_premium_user): ?>

                                <button id="free-import-process-confirm-btn" class="btn view-site text-white flex-import-btn"
                                    type="button">
                                    Import Demo
                                </button>

                            <?php endif; ?>
                            <a id="free-upgrade-pro-btn" class="btn view-site text-white flex-import-btn" href=""
                                target="_blank">
                                Upgrade pro
                            </a>
                            <a id="free-live-demo-btn" class="btn view-site text-white flex-import-btn" href=""
                                target="_blank">
                                Live Demo
                            </a>
                            <a id="free-document-url-btn" class="btn view-site text-white flex-import-btn" href=""
                                target="_blank">
                                Documentation
                            </a>
                            <button id="free-import-process-cancel-btn"
                                class="btn view-site text-white flex-import-btn">Cancel
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Step 2: Import Plugin -->
    <div id="free-import-process-plugins" style="display: none;">
        <div class="container pt-5">
            <div class="import-modal-main row" style="justify-content:space-between;">
                <div class="col-lg-6 fleximp-temp-tab-image">
                    <div class="fleximp-temp-tab-inner-image">
                        <img id="free-import-process-mid-image"
                            src="<?php echo esc_url(get_option('fleximp_current_template_mobile_image', '')); ?>" alt=""
                            style="" class="fleximp-temp-image">
                    </div>
                </div>
                <div class="col-lg-5 flex-installing-process align-self-center pr-lg-5 mr-lg-5 pr-3 mr-0">
                    <h3 id="free-import-process-mobile-title" class="importing-process-title-1 text-center steps-done">
                        <?php echo esc_html(get_option('fleximp_current_template_title', '')); ?>
                    </h3>
                    <p id="free-import-process-mobile-title-text" class="flex-modal-template-mobile-title"></p>
                    <ul id="free-import-process-plugins-list" class="flex-modal-icons">
                        <li id="free-step-plugins">
                            <p class="flex-insatlling-pluins-title"> Installing plugins</p>
                            <span class="step-status" id="free-step-plugins-status">
                                <span class="status-icon" id="free-step-plugins-status-icon"><span
                                        class="loader"></span></span>
                                Not Started
                            </span>
                        </li>
                        <li id="free-step-inner-pages">
                            <p class="flex-insatlling-pluins-title"> Importing inner pages</p>
                            <span class="step-status" id="free-step-inner-pages-status">
                                <span class="status-icon" id="free-step-inner-pages-status-icon"><span
                                        class="loader"></span></span>
                                Not Started
                            </span>
                        </li>
                        <li id="free-step-content">
                            <p class="flex-insatlling-pluins-title"> Importing content</p>
                            <span class="step-status" id="free-step-content-status">
                                <span class="status-icon" id="free-step-content-status-icon"><span
                                        class="loader"></span></span>
                                Not Started
                            </span>
                        </li>
                    </ul>

                    <div style="margin: 20px 0;">
                        <p id="free-import-process-progress-text" style="text-align: right; margin-top: 20px;">0%</p>
                        <div
                            style="background: #fff; border-radius: 2px; overflow: hidden; height: 20px; outline: 3px solid #182E60; outline-offset: 5px;">
                            <div id="free-import-process-progress-bar"
                                style="width: 0%; background: transparent linear-gradient(270deg, #4C5CAA 0%, #9B77B5 100%) 0% 0% no-repeat padding-box; border-radius:4px; height: 100%; transition: width 0.3s;">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <button id="free-import-process-continue-btn" class="btn btn-primary" style="display: none;">Continue</button>
    </div>
    <!-- Step 3: Done -->
    <div id="free-import-process-done" class="pt-5" style="display: none;">
        <div class="container">
            <div class="row import-done-process-box" style="justify-content:space-between;">
                <div class="col-lg-6">
                    <div class="fleximp-temp-tab-image text-center">
                        <img id="free-import-process-responsive-image"
                            src="<?php echo esc_url(get_option('fleximp_current_template_mobile_image', '')); ?>"
                            alt="Template Responsive Image" style="">
                    </div>
                </div>
                <div class="col-lg-6 align-self-center">
                    <h3 class="text-center steps-done">Congratulations Your Site Is Ready!</h3>
                    <p>Your demo content has been successfully imported. Start customizing your website to make it truly
                        yours!</p>

                    <div style="margin-top: 20px; text-center " class="view-btton-div">
                        <a href="<?php echo esc_url(home_url()); ?>" class="button  view-site" target="_blank">View Site
                        </a>
                        <a href="<?php echo esc_url(admin_url()); ?>" class="button  view-site" target="_blank">Go To
                            Dashboard </a>
                        <a href="<?php echo esc_url(admin_url('post.php?post=' . get_option('page_on_front') . '&action=elementor')); ?>"
                            class="button  view-site" target="_blank">Edit with Elementor </a>
                        <a id="free-done-upgrade-pro-btn" href="#" class="button view-site" target="_blank">Upgrade To Pro</a>
                        <button id="free-import-process-uninstall-btn" class="button uninstall-btn"
                            style="display: none;">Uninstall
                            Template</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="flex-explore-section">
    <div class="container">
        <h2 class="explore-heading text-center mt-5">Explore Free Templates</h2>
        <div class="template-filters">
            <select id="free-categories-list" class="template-category"></select>

            <div class="template-search">
                <input type="text" id="free-flex-templates-search" name="free-flex-templates-search"
                    placeholder="Search Templates" class="flex-search-input" />
                <button><i class="fa fa-search"></i></button>
            </div>
        </div>
    </div>
</section>

<!-- main free templates display from here -->
<div class="section">
    <div class="container-fluid">
        <div class="row cnt-flex-row">
            <div class="col-sm-8 col-lg-8 col-xl-9 px-md-0 px-lg-2 p-0 pt-md-2 pt-sm-2 grid-container-column">
                <!-- Skeleton Loader -->
                <div id="free-templates-skeleton-loader" style="display: none;">
                    <div class="skeleton-grid">
                    </div>
                </div>

                <div id="free-templates-list" class="grid-container my_grid_container"> </div>
                <!-- Pagination -->
                <div class="flex-pagination-container mt-4">
                    <nav aria-label="Free Template pagination">
                        <ul class="pagination justify-content-center" id="free-pagination-controls">
                            <!-- Pagination generated-->
                        </ul>
                    </nav>
                </div>
                <!-- Pagination end -->
            </div>
            <div class="col-sm-4 col-lg-4 col-xl-3 px-md-0 px-lg-2 p-0 pt-md-2 pt-sm-2 grid-container-column">

                <div class="flex-template-tab-bundle">
                    <div class="flex-template-tab-bundle__card">

                        <div class="flex-template-tab-bundle__image">
                            <img src="<?php echo esc_url(FLEXIMP_PLUGIN_DIR_FILE . 'assets/images/bundle-banner.png'); ?>"
                                alt="WordPress Theme Bundle">
                        </div>

                        <h2 class="flex-template-tab-bundle__title">
                            WordPress Theme Bundle
                        </h2>

                        <div class="flex-template-tab-bundle__price">
                            <span>Price:</span>
                            <span class="flex-template-tab-bundle__old-price">$590</span>
                            <span class="flex-template-tab-bundle__new-price">$69</span>
                        </div>

                        <p class="flex-template-tab-bundle__description">
                            Get access to 14+ Premium Elementor WordPress Themes with the Flex Theme Bundle.
                            Perfect for all niches, easy to customize, fast-loading, and built for modern websites.
                        </p>

                        <?php if (defined('FLEXIMP_UPGRADE_PRO_URL') && FLEXIMP_UPGRADE_PRO_URL): ?>
                            <a href="<?php echo esc_url(FLEXIMP_UPGRADE_PRO_URL); ?>"
                                class="btn flex-demo-btn btn-secondary" target="_blank" rel="noopener">
                                Get 20% OFF On Bundle
                            </a>
                        <?php endif; ?>

                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
