<link href="catalog/view/theme/organic_organix_101_theme/asset/css/jquery.minicolors.css"  rel="stylesheet" />
<script  src="catalog/view/theme/organic_organix_101_theme/asset/js/jquery.minicolors.min.js"></script>

<div class="badthemecontrol-block"> 
    <div class="badthemecontrol-inner">
        <div class="badthemecontrol-icon-wrapper">
            <i class='material-icons'>&#xe8b8;</i>
        </div>
        <div class="badthemecontrol-setting">
            <h2 class="badthemecontrol-title">Theme Control</h2>
            <h3 class="badthemecontrol-sub-title">Theme Custom Setting</h3>
            
            <div class="badcontrol-theme-custom-color-wrapper badall-theme-content">
                <label for="letter-case" class="badcontrol-theme-custom-color-label badthemecontrol-field-title">Theme Color</label>
                <input type="text" class="badcontrol-theme-custom-color form-control badcustom-color" data-swatches="#2874f0|#90caf9|#a5d6a7|#fff59d|#ffcc80|#bcaaa4|#eeeeee|#f44336|#2196f3|#4caf50|#ffeb3b|#ff9800|#795548|#9e9e9e" data-default="rgba(255, 0, 0, 1)">
                {# <span class="help-block">
                    Example with swatches and opacity.
                </span> #}
            </div>

            <div class="badcontrol-theme-is-box-wrapper badall-theme-content">
                <label for="letter-case" class="badcontrol-theme-is-box-label badthemecontrol-field-title">Box Layout</label>
                <label class="switch">
                    <input type="checkbox" class="badcontrol-theme-is-box form-control">
                    <span class="slider"></span>
                </label>
            </div>

            <div class="badcontrol-theme-background-color-wrapper badall-theme-content">
                <label for="letter-case" class="badcontrol-theme-background-color-label badthemecontrol-field-title">Bg Color</label>
                <input type="text" class="badcontrol-theme-background-color form-control badcustom-color" data-swatches="#ef9a9a|#90caf9|#a5d6a7|#fff59d|#ffcc80|#bcaaa4|#eeeeee|#f44336|#2196f3|#4caf50|#ffeb3b|#ff9800|#795548|#9e9e9e" data-default="rgba(255, 255, 255, 1)">
                {# <span class="help-block">
                    Example with swatches and opacity.
                </span> #}
            </div>

            
            <div class="badcontrol-theme-bg-img-wrapper badall-theme-content">
                <div class="badcontrol-theme-img-box">
                    <label for="letter-case" class="badcontrol-theme-bg-img-label badthemecontrol-field-title">badthemecontrol</label>
                    
                     <div class="badcontrol-pattern-img-wrapper">
                        {% for key, patterimage in patterimages %}
                        <a href="Javascript:void(0);" class="badcontrol-pattern-img-inner badcontrol-pattern-no-{{ key }}" data-input="badcontrol-theme-bg-img" data-img="{{ patterimage }}" style="background-image:url({{ bgpatter }})"> </a>

                       {% endfor %}
                    </div>

                   

                </div>
            </div>

            <div class="badcontrol-layout-boxshadow-wrapper badall-theme-content">
                <label for="letter-case" class="badcontrol-layout-boxshadow-label badthemecontrol-field-title">Box Shadow</label>
                <label class="switch">
                    <input type="checkbox" class="badcontrol-layout-boxshadow form-control">
                    <span class="slider"></span>
                </label>
            </div>


            <div class="badcontrol-horimenu-sticky-wrapper badall-theme-content">
                <label for="letter-case" class="badcontrol-horimenu-sticky-label badthemecontrol-field-title">Menu Sticky</label>
                <label class="switch">
                    <input type="checkbox" class="badcontrol-horimenu-sticky form-control">
                    <span class="slider"></span>
                </label>
            </div>


            <div class="badcontrol-theme-font-wrapper badall-theme-content">
                <label for="letter-case" class="badcontrol-theme-font-label badthemecontrol-field-title">Theme Fonts</label>
                <select class="badcontrol-theme-font form-control ">
                    <option data-font-name="0" data-font-link="0">Select Theme Fonts</option>
                    {% for key, font_list in font_list %}
                        <option value="{{ key }}" data-font-name="{{ key }}" data-font-link="{{ font_list }}">{{ key }}</option>
                    {% endfor %}
                    
                </select>
            </div>

            <div class="badcontrol-body-font-wrapper badall-theme-content">
                <label for="letter-case" class="badcontrol-body-font-label badthemecontrol-field-title">Body Fonts</label>
                

                <select class="badcontrol-body-font form-control">
                    <option data-font-name="0" data-font-link="0">Select Body Fonts</option>

                    {% for key, font_list in font_list %}
                        <option value="{{ key }}" data-font-name="{{ key }}" data-font-link="{{ font_list }}">{{ key }}</option>
                    {% endfor %}
                    
                </select>
            </div>

            <div class="badcontrol-reset badall-theme-content">
                <a href="Javascript:void(0);" title="Reset">Reset</a>
            </div>
        </div>
    </div>
</div>