<?php
if (! class_exists('AI_App_Onsite_Field_Selector')) {
    class AI_App_Onsite_Field_Selector
    {

        public static function render_field_selector()
        {
            ob_start(); ?>
            <div class="field-select-content">
                <form id="myForm" class="container">
                    <?php wp_nonce_field('ai_app_onsite_field_selector_nonce', 'ai_app_onsite_field_selector_nonce_field'); ?>
                    <div class="d-flex justify-content-between mb-3 align-items-center">
                        <label class="font-bold fs-medium-14 mb-0">Add App Fields</label>
                    </div>
                    <div class="row alignment-items-center mb-4">
                        <div class="col-lg-6">
                            <div class="select-percentage hidden">
                                <label class="fs-medium-14 mb-0">App Width</label>
                                <select id="app_width_figure" name="app_width_figure" class="number-select">
                                    <option value="30">30%</option>
                                    <option value="50">50%</option>
                                    <option value="60">60%</option>
                                    <option value="70" selected>70%</option>
                                    <option value="80">80%</option>
                                    <option value="90">90%</option>
                                    <option value="100">100%</option>
                                </select>
                                <span class="fs-medium-14 mb-0">(% of page)</span>
                            </div>
                        </div>
                        <div class="col-lg-6 text-end">
                            <button class="btn btn-with-icon fs-medium-14 neutral-black-fs-100 radius-6 py-8 px-16 border border-2 bg-white" id="assets-add-field" type="button" onclick="addField()">
                                <span class="btn-icon">
                                    <div class="assets-add-field-icon"></div>
                                </span> Add Field
                            </button>
                        </div>
                    </div>
                    <div class="field-catcher">
                        <!-- Form-group divs will be dynamically added here -->
                    </div>
                    <div class="divider-light"></div>
                    <div class="text-end">
                        <button type="button" id="cancel_ai_app_fieldselector_data" role="button" class="btn fs-medium-14 neutral-black-fs-60 radius-6 py-8 px-16 border border-2 bg-white" name="save-plugin-settings">Cancel</button>

                        <button type="button" id="save_ai_app_ai_app_fieldselector_data" class="btn btn-purple fs-medium-14 neutral-black-fs-60 radius-6 py-8 px-16 border border-2 bg-purple-100 text-white" name="save-plugin-settings" onclick="ai_app_onsite_save_ai_app_fieldselector_data()">Save</button>
                    </div>
                </form>
            </div>
            <div id="field-selector-msg-container" class="message-container"></div>
<?php
            return ob_get_clean();
        }
    }
}
