<?php defined('ABSPATH') or die("No script kiddies please!"); ?>
<?php $nwpsm_menu_fonts = get_option('nwpsm_fmenu_fonts'); ?>
<div class="nwpsm-display-setting-wrapper">
    <div class="nwpsm-header-title">
        <h4><?php _e('Menu Design Configuration.', 'nice-wp-side-menu'); ?></h4>
        <div class="nwpsm-subheader"><?php _e('All setting maynot be implementable for all kind of layout.', 'nice-wp-side-menu'); ?></div>
    </div>
    <div class="nwpsm-setting-body">
        <div class="nwpsm-menu-field-wrapper" id="nwpsm-template-layout">            
            <div class="nwpsm-menu-display-setting" id="nwpsm-menu-template-name">
                <label><?php _e('Enable Custom Design', 'nice-wp-side-menu'); ?></label>
                <div class="nwpsm-menu-inner-field">
                    <label for="nwpsm-custom-template-enable">
                        <input type="checkbox" id="nwpsm-custom-template-enable" name="nwpsm-template-title-name"/>
                    </label>
                </div>
                <div class="custom-design-template">
                    <p><?php _e('If not enabled, default design will be implemented', 'nice-wp-side-menu'); ?></p>
                </div>
            </div>
        </div>
        <div class="nwpsm-menu-design-settings">
            <div class="nwpsm-menu-background-color" id="nwpsm-general-layout">                
                <div class="nwpsm-menu-display-setting" id="nwpsm-bg-color-wrap">
                    <label><?php _e('Menu Background Color', 'nice-wp-side-menu'); ?></label>
                    <div class="nwpsm-menu-inner-field">
                        <input type="text" name="custom_template[menu_background_color]" id="menu-background-color" class="nwpsm-colorpicker-trigger"/>
                    </div>
                </div>              
            </div>
            <div class="nwpsm-menu-display-settings wpfm-menu-icon-field" id="wpfm-field-add-custom-image-icons">
                <label for="icon_picker_image_custom"><?php _e('Menu Background Image', 'nice-wp-side-menu'); ?></label>
                <span>
                    <input class="wpfm-icon-image-custom" type="text" id="wpfm-icon-picker-image-custom" name="custom_template[menu_background_image]" value=""/>
                    <input class="wpfm-icon-image-custom-upload button button-primary" type="button" value="Upload Background Image">
                </span>
            </div>
            <div class="nwpsm-menu-display-setting" id="nwpsm-nav-hover-active-icon-color-wrap">         
                <label><?php _e('Menu Item Hover/Active Color', 'nice-wp-side-menu'); ?></label>
                <div class="nwpsm-menu-inner-field">
                    <input type="text" id="nwpsm-icon-ah-color" name="custom_template[nwpsm_icon_acthov_color]" class="nwpsm-colorpicker-trigger"/>
                </div>
            </div>

            <div class="nwpsm-menu-display-setting" id="nwpsm-menu-color-wrap">
                <label><?php _e('Menu Item Font Color', 'nice-wp-side-menu'); ?></label>
                <div class="nwpsm-menu-inner-field">
                    <input type="text" id="nwpsm-title-font-color" name="custom_template[icon_title_font_color]"/>
                </div>
            </div>
            <div class="nwpsm-menu-display-setting" id="nwpsm-font-wrap">
                <label><?php _e('Menu Item Typography', 'nice-wp-side-menu'); ?></label>
                <div id="nwpsm-typography" class="nwpsm-menu-inner-field">
                    <select name="custom_template[icon_title_text_font]" id="nwpsm-menu-title-font" class="nwpsmfont nwpsm-menu-title-font">
                        <option value="default">Default</option>
                        <?php foreach ($nwpsm_menu_fonts as $nwpsm_menu_font) { ?>
                            <option value="<?php echo $nwpsm_menu_font; ?>"><?php echo $nwpsm_menu_font; ?></option>
                        <?php } ?>
                    </select>
                </div>
            </div>
            <div class="nwpsm-menu-display-setting" id="nwpsm-text-transform">
                <label><?php _e('Menu Item Text Transform Style', 'nice-wp-side-menu'); ?></label>
                <div id="nwpsm-title-text-transforms" class="nwpsm-menu-inner-field">
                    <select name="custom_template[title_text_transform]" id="nwpsm-title-text-transform" class="nwpsm-font">
                        <option value="capitalize"><?php _e('capitalize', 'nice-wp-side-menu'); ?></option>
                        <option value="uppercase"><?php _e('Uppercase', 'nice-wp-side-menu'); ?></option>
                        <option value="lowercase"><?php _e('lowercase', 'nice-wp-side-menu'); ?></option>
                        <option value="none"><?php _e('None', 'nice-wp-side-menu'); ?></option>
                    </select>
                </div>
            </div>                      
            <div class="nwpsm-font-demo-wrap">
                <div class="title-font-style" style="display:none;">
                </div>
                <span id="nwpsm-font-family">The Quick Brown Fox Jumps Over The Lazy Dog. 1234567890</span>
            </div>               
            <div class="nwpsm-menu-display-setting" id="nwpsm-font-size">
                <label><?php _e('Menu Item Font Size', 'nice-wp-side-menu'); ?></label>
                <span class="nwpsm-font-size-wrap">
                    <select class="nwpsm-select-font" name="custom_template[nwpsm_icon_title_font_size]" id="nwpsm-title-font-size">
                        <?php
                        $sizes = array('8', '9', '10', '11', '12', '14', '16', '18', '20', '22', '24', '26', '28', '36', '48', '72');
                        foreach ($sizes as $size) {
                            ?>
                            <option value="<?php echo $size; ?>"><?php echo $size; ?></option>
                        <?php } ?>
                    </select>
                </span>
            </div>                                
            <div class="nwpsm-menu-display-setting" id="nwpsm-nav-icon-margin-wrap">
                <label><?php _e('Menu Item Margin', 'nice-wp-side-menu'); ?></label>
                <div class="nwpsm-menu-inner-field" id="nwpsm-icon-margin">
                    <input type="number" id="nwpsm-icon-margin" name="custom_template[icon_margin]"/>
                </div>
            </div>
            <div class="nwpsm-menu-display-setting" id="nwpsm-stretchable-menu-direction">
                <label><?php _e('Expand Button Icon', 'nice-wp-side-menu'); ?></label>
                <div class="nwpsm-menu-inner-field">
                    <input class="nwpsm-icon-picker" type="hidden" id="nwpsm-icon-picker-icon" name="custom_template[expand_trig_icon_type]"/>
                    <div id="nwpsm-ctemp-icon-div" data-target="#nwpsm-icon-picker-icon" class="button icon-picker <?php
                    if (isset($options['icon'])) {
                        $v = explode('|', $options['icon']);
                        echo $v[0] . ' ' . $v[1];
                    }
                    ?>"><?php _e('Select Icon', 'nice-wp-side-menu'); ?></div>
                </div>
            </div>
            <div class="nwpsm-menu-display-setting" id="nwpsm-stretch-menu-icon-color">         
                <label><?php _e('Expand Button Icon Color', 'nice-wp-side-menu'); ?></label>
                <div class="nwpsm-menu-inner-field">
                    <input type="text" id="nwpsm-icon-str-tr-icon-color" name="custom_template[nwpsm_stretch_icon_color]" class="nwpsm-colorpicker-trigger"/>
                </div>
            </div>
            <div class="nwpsm-menu-display-setting" id="nwpsm-stretch-menu-icon-color">         
                <label><?php _e('Expand Button Background Color', 'nice-wp-side-menu'); ?></label>
                <div class="nwpsm-menu-inner-field">
                    <input type="text" id="nwpsm-icon-str-tr-icon-color" name="custom_template[nwpsm_stretch_background_color]" class="nwpsm-colorpicker-trigger"/>
                </div>
            </div>
            <div class="nwpsm-menu-display-setting" id="nwpsm-stretch-menu-icon-color">         
                <label><?php _e('Enable/Disable Menu Item Sepearator', 'nice-wp-side-menu'); ?></label>
                <div class="nwpsm-menu-inner-field">
                    <label for="nwpsm-menu-item-sepearator">
                        <input type="checkbox" id="nwpsm-menu-item-sepearator" name="custom_template[nwpsm_menu_item_seperator]" class="nwpsm-sepearator"/>
                    </label>
                </div>
            </div>
            <div class="nwpsm-menu-display-setting" id="nwpsm-stretch-menu-icon-color">         
                <label><?php _e('Menu Item Sepearator Color', 'nice-wp-side-menu'); ?></label>
                <div class="nwpsm-menu-inner-field">
                    <input type="input" id="nwpsm-menu-item-sepearator-color" name="custom_template[nwpsm_menu_item_seperator_color]" class="nwpsm-colorpicker-trigger"/>
                </div>
            </div>
            <div class="nwpsm-menu-display-setting" id="nwpsm-stretch-menu-icon-color">         
                <label><?php _e('Menu Item Sepearator Width', 'nice-wp-side-menu'); ?></label>
                <div class="nwpsm-menu-inner-field">
                    <input type="number" id="nwpsm-menu-item-sepearator-color" name="custom_template[nwpsm_menu_item_seperator_width]" class="nwpsm-colorpicker-width"/>
                </div>
            </div>
        </div><!-- .nwpsm-setting-body -->
    </div><!-- .nwpsm-display-setting-wrapper -->
</div>