/**
  * Enqueue admin-specific javascript.
  *
  * @since 4.0.0
  */
 public function enqueue_builder_scripts($hook_suffix)
 {
     UI_Text::enqueue_assets();
     UI_Textarea::enqueue_assets();
     UI_Select::enqueue_assets();
     UI_Checkbox::enqueue_assets();
     UI_Radio::enqueue_assets();
     UI_Switcher::enqueue_assets();
     UI_Colorpicker::enqueue_assets();
     UI_Repeater::enqueue_assets();
     UI_Media::enqueue_assets();
     UI_Stepper::enqueue_assets();
     UI_Slider::enqueue_assets();
     UI_Range_Slider::enqueue_assets();
     UI_Background::enqueue_assets();
     UI_Typography::enqueue_assets();
     UI_Ace_Editor::enqueue_assets();
     UI_Layout_Editor::enqueue_assets();
     UI_Static_Area_Editor::enqueue_assets();
     UI_Tooltip::enqueue_assets();
     wp_enqueue_script('editor');
     wp_enqueue_script('interface-builder');
 }
 /**
  * Render html UI_Static_Area_Editor.
  *
  * @since  4.0.0
  */
 public function render()
 {
     $html = '';
     global $cherry_registered_static_areas;
     $col_xs_array = array('none' => __('none', 'cherry'), 'col-xs-1' => __('col-xs-1', 'cherry'), 'col-xs-2' => __('col-xs-2', 'cherry'), 'col-xs-3' => __('col-xs-3', 'cherry'), 'col-xs-4' => __('col-xs-4', 'cherry'), 'col-xs-5' => __('col-xs-5', 'cherry'), 'col-xs-6' => __('col-xs-6', 'cherry'), 'col-xs-7' => __('col-xs-7', 'cherry'), 'col-xs-8' => __('col-xs-8', 'cherry'), 'col-xs-9' => __('col-xs-9', 'cherry'), 'col-xs-10' => __('col-xs-10', 'cherry'), 'col-xs-11' => __('col-xs-11', 'cherry'), 'col-xs-12' => __('col-xs-12', 'cherry'));
     $col_sm_array = array('none' => __('none', 'cherry'), 'col-sm-1' => __('col-sm-1', 'cherry'), 'col-sm-2' => __('col-sm-2', 'cherry'), 'col-sm-3' => __('col-sm-3', 'cherry'), 'col-sm-4' => __('col-sm-4', 'cherry'), 'col-sm-5' => __('col-sm-5', 'cherry'), 'col-sm-6' => __('col-sm-6', 'cherry'), 'col-sm-7' => __('col-sm-7', 'cherry'), 'col-sm-8' => __('col-sm-8', 'cherry'), 'col-sm-9' => __('col-sm-9', 'cherry'), 'col-sm-10' => __('col-sm-10', 'cherry'), 'col-sm-11' => __('col-sm-11', 'cherry'), 'col-sm-12' => __('col-sm-12', 'cherry'));
     $col_md_array = array('none' => __('none', 'cherry'), 'col-md-1' => __('col-md-1', 'cherry'), 'col-md-2' => __('col-md-2', 'cherry'), 'col-md-3' => __('col-md-3', 'cherry'), 'col-md-4' => __('col-md-4', 'cherry'), 'col-md-5' => __('col-md-5', 'cherry'), 'col-md-6' => __('col-md-6', 'cherry'), 'col-md-7' => __('col-md-7', 'cherry'), 'col-md-8' => __('col-md-8', 'cherry'), 'col-md-9' => __('col-md-9', 'cherry'), 'col-md-10' => __('col-md-10', 'cherry'), 'col-md-11' => __('col-md-11', 'cherry'), 'col-md-12' => __('col-md-12', 'cherry'));
     $col_lg_array = array('none' => __('none', 'cherry'), 'col-lg-1' => __('col-lg-1', 'cherry'), 'col-lg-2' => __('col-lg-2', 'cherry'), 'col-lg-3' => __('col-lg-3', 'cherry'), 'col-lg-4' => __('col-lg-4', 'cherry'), 'col-lg-5' => __('col-lg-5', 'cherry'), 'col-lg-6' => __('col-lg-6', 'cherry'), 'col-lg-7' => __('col-lg-7', 'cherry'), 'col-lg-8' => __('col-lg-8', 'cherry'), 'col-lg-9' => __('col-lg-9', 'cherry'), 'col-lg-10' => __('col-lg-10', 'cherry'), 'col-lg-11' => __('col-lg-11', 'cherry'), 'col-lg-12' => __('col-lg-12', 'cherry'));
     $html .= '<div id="' . $this->settings['id'] . '" class="cherry-static-area-editor-wrap" data-name="' . $this->settings['name'] . '">';
     $html .= '<div class="area-units">';
     foreach ($cherry_registered_static_areas as $area => $area_settings) {
         $html .= '<div class="area-unit" data-area="' . $area . '">';
         $html .= '<h3 class="title-primary_ title-mid_ text_center_">' . $area_settings['name'] . '</h3>';
         $html .= '<div class="accordion-unit">';
         foreach ($this->settings['value'] as $handle => $handleArray) {
             if ($area == $handleArray['options']['area'] && 'available-statics' !== $handleArray['options']['area']) {
                 $html .= '<div class="group" data-static-id="' . $handle . '">';
                 $html .= '<h3><span class="label">' . $handleArray['name'] . '</span><div class="delete-group dashicons dashicons-trash"></div></h3>';
                 $html .= '<div>';
                 $html .= '<div class="field-col-xs">';
                 $html .= '<label for="' . $this->settings['id'] . '-' . $handle . '-col-xs">' . __('.col-xs-*', 'cherry') . '</label> ';
                 $ui_xs_select = new UI_Select(array('id' => $this->settings['id'] . '-' . $handle . '-col-xs', 'name' => $this->settings['name'] . '[' . $handle . '][options][col-xs]', 'value' => $handleArray['options']['col-xs'], 'options' => $col_xs_array, 'class' => 'key-col-xs'));
                 $html .= $ui_xs_select->render();
                 $html .= '</div>';
                 $html .= '<div class="field-col-sm">';
                 $html .= '<label for="' . $this->settings['id'] . '-' . $handle . '-col-sm">' . __('.col-sm-*', 'cherry') . '</label> ';
                 $ui_sm_select = new UI_Select(array('id' => $this->settings['id'] . '-' . $handle . '-col-sm', 'name' => $this->settings['name'] . '[' . $handle . '][options][col-sm]', 'value' => $handleArray['options']['col-sm'], 'options' => $col_sm_array, 'class' => 'key-col-sm'));
                 $html .= $ui_sm_select->render();
                 $html .= '</div>';
                 $html .= '<div class="field-col-md">';
                 $html .= '<label for="' . $this->settings['id'] . '-' . $handle . '-col-md">' . __('.col-md-*', 'cherry') . '</label> ';
                 $ui_md_select = new UI_Select(array('id' => $this->settings['id'] . '-' . $handle . '-col-md', 'name' => $this->settings['name'] . '[' . $handle . '][options][col-md]', 'value' => $handleArray['options']['col-md'], 'options' => $col_md_array, 'class' => 'key-col-md'));
                 $html .= $ui_md_select->render();
                 $html .= '</div>';
                 $html .= '<div class="field-col-lg">';
                 $html .= '<label for="' . $this->settings['id'] . '-' . $handle . '-col-lg">' . __('.col-lg-*', 'cherry') . '</label> ';
                 $ui_lg_select = new UI_Select(array('id' => $this->settings['id'] . '-' . $handle . '-col-lg', 'name' => $this->settings['name'] . '[' . $handle . '][options][col-lg]', 'value' => $handleArray['options']['col-lg'], 'options' => $col_lg_array, 'class' => 'key-col-lg'));
                 $html .= $ui_lg_select->render();
                 $html .= '</div>';
                 $html .= '<div class="field-class">';
                 $html .= '<label for="' . $this->settings['id'] . '-' . $handle . '-class">' . __('Custom class', 'cherry') . '</label> ';
                 $ui_class_text = new UI_Text(array('id' => $this->settings['id'] . '-' . $handle . '-class', 'name' => $this->settings['name'] . '[' . $handle . '][options][class]', 'value' => esc_html($handleArray['options']['class']), 'class' => 'key-custom-class'));
                 $html .= $ui_class_text->render();
                 $html .= '</div>';
                 $html .= '<input type="hidden" class="key-item-name" name="' . $this->settings['name'] . '[' . $handle . '][name]" value="' . $handleArray['name'] . '">';
                 $html .= '<input type="hidden" class="key-area" name="' . $this->settings['name'] . '[' . $handle . '][options][area]" value="' . $handleArray['options']['area'] . '">';
                 $html .= '<input type="hidden" class="key-position" name="' . $this->settings['name'] . '[' . $handle . '][options][position]" value="' . $handleArray['options']['position'] . '">';
                 $html .= '</div>';
                 $html .= '</div>';
             }
         }
         $html .= '</div>';
         //end accordion-unit
         $html .= '</div>';
         //end area-unit
     }
     // end foreach $available_areas
     $html .= '</div>';
     //end area-units
     $html .= '<div class="available-statics area-unit" data-area="available-statics">';
     $html .= '<h3 class="title-primary_ title-mid_ text_center_">' . __('Available statics', 'cherry') . '</h3>';
     $html .= '<div class="accordion-unit">';
     foreach ($this->settings['value'] as $handle => $handleArray) {
         if ('available-statics' == $handleArray['options']['area']) {
             $html .= '<div class="group" data-static-id="' . $handle . '">';
             $html .= '<h3><span class="label">' . $handleArray['name'] . '</span><div class="delete-group dashicons dashicons-trash"></div></h3>';
             $html .= '<div>';
             $html .= '<div class="field-col-xs">';
             $html .= '<label for="' . $this->settings['id'] . '-' . $handle . '-col-xs">' . __('.col-xs-*', 'cherry') . '</label> ';
             $ui_xs_select = new UI_Select(array('id' => $this->settings['id'] . '-' . $handle . '-col-xs', 'name' => $this->settings['name'] . '[' . $handle . '][options][col-xs]', 'value' => $handleArray['options']['col-xs'], 'options' => $col_xs_array, 'class' => 'key-col-xs'));
             $html .= $ui_xs_select->render();
             $html .= '</div>';
             $html .= '<div class="field-col-sm">';
             $html .= '<label for="' . $this->settings['id'] . '-' . $handle . '-col-sm">' . __('.col-sm-*', 'cherry') . '</label> ';
             $ui_sm_select = new UI_Select(array('id' => $this->settings['id'] . '-' . $handle . '-col-sm', 'name' => $this->settings['name'] . '[' . $handle . '][options][col-sm]', 'value' => $handleArray['options']['col-sm'], 'options' => $col_sm_array, 'class' => 'key-col-sm'));
             $html .= $ui_sm_select->render();
             $html .= '</div>';
             $html .= '<div class="field-col-md">';
             $html .= '<label for="' . $this->settings['id'] . '-' . $handle . '-col-md">' . __('.col-md-*', 'cherry') . '</label> ';
             $ui_md_select = new UI_Select(array('id' => $this->settings['id'] . '-' . $handle . '-col-md', 'name' => $this->settings['name'] . '[' . $handle . '][options][col-md]', 'value' => $handleArray['options']['col-md'], 'options' => $col_md_array, 'class' => 'key-col-md'));
             $html .= $ui_md_select->render();
             $html .= '</div>';
             $html .= '<div class="field-col-lg">';
             $html .= '<label for="' . $this->settings['id'] . '-' . $handle . '-col-lg">' . __('.col-lg-*', 'cherry') . '</label> ';
             $ui_lg_select = new UI_Select(array('id' => $this->settings['id'] . '-' . $handle . '-col-lg', 'name' => $this->settings['name'] . '[' . $handle . '][options][col-lg]', 'value' => $handleArray['options']['col-lg'], 'options' => $col_lg_array, 'class' => 'key-col-lg'));
             $html .= $ui_lg_select->render();
             $html .= '</div>';
             $html .= '<div class="field-class">';
             $html .= '<label for="' . $this->settings['id'] . '-' . $handle . '-class">' . __('Custom class', 'cherry') . '</label> ';
             $ui_class_text = new UI_Text(array('id' => $this->settings['id'] . '-' . $handle . '-class', 'name' => $this->settings['name'] . '[' . $handle . '][options][class]', 'value' => esc_html($handleArray['options']['class']), 'class' => 'key-custom-class'));
             $html .= $ui_class_text->render();
             $html .= '</div>';
             $html .= '<input type="hidden" class="key-item-name" name="' . $this->settings['name'] . '[' . $handle . '][name]" value="' . $handleArray['name'] . '">';
             $html .= '<input type="hidden" class="key-area" name="' . $this->settings['name'] . '[' . $handle . '][options][area]" value="' . $handleArray['options']['area'] . '">';
             $html .= '<input type="hidden" class="key-position" name="' . $this->settings['name'] . '[' . $handle . '][options][position]" value="' . $handleArray['options']['position'] . '">';
             $html .= '</div>';
             $html .= '</div>';
         }
     }
     $html .= '</div>';
     $html .= '</div>';
     $html .= '<div class="clear"></div>';
     $html .= '</div>';
     return $html;
 }
 /**
  * Render html UI_Layout_Editor.
  *
  * @since  4.0.0
  */
 public function render()
 {
     $html = '';
     if ('' !== $this->settings['label']) {
         $html .= '<label class="cherry-label" for="' . $this->settings['id'] . '">' . $this->settings['label'] . '</label> ';
     }
     $html .= '<div id="' . $this->settings['id'] . '" class="cherry-layout-editor-wrap ' . $this->settings['class'] . '">';
     $html .= '<div class="cherry-layout-editor-inner">';
     $html .= '<input class="ui-layout-editor-input input-top" name="' . $this->settings['name'] . '[position][top]" type="text" placeholder="-" value="' . esc_html($this->settings['value']['position']['top']) . '">';
     $html .= '<input class="ui-layout-editor-input input-right" name="' . $this->settings['name'] . '[position][right]" type="text" placeholder="-" value="' . esc_html($this->settings['value']['position']['right']) . '">';
     $html .= '<input class="ui-layout-editor-input input-bottom" name="' . $this->settings['name'] . '[position][bottom]" type="text" placeholder="-" value="' . esc_html($this->settings['value']['position']['bottom']) . '">';
     $html .= '<input class="ui-layout-editor-input input-left" name="' . $this->settings['name'] . '[position][left]" type="text" placeholder="-" value="' . esc_html($this->settings['value']['position']['left']) . '">';
     $html .= '<div class="position-inner">';
     $html .= '<span class="hint-label">' . __('position', 'cherry') . '</span>';
     $html .= '<div class="margin-inner">';
     $html .= '<span class="hint-label">' . __('margin', 'cherry') . '</span>';
     $html .= '<input class="ui-layout-editor-input input-top" name="' . $this->settings['name'] . '[margin][top]" type="text" placeholder="-" value="' . esc_html($this->settings['value']['margin']['top']) . '">';
     $html .= '<input class="ui-layout-editor-input input-right" name="' . $this->settings['name'] . '[margin][right]" type="text" placeholder="-" value="' . esc_html($this->settings['value']['margin']['right']) . '">';
     $html .= '<input class="ui-layout-editor-input input-bottom" name="' . $this->settings['name'] . '[margin][bottom]" type="text" placeholder="-" value="' . esc_html($this->settings['value']['margin']['bottom']) . '">';
     $html .= '<input class="ui-layout-editor-input input-left" name="' . $this->settings['name'] . '[margin][left]" type="text" placeholder="-" value="' . esc_html($this->settings['value']['margin']['left']) . '">';
     $html .= '<div class="border-inner">';
     $html .= '<span class="hint-label">' . __('border', 'cherry') . '</span>';
     $html .= '<input class="ui-layout-editor-input input-top" name="' . $this->settings['name'] . '[border][top]" type="text" placeholder="-" value="' . esc_html($this->settings['value']['border']['top']) . '">';
     $html .= '<input class="ui-layout-editor-input input-right" name="' . $this->settings['name'] . '[border][right]" type="text" placeholder="-" value="' . esc_html($this->settings['value']['border']['right']) . '">';
     $html .= '<input class="ui-layout-editor-input input-bottom" name="' . $this->settings['name'] . '[border][bottom]" type="text" placeholder="-" value="' . esc_html($this->settings['value']['border']['bottom']) . '">';
     $html .= '<input class="ui-layout-editor-input input-left" name="' . $this->settings['name'] . '[border][left]" type="text" placeholder="-" value="' . esc_html($this->settings['value']['border']['left']) . '">';
     $html .= '<div class="padding-inner">';
     $html .= '<span class="hint-label">' . __('padding', 'cherry') . '</span>';
     $html .= '<input class="ui-layout-editor-input input-top" name="' . $this->settings['name'] . '[padding][top]" type="text" placeholder="-" value="' . esc_html($this->settings['value']['padding']['top']) . '">';
     $html .= '<input class="ui-layout-editor-input input-right" name="' . $this->settings['name'] . '[padding][right]" type="text" placeholder="-" value="' . esc_html($this->settings['value']['padding']['right']) . '">';
     $html .= '<input class="ui-layout-editor-input input-bottom" name="' . $this->settings['name'] . '[padding][bottom]" type="text" placeholder="-" value="' . esc_html($this->settings['value']['padding']['bottom']) . '">';
     $html .= '<input class="ui-layout-editor-input input-left" name="' . $this->settings['name'] . '[padding][left]" type="text" placeholder="-" value="' . esc_html($this->settings['value']['padding']['left']) . '">';
     $html .= '<div class="container-inner">';
     $html .= '<span class="hint-label">' . __('size', 'cherry') . '</span>';
     $html .= '<input class="ui-layout-editor-input input-width" name="' . $this->settings['name'] . '[container][width]" type="text" placeholder="-" value="' . esc_html($this->settings['value']['container']['width']) . '">';
     $html .= '<input class="ui-layout-editor-input input-height" name="' . $this->settings['name'] . '[container][height]" type="text" placeholder="-" value="' . esc_html($this->settings['value']['container']['height']) . '">';
     $html .= '</div>';
     $html .= '</div>';
     $html .= '</div>';
     $html .= '</div>';
     $html .= '</div>';
     $html .= '</div>';
     $html .= '<div class="border-controls">';
     $html .= '<div class="border-control border-control-style">';
     $border_styles = array('solid' => __('solid', 'cherry'), 'dashed' => __('dashed', 'cherry'), 'dotted' => __('dotted', 'cherry'), 'double' => __('double', 'cherry'), 'groove' => __('groove', 'cherry'), 'ridge' => __('ridge', 'cherry'), 'inset' => __('inset', 'cherry'), 'outset' => __('outset', 'cherry'), 'none' => __('none', 'cherry'));
     $html .= '<label for="' . $this->settings['id'] . '-border-style">' . __('Border style', 'cherry') . '</label> ';
     if ($border_styles && !empty($border_styles) && is_array($border_styles)) {
         $ui_border_style_select = new UI_Select(array('id' => $this->settings['id'] . '-border-style', 'name' => $this->settings['name'] . '[border][style]', 'value' => $this->settings['value']['border']['style'], 'options' => $border_styles, 'class' => 'cherry-border-style'));
         $html .= $ui_border_style_select->render();
     }
     $html .= '</div>';
     $html .= '<div class="border-control border-control-radius">';
     $html .= '<label for="' . $this->settings['id'] . '-border-radius">' . __('Border radius', 'cherry') . '</label> ';
     $ui_border_radius = new UI_Text(array('id' => $this->settings['id'] . '-border-radius', 'name' => $this->settings['name'] . '[border][radius]', 'value' => $this->settings['value']['border']['radius'], 'class' => 'cherry-border-radius'));
     $html .= $ui_border_radius->render();
     $html .= '</div>';
     $html .= '<div class="border-control border-control-color">';
     $html .= '<label for="' . $this->settings['id'] . '-border-color">' . __('Border color', 'cherry') . '</label> ';
     $ui_border_colorpicker = new UI_Colorpicker(array('id' => $this->settings['id'] . '-border-color', 'name' => $this->settings['name'] . '[border][color]', 'value' => $this->settings['value']['border']['color'], 'class' => 'cherry-border-color'));
     $html .= $ui_border_colorpicker->render();
     $html .= '</div>';
     $html .= '</div>';
     $html .= '<div class="clear"></div>';
     $html .= '</div>';
     return $html;
 }
 /**
  * Enqueue admin-specific javascript.
  *
  * @since 4.0.0
  */
 public function enqueue_builder_scripts($hook_suffix = false)
 {
     UI_Text::enqueue_assets();
     UI_Textarea::enqueue_assets();
     UI_Select::enqueue_assets();
     UI_Checkbox::enqueue_assets();
     UI_Radio::enqueue_assets();
     UI_Switcher::enqueue_assets();
     UI_Colorpicker::enqueue_assets();
     UI_Repeater::enqueue_assets();
     UI_Media::enqueue_assets();
     UI_Stepper::enqueue_assets();
     UI_Slider::enqueue_assets();
     UI_Range_Slider::enqueue_assets();
     UI_Background::enqueue_assets();
     UI_Typography::enqueue_assets();
     UI_Ace_Editor::enqueue_assets();
     UI_Layout_Editor::enqueue_assets();
     UI_Tooltip::enqueue_assets();
     UI_Webfont::enqueue_assets();
     wp_enqueue_script('editor');
     wp_enqueue_script('jquery-ui-dialog');
     wp_enqueue_script('interface-builder', trailingslashit(CHERRY_URI) . 'admin/assets/js/interface-builder.js', array('jquery'), CHERRY_VERSION, true);
 }
 /**
  * Render html UI_Static_Area_Editor.
  *
  * @since  4.0.0
  */
 public function render()
 {
     $html = '';
     global $cherry_registered_static_areas;
     $col_xs_array = array('none' => __('none', 'cherry'), 'col-xs-1' => __('col-xs-1', 'cherry'), 'col-xs-2' => __('col-xs-2', 'cherry'), 'col-xs-3' => __('col-xs-3', 'cherry'), 'col-xs-4' => __('col-xs-4', 'cherry'), 'col-xs-5' => __('col-xs-5', 'cherry'), 'col-xs-6' => __('col-xs-6', 'cherry'), 'col-xs-7' => __('col-xs-7', 'cherry'), 'col-xs-8' => __('col-xs-8', 'cherry'), 'col-xs-9' => __('col-xs-9', 'cherry'), 'col-xs-10' => __('col-xs-10', 'cherry'), 'col-xs-11' => __('col-xs-11', 'cherry'), 'col-xs-12' => __('col-xs-12', 'cherry'));
     $col_sm_array = array('none' => __('none', 'cherry'), 'col-sm-1' => __('col-sm-1', 'cherry'), 'col-sm-2' => __('col-sm-2', 'cherry'), 'col-sm-3' => __('col-sm-3', 'cherry'), 'col-sm-4' => __('col-sm-4', 'cherry'), 'col-sm-5' => __('col-sm-5', 'cherry'), 'col-sm-6' => __('col-sm-6', 'cherry'), 'col-sm-7' => __('col-sm-7', 'cherry'), 'col-sm-8' => __('col-sm-8', 'cherry'), 'col-sm-9' => __('col-sm-9', 'cherry'), 'col-sm-10' => __('col-sm-10', 'cherry'), 'col-sm-11' => __('col-sm-11', 'cherry'), 'col-sm-12' => __('col-sm-12', 'cherry'));
     $col_md_array = array('none' => __('none', 'cherry'), 'col-md-1' => __('col-md-1', 'cherry'), 'col-md-2' => __('col-md-2', 'cherry'), 'col-md-3' => __('col-md-3', 'cherry'), 'col-md-4' => __('col-md-4', 'cherry'), 'col-md-5' => __('col-md-5', 'cherry'), 'col-md-6' => __('col-md-6', 'cherry'), 'col-md-7' => __('col-md-7', 'cherry'), 'col-md-8' => __('col-md-8', 'cherry'), 'col-md-9' => __('col-md-9', 'cherry'), 'col-md-10' => __('col-md-10', 'cherry'), 'col-md-11' => __('col-md-11', 'cherry'), 'col-md-12' => __('col-md-12', 'cherry'));
     $col_lg_array = array('none' => __('none', 'cherry'), 'col-lg-1' => __('col-lg-1', 'cherry'), 'col-lg-2' => __('col-lg-2', 'cherry'), 'col-lg-3' => __('col-lg-3', 'cherry'), 'col-lg-4' => __('col-lg-4', 'cherry'), 'col-lg-5' => __('col-lg-5', 'cherry'), 'col-lg-6' => __('col-lg-6', 'cherry'), 'col-lg-7' => __('col-lg-7', 'cherry'), 'col-lg-8' => __('col-lg-8', 'cherry'), 'col-lg-9' => __('col-lg-9', 'cherry'), 'col-lg-10' => __('col-lg-10', 'cherry'), 'col-lg-11' => __('col-lg-11', 'cherry'), 'col-lg-12' => __('col-lg-12', 'cherry'));
     $action_conditions = array('show' => __('Show', 'cherry'), 'hide' => __('Hide', 'cherry'));
     $major_conditions_array = array('' => __('-- Select --', 'cherry'), 'category' => __('Category', 'cherry'), 'loggedin' => __('Logged in', 'cherry'), 'author' => __('Author', 'cherry'), 'role' => __('Role', 'cherry'), 'tag' => __('Tag', 'cherry'), 'date' => __('Date', 'cherry'), 'page' => __('Page', 'cherry'), 'taxonomy' => __('Taxonomy', 'cherry'));
     $html .= '<div id="' . $this->settings['id'] . '" class="cherry-static-area-editor-wrap" data-name="' . $this->settings['name'] . '">';
     $html .= '<div class="area-units">';
     foreach ($cherry_registered_static_areas as $area => $area_settings) {
         $html .= '<div class="area-unit" data-area="' . $area . '">';
         $html .= '<h3 class="title-primary_ title-mid_ text_center_">' . $area_settings['name'] . '</h3>';
         $html .= '<div class="accordion-unit">';
         foreach ($this->settings['value'] as $handle => $handleArray) {
             if ($area == $handleArray['options']['area'] && 'available-statics' !== $handleArray['options']['area']) {
                 $html .= '<div class="group" data-static-id="' . $handle . '">';
                 $html .= '<h3><span class="label">' . $handleArray['name'] . '</span><div class="delete-group dashicons dashicons-trash"></div></h3>';
                 $html .= '<div>';
                 $html .= '<div class="field-col-xs">';
                 $html .= '<label for="' . $this->settings['id'] . '-' . $handle . '-col-xs">' . __('.col-xs-*', 'cherry') . '</label> ';
                 $ui_xs_select = new UI_Select(array('id' => $this->settings['id'] . '-' . $handle . '-col-xs', 'name' => $this->settings['name'] . '[' . $handle . '][options][col-xs]', 'value' => $handleArray['options']['col-xs'], 'options' => $col_xs_array, 'class' => 'key-col-xs'));
                 $html .= $ui_xs_select->render();
                 $html .= '</div>';
                 $html .= '<div class="field-col-sm">';
                 $html .= '<label for="' . $this->settings['id'] . '-' . $handle . '-col-sm">' . __('.col-sm-*', 'cherry') . '</label> ';
                 $ui_sm_select = new UI_Select(array('id' => $this->settings['id'] . '-' . $handle . '-col-sm', 'name' => $this->settings['name'] . '[' . $handle . '][options][col-sm]', 'value' => $handleArray['options']['col-sm'], 'options' => $col_sm_array, 'class' => 'key-col-sm'));
                 $html .= $ui_sm_select->render();
                 $html .= '</div>';
                 $html .= '<div class="field-col-md">';
                 $html .= '<label for="' . $this->settings['id'] . '-' . $handle . '-col-md">' . __('.col-md-*', 'cherry') . '</label> ';
                 $ui_md_select = new UI_Select(array('id' => $this->settings['id'] . '-' . $handle . '-col-md', 'name' => $this->settings['name'] . '[' . $handle . '][options][col-md]', 'value' => $handleArray['options']['col-md'], 'options' => $col_md_array, 'class' => 'key-col-md'));
                 $html .= $ui_md_select->render();
                 $html .= '</div>';
                 $html .= '<div class="field-col-lg">';
                 $html .= '<label for="' . $this->settings['id'] . '-' . $handle . '-col-lg">' . __('.col-lg-*', 'cherry') . '</label> ';
                 $ui_lg_select = new UI_Select(array('id' => $this->settings['id'] . '-' . $handle . '-col-lg', 'name' => $this->settings['name'] . '[' . $handle . '][options][col-lg]', 'value' => $handleArray['options']['col-lg'], 'options' => $col_lg_array, 'class' => 'key-col-lg'));
                 $html .= $ui_lg_select->render();
                 $html .= '</div>';
                 $html .= '<div class="field-class">';
                 $html .= '<label for="' . $this->settings['id'] . '-' . $handle . '-class">' . __('Custom class', 'cherry') . '</label> ';
                 $ui_class_text = new UI_Text(array('id' => $this->settings['id'] . '-' . $handle . '-class', 'name' => $this->settings['name'] . '[' . $handle . '][options][class]', 'value' => esc_html($handleArray['options']['class']), 'class' => 'key-custom-class'));
                 $html .= $ui_class_text->render();
                 $html .= '</div>';
                 $html .= '<div class="clear"></div>';
                 is_array($handleArray['conditions']['rules']) && count($handleArray['conditions']['rules']) > 0 ? $empty_class = '' : ($empty_class = 'empty');
                 $html .= '<div class="conditions ' . $empty_class . '">';
                 $html .= '<label for="' . $this->settings['id'] . '-' . $handle . '-conditions-action">' . __('Conditions', 'cherry') . '</label> ';
                 $ui_condition_action = new UI_Select(array('id' => $this->settings['id'] . '-' . $handle . '-conditions-action', 'name' => $this->settings['name'] . '[' . $handle . '][conditions][action]', 'value' => $handleArray['conditions']['action'], 'options' => $action_conditions, 'class' => 'conditions-action'));
                 $html .= $ui_condition_action->render();
                 $html .= '<div class="label label-if"><span>' . __('if', 'cherry') . '</span></div>';
                 $html .= '<div class="conditions-rules">';
                 $name = $this->settings['name'] . '[' . $handle . '][conditions][rules]';
                 $html .= '<div class="dublicate-item" data-name="' . $name . '">';
                 $html .= '<div class="rule-major">';
                 $major_rule = new UI_Select(array('id' => $this->settings['id'] . '-' . $handle . '-major-rule', 'name' => $this->settings['name'] . '[' . $handle . '][conditions][rules]', 'value' => '', 'options' => $major_conditions_array, 'class' => 'rule-major-select'));
                 $html .= $major_rule->render();
                 $html .= '</div>';
                 $html .= '<div class="label label-is"><span>' . __('is', 'cherry') . '</span></div>';
                 $html .= '<div class="rule-minor">';
                 $minor_rule = new UI_Select(array('id' => $this->settings['id'] . '-' . $handle . '-minor-rule', 'name' => $this->settings['name'] . '[' . $handle . '][conditions][rules]', 'value' => '', 'options' => '', 'class' => 'rule-minor-select'));
                 $html .= $minor_rule->render();
                 $html .= '</div>';
                 $html .= '<div class="remove-rule-button"><span class="dashicons dashicons-no"></span></div>';
                 $html .= '<div class="clear"></div>';
                 $html .= '</div><!-- end dublicate item -->';
                 if (is_array($handleArray['conditions']['rules']) && !empty($handleArray['conditions']['rules'])) {
                     foreach ($handleArray['conditions']['rules'] as $index => $rule) {
                         $html .= '<div class="rule-item" data-name="' . $name . '">';
                         $html .= '<div class="rule-major">';
                         $major_rule = new UI_Select(array('id' => $this->settings['id'] . '-' . $handle . '-major-rule-' . $index, 'name' => $this->settings['name'] . '[' . $handle . '][conditions][rules][' . $index . '][major]', 'value' => $rule['major'], 'options' => $major_conditions_array, 'class' => 'rule-major-select'));
                         $html .= $major_rule->render();
                         $html .= '</div>';
                         $html .= '<div class="label label-is"><span>' . __('is', 'cherry') . '</span></div>';
                         $html .= '<div class="rule-minor">';
                         $minor = isset($rule['minor']) ? $rule['minor'] : '';
                         $minor_rule = new UI_Select(array('id' => $this->settings['id'] . '-' . $handle . '-minor-rule', 'name' => $this->settings['name'] . '[' . $handle . '][conditions][rules][' . $index . '][minor]', 'value' => $minor, 'options' => $this->get_minor_options($rule['major']), 'class' => 'rule-minor-select'));
                         $html .= $minor_rule->render();
                         $html .= '</div>';
                         $html .= '<div class="remove-rule-button"><span class="dashicons dashicons-no"></span></div>';
                         $html .= '<div class="clear"></div>';
                         $html .= '</div><!-- end dublicate item -->';
                     }
                 }
                 $html .= '</div><!-- end conditions-rules -->';
                 $html .= '<div class="add-rule-button"><span class="dashicons dashicons-plus"></span>' . __('Add rule', 'cherry') . '</div>';
                 $html .= '</div><!-- end conditions -->';
                 $html .= '<input type="hidden" class="key-item-name" name="' . $this->settings['name'] . '[' . $handle . '][name]" value="' . $handleArray['name'] . '">';
                 $html .= '<input type="hidden" class="key-area" name="' . $this->settings['name'] . '[' . $handle . '][options][area]" value="' . $handleArray['options']['area'] . '">';
                 $html .= '<input type="hidden" class="key-position" name="' . $this->settings['name'] . '[' . $handle . '][options][position]" value="' . $handleArray['options']['position'] . '">';
                 $html .= '</div>';
                 $html .= '</div>';
             }
         }
         $html .= '</div>';
         //end accordion-unit
         $html .= '</div>';
         //end area-unit
     }
     // end foreach $available_areas
     $html .= '</div>';
     //end area-units
     $html .= '<div class="available-statics area-unit" data-area="available-statics">';
     $html .= '<h3 class="title-primary_ title-mid_ text_center_">' . __('Available statics', 'cherry') . '</h3>';
     $html .= '<div class="accordion-unit">';
     foreach ($this->settings['value'] as $handle => $handleArray) {
         if ('available-statics' == $handleArray['options']['area']) {
             $html .= '<div class="group" data-static-id="' . $handle . '">';
             $html .= '<h3><span class="label">' . $handleArray['name'] . '</span><div class="delete-group dashicons dashicons-trash"></div></h3>';
             $html .= '<div>';
             $html .= '<div class="field-col-xs">';
             $html .= '<label for="' . $this->settings['id'] . '-' . $handle . '-col-xs">' . __('.col-xs-*', 'cherry') . '</label> ';
             $ui_xs_select = new UI_Select(array('id' => $this->settings['id'] . '-' . $handle . '-col-xs', 'name' => $this->settings['name'] . '[' . $handle . '][options][col-xs]', 'value' => $handleArray['options']['col-xs'], 'options' => $col_xs_array, 'class' => 'key-col-xs'));
             $html .= $ui_xs_select->render();
             $html .= '</div>';
             $html .= '<div class="field-col-sm">';
             $html .= '<label for="' . $this->settings['id'] . '-' . $handle . '-col-sm">' . __('.col-sm-*', 'cherry') . '</label> ';
             $ui_sm_select = new UI_Select(array('id' => $this->settings['id'] . '-' . $handle . '-col-sm', 'name' => $this->settings['name'] . '[' . $handle . '][options][col-sm]', 'value' => $handleArray['options']['col-sm'], 'options' => $col_sm_array, 'class' => 'key-col-sm'));
             $html .= $ui_sm_select->render();
             $html .= '</div>';
             $html .= '<div class="field-col-md">';
             $html .= '<label for="' . $this->settings['id'] . '-' . $handle . '-col-md">' . __('.col-md-*', 'cherry') . '</label> ';
             $ui_md_select = new UI_Select(array('id' => $this->settings['id'] . '-' . $handle . '-col-md', 'name' => $this->settings['name'] . '[' . $handle . '][options][col-md]', 'value' => $handleArray['options']['col-md'], 'options' => $col_md_array, 'class' => 'key-col-md'));
             $html .= $ui_md_select->render();
             $html .= '</div>';
             $html .= '<div class="field-col-lg">';
             $html .= '<label for="' . $this->settings['id'] . '-' . $handle . '-col-lg">' . __('.col-lg-*', 'cherry') . '</label> ';
             $ui_lg_select = new UI_Select(array('id' => $this->settings['id'] . '-' . $handle . '-col-lg', 'name' => $this->settings['name'] . '[' . $handle . '][options][col-lg]', 'value' => $handleArray['options']['col-lg'], 'options' => $col_lg_array, 'class' => 'key-col-lg'));
             $html .= $ui_lg_select->render();
             $html .= '</div>';
             $html .= '<div class="field-class">';
             $html .= '<label for="' . $this->settings['id'] . '-' . $handle . '-class">' . __('Custom class', 'cherry') . '</label> ';
             $ui_class_text = new UI_Text(array('id' => $this->settings['id'] . '-' . $handle . '-class', 'name' => $this->settings['name'] . '[' . $handle . '][options][class]', 'value' => esc_html($handleArray['options']['class']), 'class' => 'key-custom-class'));
             $html .= $ui_class_text->render();
             $html .= '</div>';
             $html .= '<div class="clear"></div>';
             is_array($handleArray['conditions']['rules']) && count($handleArray['conditions']['rules']) > 0 ? $empty_class = '' : ($empty_class = 'empty');
             $html .= '<div class="conditions ' . $empty_class . '">';
             $html .= '<label for="' . $this->settings['id'] . '-' . $handle . '-conditions-action">' . __('Conditions', 'cherry') . '</label> ';
             $ui_condition_action = new UI_Select(array('id' => $this->settings['id'] . '-' . $handle . '-conditions-action', 'name' => $this->settings['name'] . '[' . $handle . '][conditions][action]', 'value' => $handleArray['conditions']['action'], 'options' => $action_conditions, 'class' => 'conditions-action'));
             $html .= $ui_condition_action->render();
             $html .= '<div class="label label-if"><span>' . __('if', 'cherry') . '</span></div>';
             $html .= '<div class="conditions-rules">';
             $name = $this->settings['name'] . '[' . $handle . '][conditions][rules]';
             $html .= '<div class="dublicate-item" data-name="' . $name . '">';
             $html .= '<div class="rule-major">';
             $major_rule = new UI_Select(array('id' => $this->settings['id'] . '-' . $handle . '-major-rule', 'name' => $this->settings['name'] . '[' . $handle . '][conditions][rules]', 'value' => '', 'options' => $major_conditions_array, 'class' => 'rule-major-select'));
             $html .= $major_rule->render();
             $html .= '</div>';
             $html .= '<div class="label label-is"><span>' . __('is', 'cherry') . '</span></div>';
             $html .= '<div class="rule-minor">';
             $minor_rule = new UI_Select(array('id' => $this->settings['id'] . '-' . $handle . '-minor-rule', 'name' => $this->settings['name'] . '[' . $handle . '][conditions][rules]', 'value' => '', 'options' => '', 'class' => 'rule-minor-select'));
             $html .= $minor_rule->render();
             $html .= '</div>';
             $html .= '<div class="remove-rule-button"><span class="dashicons dashicons-no"></span></div>';
             $html .= '<div class="clear"></div>';
             $html .= '</div><!-- end dublicate item -->';
             if (is_array($handleArray['conditions']['rules']) && !empty($handleArray['conditions']['rules'])) {
                 foreach ($handleArray['conditions']['rules'] as $index => $rule) {
                     $html .= '<div class="rule-item" data-name="' . $name . '">';
                     $html .= '<div class="rule-major">';
                     $major_rule = new UI_Select(array('id' => $this->settings['id'] . '-' . $handle . '-major-rule-' . $index, 'name' => $this->settings['name'] . '[' . $handle . '][conditions][rules][' . $index . '][major]', 'value' => $rule['major'], 'options' => $major_conditions_array, 'class' => 'rule-major-select'));
                     $html .= $major_rule->render();
                     $html .= '</div>';
                     $html .= '<div class="label label-is"><span>' . __('is', 'cherry') . '</span></div>';
                     $html .= '<div class="rule-minor">';
                     $minor = isset($rule['minor']) ? $rule['minor'] : '';
                     $minor_rule = new UI_Select(array('id' => $this->settings['id'] . '-' . $handle . '-minor-rule', 'name' => $this->settings['name'] . '[' . $handle . '][conditions][rules][' . $index . '][minor]', 'value' => $minor, 'options' => $this->get_minor_options($rule['major']), 'class' => 'rule-minor-select'));
                     $html .= $minor_rule->render();
                     $html .= '</div>';
                     $html .= '<div class="remove-rule-button"><span class="dashicons dashicons-no"></span></div>';
                     $html .= '<div class="clear"></div>';
                     $html .= '</div><!-- end dublicate item -->';
                 }
             }
             $html .= '</div><!-- end conditions-rules -->';
             $html .= '<div class="add-rule-button"><span class="dashicons dashicons-plus"></span>' . __('Add rule', 'cherry') . '</div>';
             $html .= '</div><!-- end conditions -->';
             $html .= '<input type="hidden" class="key-item-name" name="' . $this->settings['name'] . '[' . $handle . '][name]" value="' . $handleArray['name'] . '">';
             $html .= '<input type="hidden" class="key-area" name="' . $this->settings['name'] . '[' . $handle . '][options][area]" value="' . $handleArray['options']['area'] . '">';
             $html .= '<input type="hidden" class="key-position" name="' . $this->settings['name'] . '[' . $handle . '][options][position]" value="' . $handleArray['options']['position'] . '">';
             $html .= '</div>';
             $html .= '</div>';
         }
     }
     $html .= '</div>';
     $html .= '</div>';
     $html .= '<div class="clear"></div>';
     $html .= '</div>';
     return $html;
 }
