<div class="item">
    <?php
    $o = new wpdreamsCustomSelect("magnifier_position", __('Magnifier position', 'ajax-search-pro'), array(
        'selects'=>array(
            array('option' => __('Left', 'ajax-search-pro'), 'value' => 'left'),
            array('option' => __('Right', 'ajax-search-pro'), 'value' => 'right')
        ),
        'value'=>$sd['magnifier_position']
    ));
    ?>
</div>
<div class="item">
    <?php
    $o = new wpdreamsImageRadio("magnifierimage", __('Magnifier image', 'ajax-search-pro'), array(
            'images'  => array(
                "/ajax-search-pro/img/svg/magnifiers/magn1.svg",
                "/ajax-search-pro/img/svg/magnifiers/magn2.svg",
                "/ajax-search-pro/img/svg/magnifiers/magn3.svg",
                "/ajax-search-pro/img/svg/magnifiers/magn4.svg",
                "/ajax-search-pro/img/svg/magnifiers/magn5.svg",
                "/ajax-search-pro/img/svg/magnifiers/magn6.svg",
                "/ajax-search-pro/img/svg/magnifiers/magn7.svg",
                "/ajax-search-pro/img/svg/arrows/arrow1.svg",
                "/ajax-search-pro/img/svg/arrows/arrow2.svg",
                "/ajax-search-pro/img/svg/arrows/arrow3.svg",
                "/ajax-search-pro/img/svg/arrows/arrow4.svg",
                "/ajax-search-pro/img/svg/arrows/arrow5.svg",
                "/ajax-search-pro/img/svg/arrows/arrow6.svg",
                "/ajax-search-pro/img/svg/arrows/arrow7.svg",
                "/ajax-search-pro/img/svg/arrows/arrow8.svg",
                "/ajax-search-pro/img/svg/arrows/arrow9.svg",
                "/ajax-search-pro/img/svg/arrows/arrow10.svg",
                "/ajax-search-pro/img/svg/arrows/arrow11.svg",
                "/ajax-search-pro/img/svg/arrows/arrow12.svg",
                "/ajax-search-pro/img/svg/arrows/arrow13.svg",
                "/ajax-search-pro/img/svg/arrows/arrow14.svg",
                "/ajax-search-pro/img/svg/arrows/arrow15.svg",
                "/ajax-search-pro/img/svg/arrows/arrow16.svg"
            ),
            'value'=> $sd['magnifierimage']
        )
    );
    ?>
</div>
<div class="item"><?php
    $o = new wpdreamsColorPicker("magnifierimage_color", __('Magnifier icon color', 'ajax-search-pro'), $sd['magnifierimage_color']);
    ?>
    <p class="descMsg">
        <?php echo __('Only works with the built-in icons, or if the custom icon type is SVG (.svg file)', 'ajax-search-pro'); ?>
    </p>
</div>
<div class="item"><?php
    $o = new wpdreamsUpload("magnifierimage_custom", __('Custom magnifier icon', 'ajax-search-pro'), $sd['magnifierimage_custom']);
    ?>
</div>
<div class="item"><?php
    $o = new wpdreamsGradient("magnifierbackground", __('Magnifier background color', 'ajax-search-pro'), $sd['magnifierbackground'])
    ?>
</div>
<div class="item">
    <?php
    $o = new wpdreamsBorder("magnifierbackgroundborder", __('Magnifier-icon border', 'ajax-search-pro'), $sd['magnifierbackgroundborder']);
    ?>
</div>
<div class="item">
    <?php
    $o = new wpdreamsBoxShadow("magnifierboxshadow", __('Magnifier-icon box-shadow', 'ajax-search-pro'), $sd['magnifierboxshadow']);
    ?>