<div id="new-sidebar-manager-wrap" style="display:none;">
	<div id="create-new-sidebar-manager">
	<h3><?php 
_e('Create new custom sidebar.', 'cherry-sidebar-manager');
?>
</h3>
	<form id="cherry-sidebar-manager-form" class="cherry-ui-core" method="post">
		<div class="cherry-section">
			<?php 
$ui_text = new UI_Text(array('id' => 'sidebar-manager-name', 'name' => 'sidebar-manager-name', 'class' => 'required', 'label' => __('Sidebar name:', 'cherry-sidebar-manager')));
echo $ui_text->render();
?>
		</div>
		<div class="cherry-section">
			<?php 
$ui_text = new UI_Text(array('id' => 'sidebar-manager-description', 'name' => 'sidebar-manager-description', 'class' => 'required', 'label' => __('Sidebar description:', 'cherry-sidebar-manager')));
echo $ui_text->render();
?>
		</div>
		<div class="cherry-section">
			<?php 
echo get_submit_button(__('Create Sidebar', 'cherry-sidebar-manager'), 'button-primary_', 'sidebar-manager-submit', false, 'style="float:right"');
?>
		</div>
		<div class="cherry-spinner-wordpress spinner-wordpress-type-1"><span class="cherry-inner-circle"></span></div>
		<div id="cherry-error-message"><?php 
_e('Cannot add new custom sidebar', 'cherry-sidebar-manager');
?>
</div>
	</form>
	</div>