</div>
<fieldset>
    <legend><?php echo __('Close icon', 'ajax-search-pro'); ?></legend>
    <div class="item">
        <?php
        $o = new wpdreamsYesNo("show_close_icon", __('Show the close icon?', 'ajax-search-pro'), $sd['show_close_icon']);
        ?>
    </div>
	<div class="item" wd-enable-on="show_close_icon:1">
		<?php
		$o = new wpdreamsCustomSelect("close_icon_action", __('Close icon action', 'ajax-search-pro'), array(
				'selects'=>array(
					array("option" => __('Clear', 'ajax-search-pro'), "value" => "clear"),
					array("option" => __('Clear & Reset settings', 'ajax-search-pro'), "value" => "reset"),
					array("option" => __('Clear, Reset settings & Trigger search', 'ajax-search-pro'), "value" => "reset_and_search"),
				),
				'value'=>$sd['close_icon_action']
		));
		?>
		<p class="descMsg">
			<ul>
				<li><?php echo __('Clear: clears the search input.', 'ajax-search-pro'); ?></li>
				<li><?php echo __('Clear & Reset: Clears the search input and resets the search to initial state.', 'ajax-search-pro'); ?></li>
				<li><?php echo __('Clear, Reset settings & Trigger search: All the above and initiates a live search.', 'ajax-search-pro'); ?></li>
			</ul>
		</p>
	</div>
	<div class="item" wd-enable-on="show_close_icon:1;close_icon_action:clear,reset">
		<?php
		$o = new wpdreamsYesNo("close_icon_close_results", __('Close the results container after clicking the close icon?', 'ajax-search-pro'), $sd['close_icon_close_results']);
		?>
	</div>
    <div class="item item-flex-nogrow item-flex-wrap" wd-enable-on="show_close_icon:1">
        <?php
        $o = new wpdreamsColorPicker("close_icon_background", __('Close icon background', 'ajax-search-pro'), $sd['close_icon_background']);
        $o = new wpdreamsColorPicker("close_icon_fill", __('.. icon color', 'ajax-search-pro'), $sd['close_icon_fill']);
        $o = new wpdreamsColorPicker("close_icon_outline", __('..icon outline', 'ajax-search-pro'), $sd['close_icon_outline']);
        ?>
    </div>
</fieldset>


<fieldset>
	<legend><?php echo __('Loader animation', 'ajax-search-pro'); ?></legend>
	<div class="item">
	    <?php
	    $o = new wpdreamsCustomSelect("loader_display_location", __('Loading animation display location', 'ajax-search-pro'), array(
	        'selects'=>array(
	            array("option" => __('Auto', 'ajax-search-pro'), "value" => "auto"),
	            array("option" => __('In search bar', 'ajax-search-pro'), "value" => "search"),
	            array("option" => __('In results box', 'ajax-search-pro'), "value" => "results"),
	            array("option" => __('Both', 'ajax-search-pro'), "value" => "both"),
	            array("option" => __('None', 'ajax-search-pro'), "value" => "none")
	        ),
	        'value'=>$sd['loader_display_location']
	    ));
	    ?>
	    <p class="descMsg">
	        <?php echo __('By default the loader displays in the search bar. If the search bar is hidden, id displays in the results box instead.', 'ajax-search-pro'); ?>
	    </p>
	</div>
	<div class="item" id="magn_ajaxsearchpro_1">
	    <div class="probox">
	    <?php
	    /*$o = new wpdreamsImageRadio("loadingimage", __('Loading image', 'ajax-search-pro'), array(
	            'images'  => $sd['loadingimage_selects'],
	            'value'=> $sd['loadingimage']
	        )
	    );
	    $params[$o->getName()] = $o->getData();*/

	    $o = new wpdreamsLoaderSelect( "loader_image", __('Loading image', 'ajax-search-pro'), $sd['loader_image'] );
	    ?>
	    </div>
	</div>
	<div class="item"><?php
	    $o = new wpdreamsColorPicker("loadingimage_color", __('Loader color', 'ajax-search-pro'), $sd['loadingimage_color']);
	    ?>
	</div>
	<div class="item"><?php
	    $o = new wpdreamsUpload("loadingimage_custom", __('Custom loading icon', 'ajax-search-pro'), $sd['loadingimage_custom']);
	    ?>
	</div>
</fieldset>