{{ header }}{{ column_left }}
<div id="content">
    <div class="page-header">
        <div class="container-fluid">
            <div class="pull-right">
                <button type="submit" form="form-module" data-toggle="tooltip" title="{{ button_save }}" class="btn btn-primary"><i class="fa fa-save"></i></button>
                <a href="{{ cancel }}" data-toggle="tooltip" title="{{ button_cancel }}" class="btn btn-default"><i class="fa fa-reply"></i></a></div>
            <h1>{{ heading_title }}</h1>
            <ul class="breadcrumb">
                {% for breadcrumb in breadcrumbs %}
                    <li><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li>
                {% endfor %}
            </ul>
        </div>
    </div>
    <div class="container-fluid">
        {% if error_warning %}
            <div class="alert alert-danger alert-dismissible"><i class="fa fa-exclamation-circle"></i> {{ error_warning }}
                <button type="button" class="close" data-dismiss="alert">&times;</button>
            </div>
        {% endif %}
        <div class="theme-option-container">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title"><i class="fa fa-pencil"></i> {{ text_edit }}</h3>
                </div>
                <div class="panel-body">
                    <form action="{{ action }}" method="post" enctype="multipart/form-data" id="form-module" class="form-horizontal">
                        <ul class="nav nav-tabs hoz-ul-sections">
                            <li class="active"><a href="#tab-general" data-toggle="tab">{{ text_general_setting }}</a></li>
                            <li><a href="#tab-menu-bar" data-toggle="tab">{{ text_menu_bar_setting }}</a></li>
                            <li><a href="#tab-top-item" data-toggle="tab">{{ text_top_item_setting }}</a></li>
                            <li><a href="#tab-mega" data-toggle="tab">{{ text_mega_menu_setting }}</a></li>
                            <li><a href="#tab-flyout" data-toggle="tab">{{ text_flyout_menu_setting }}</a></li>
                        </ul>
                        <div class="tab-content">
                            <div class="tab-pane active" id="tab-general">
                                <div class="form-group">
                                    <label class="col-sm-2 control-label" for="input-name">{{ entry_name }}</label>
                                    <div class="col-sm-6">
                                        <input type="text" name="name" value="{{ name }}" placeholder="{{ entry_name }}" id="input-name" class="form-control" />
                                        {% if error_name %}
                                            <div class="text-danger">{{ error_name }}</div>
                                        {% endif %}
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label" for="input-status">{{ entry_status }}</label>
                                    <div class="col-sm-6">
                                        <input type="hidden" name="status" value="0" />
                                        <input type="checkbox" class="ckb-switch" name="status" id="input-status"
                                               data-toggle="toggle" data-on="{{ text_enabled }}" data-off="{{ text_disabled }}" data-width="100" data-height="36"
                                                {% if status %} value="1" checked {% else %} value="0" {% endif %}>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label" for="input-menu">{{ entry_choose_menu }}</label>
                                    <div class="col-sm-4">
                                        <select name="menu" id="input-menu" class="form-control">
                                            {% if menus %}
                                                {% for m in menus %}
                                                    <option value="{{ m.id }}" {% if menu == m.id %} selected="selected" {% endif %}>{{ m.name }}</option>
                                                {% endfor %}
                                            {% else %}
                                                <option>{{ text_no_menus }}</option>
                                            {% endif %}
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label" for="input-effect">{{ entry_effect }}</label>
                                    <div class="col-sm-4">
                                        <select name="effect" id="input-effect" class="form-control">
                                            <option value="none"  {% if effect == 'none' %}  selected="selected" {% endif %}>{{ text_none }} </option>
                                            <option value="fade"  {% if effect == 'fade' %}  selected="selected" {% endif %}>{{ text_fade }} </option>
                                            <option value="slide" {% if effect == 'slide' %} selected="selected" {% endif %}>{{ text_slide }}</option>
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="tab-pane" id="tab-menu-bar">
                                <div class="form-group">
                                    <label class="col-sm-2 control-label" for="input-menu-bg">{{ entry_menu_background }}</label>
                                    <div class="col-sm-2">
                                        <input type="text" id="input-menu-bg" class="jscolor form-control" name="menu_bg" value="{{ menu_bg }}" />
                                    </div>
                                </div>
								
                                <div class="form-group">
                                    <label class="col-sm-2 control-label" for="input-menu-text-color">{{ entry_menu_text_color }}</label>
                                    <div class="col-sm-2">
                                        <input type="text" id="input-menu-text-color" class="jscolor form-control" name="menu_text_color" value="{{ menu_text_color }}" />
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label" for="input-menu-padding">{{ entry_menu_padding }}</label>
                                    <div class="col-sm-2">
                                        <div class="form-sp"><span>{{ text_top }}</span></div>
                                        <input type="text" class="form-control" name="menu_pd_top" value="{{ menu_pd_top }}" />
                                    </div>
                                    <div class="col-sm-2">
                                        <div class="form-sp"><span>{{ text_right }}</span></div>
                                        <input type="text" class="form-control" name="menu_pd_right" value="{{ menu_pd_right }}" />
                                    </div>
                                    <div class="col-sm-2">
                                        <div class="form-sp"><span>{{ text_bottom }}</span></div>
                                        <input type="text" class="form-control" name="menu_pd_bottom" value="{{ menu_pd_bottom }}" />
                                    </div>
                                    <div class="col-sm-2">
                                        <div class="form-sp"><span>{{ text_left }}</span></div>
                                        <input type="text" class="form-control" name="menu_pd_left" value="{{ menu_pd_left }}" />
                                    </div>
                                </div>
                            </div>

                            <div class="tab-pane" id="tab-top-item">
                                <div class="form-group">
                                    <label class="col-sm-2 control-label" for="input-item-bg">{{ entry_item_background }}</label>
                                    <div class="col-sm-2">
                                        <div class="form-sp"><span>{{ text_static }}</span></div>
                                        <input type="text" id="input-item-bg" class="jscolor form-control" name="item_bg" value="{{ item_bg }}" />
                                    </div>
                                    <div class="col-sm-2">
                                        <div class="form-sp"><span>{{ text_hover }}</span></div>
                                        <input type="text" id="input-item-bg-hover" class="jscolor form-control" name="item_bg_hover" value="{{ item_bg_hover }}" />
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label" for="input-item-font">{{ entry_item_font }}</label>
                                    <div class="col-sm-2">
                                        <div class="form-sp"><span>{{ text_color }}</span></div>
                                        <input type="text" id="input-item-font" class="jscolor form-control" name="item_font_color" value="{{ item_font_color }}" />
                                    </div>
                                    <div class="col-sm-2">
                                        <div class="form-sp"><span>{{ text_size }}</span></div>
                                        <input type="text" id="input-item-font-size" class="form-control" name="item_font_size" value="{{ item_font_size }}" />
                                    </div>
                                    <div class="col-sm-2">
                                        <div class="form-sp"><span>{{ text_transform }}</span></div>
                                        <select name="item_font_transform" id="input-item-font-transform" class="form-control">
                                            <option value="none"        {% if item_font_transform == 'none' %}        selected="selected" {% endif %}>{{ text_normal }}    </option>
                                            <option value="capitalize"  {% if item_font_transform == 'capitalize' %}  selected="selected" {% endif %}>{{ text_capitalize }}</option>
                                            <option value="uppercase"   {% if item_font_transform == 'uppercase' %}   selected="selected" {% endif %}>{{ text_uppercase }} </option>
                                            <option value="lowercase"   {% if item_font_transform == 'lowercase' %}   selected="selected" {% endif %}>{{ text_lowercase }} </option>
                                        </select>
                                    </div>
                                    <div class="col-sm-2">
                                        <div class="form-sp"><span>{{ text_weight }}</span></div>
                                        <select name="item_font_weight" id="input-item-font-weigth" class="form-control">
                                            <option value="300" {% if item_font_weight == '300' %} selected="selected" {% endif %}>{{ text_light ~ ' (300)'}} </option>
                                            <option value="400" {% if item_font_weight == '400' %} selected="selected" {% endif %}>{{ text_normal ~ ' (400)'}}  </option>
                                            <option value="500" {% if item_font_weight == '500' %} selected="selected" {% endif %}>{{ text_medium ~ ' (500)'}}  </option>
                                            <option value="600" {% if item_font_weight == '600' %} selected="selected" {% endif %}>{{ text_semibold ~ ' (600)'}}  </option>
                                            <option value="700" {% if item_font_weight == '700' %} selected="selected" {% endif %}>{{ text_bold ~ ' (700)'}}  </option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label" for="input-item-font-hover">{{ entry_item_font ~ ' (' ~ text_hover ~ ')' }}</label>
                                    <div class="col-sm-2">
                                        <div class="form-sp"><span>{{ text_color }}</span></div>
                                        <input type="text" id="input-item-font-hover" class="jscolor form-control" name="item_font_color_hover" value="{{ item_font_color_hover }}" />
                                    </div>
                                    <div class="col-sm-2">
                                        <div class="form-sp"><span>{{ text_weight }}</span></div>
                                        <select name="item_font_weight_hover" id="input-item-font-weigth-hover" class="form-control">
                                            <option value="300" {% if item_font_weight_hover == '300' %} selected="selected" {% endif %}>{{ text_light ~ ' (300)'}} </option>
                                            <option value="400" {% if item_font_weight_hover == '400' %} selected="selected" {% endif %}>{{ text_normal ~ ' (400)'}}  </option>
                                            <option value="500" {% if item_font_weight_hover == '500' %} selected="selected" {% endif %}>{{ text_medium ~ ' (500)'}}  </option>
                                            <option value="600" {% if item_font_weight_hover == '600' %} selected="selected" {% endif %}>{{ text_semibold ~ ' (600)'}}  </option>
                                            <option value="700" {% if item_font_weight_hover == '700' %} selected="selected" {% endif %}>{{ text_bold ~ ' (700)'}}  </option>
                                        </select>
                                    </div>
                                </div>
								<div class="form-group">
                                    <label class="col-sm-2 control-label" for="input-item-padding">{{ entry_menu_padding }}</label>
                                    <div class="col-sm-2">
                                        <div class="form-sp"><span>{{ text_top }}</span></div>
                                        <input type="text" class="form-control" name="item_pd_top" value="{{ item_pd_top }}" />
                                    </div>
                                    <div class="col-sm-2">
                                        <div class="form-sp"><span>{{ text_right }}</span></div>
                                        <input type="text" class="form-control" name="item_pd_right" value="{{ item_pd_right }}" />
                                    </div>
                                    <div class="col-sm-2">
                                        <div class="form-sp"><span>{{ text_bottom }}</span></div>
                                        <input type="text" class="form-control" name="item_pd_bottom" value="{{ item_pd_bottom }}" />
                                    </div>
                                    <div class="col-sm-2">
                                        <div class="form-sp"><span>{{ text_left }}</span></div>
                                        <input type="text" class="form-control" name="item_pd_left" value="{{ item_pd_left }}" />
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label" for="input-item-show">{{ entry_number_items }}</label>
                                    <div class="col-sm-2">
                                        <input type="text" name="item_show" value="{{ item_show }}" id="input-item-show" class="form-control" />
                                    </div>
                                    <div class="col-sm-6 control-label" style="text-align: left">
                                        <i class="fa fa-exclamation-circle"></i> <i>{{ text_for_menu }}</i>
                                    </div>
                                </div>
                            </div>

                            <div class="tab-pane" id="tab-mega">
                                <div class="form-group">
                                    <label class="col-sm-2 control-label" for="input-mega-menu-bg">{{ entry_menu_background }}</label>
                                    <div class="col-sm-2">
                                        <input type="text" id="input-mega-menu-bg" class="jscolor form-control" name="mega_menu_bg" value="{{ mega_menu_bg }}" />
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label" for="input-mega-sub-item">{{ entry_menu_sub_item }}</label>
									<div class="col-sm-2">
                                        <div class="form-sp"><span>{{ text_color }}</span></div>
                                        <input type="text" id="input-mega-sub-item-font" class="jscolor form-control" name="mega_sub_item_font_color" value="{{ mega_sub_item_font_color }}" />
                                    </div>
                                    <div class="col-sm-2">
                                        <div class="form-sp"><span>{{ text_size }}</span></div>
                                        <input type="text" id="input-mega-sub-item-font-size" class="form-control" name="mega_sub_item_font_size" value="{{ mega_sub_item_font_size }}" />
                                    </div>
                                    <div class="col-sm-2">
                                        <div class="form-sp"><span>{{ text_transform }}</span></div>
                                        <select name="mega_sub_item_font_transform" id="input-mega-sub-item-font-transform" class="form-control">
                                            <option value="none"        {% if mega_sub_item_font_transform == 'none' %}        selected="selected" {% endif %}>{{ text_normal }}    </option>
                                            <option value="capitalize"  {% if mega_sub_item_font_transform == 'capitalize' %}  selected="selected" {% endif %}>{{ text_capitalize }}</option>
                                            <option value="uppercase"   {% if mega_sub_item_font_transform == 'uppercase' %}   selected="selected" {% endif %}>{{ text_uppercase }} </option>
                                            <option value="lowercase"   {% if mega_sub_item_font_transform == 'lowercase' %}   selected="selected" {% endif %}>{{ text_lowercase }} </option>
                                        </select>
                                    </div>
                                    <div class="col-sm-2">
                                        <div class="form-sp"><span>{{ text_weight }}</span></div>
                                        <select name="mega_sub_item_font_weight" id="input-mega-sub-item-font-weigth" class="form-control">
                                            <option value="300" {% if mega_sub_item_font_weight == '300' %} selected="selected" {% endif %}>{{ text_light ~ ' (300)'}} </option>
                                            <option value="400" {% if mega_sub_item_font_weight == '400' %} selected="selected" {% endif %}>{{ text_normal ~ ' (400)'}}  </option>
                                            <option value="500" {% if mega_sub_item_font_weight == '500' %} selected="selected" {% endif %}>{{ text_medium ~ ' (500)'}}  </option>
                                            <option value="600" {% if mega_sub_item_font_weight == '600' %} selected="selected" {% endif %}>{{ text_semibold ~ ' (600)'}}  </option>
                                            <option value="700" {% if mega_sub_item_font_weight == '700' %} selected="selected" {% endif %}>{{ text_bold ~ ' (700)'}}  </option>
                                        </select>
                                    </div>
                                </div>
								<div class="form-group">
                                    <label class="col-sm-2 control-label" for="input-mega-sub-item">{{ entry_menu_sub_item_hover }}</label>
									<div class="col-sm-2">
                                        <div class="form-sp"><span>{{ text_color }}</span></div>
                                        <input type="text" id="input-mega-sub-item-hover-font" class="jscolor form-control" name="mega_sub_item_hover_font_color" value="{{ mega_sub_item_hover_font_color }}" />
                                    </div>
                                    <div class="col-sm-2">
                                        <div class="form-sp"><span>{{ text_weight }}</span></div>
                                        <select name="mega_sub_item_hover_font_weight" id="input-mega-sub-item-hover-font-weigth" class="form-control">
                                            <option value="300" {% if mega_sub_item_hover_font_weight == '300' %} selected="selected" {% endif %}>{{ text_light ~ ' (300)'}} </option>
                                            <option value="400" {% if mega_sub_item_hover_font_weight == '400' %} selected="selected" {% endif %}>{{ text_normal ~ ' (400)'}}  </option>
                                            <option value="500" {% if mega_sub_item_hover_font_weight == '500' %} selected="selected" {% endif %}>{{ text_medium ~ ' (500)'}}  </option>
                                            <option value="600" {% if mega_sub_item_hover_font_weight == '600' %} selected="selected" {% endif %}>{{ text_semibold ~ ' (600)'}}  </option>
                                            <option value="700" {% if mega_sub_item_hover_font_weight == '700' %} selected="selected" {% endif %}>{{ text_bold ~ ' (700)'}}  </option>
                                        </select>
                                    </div>
                                </div>
								<div class="form-group">
                                    <label class="col-sm-2 control-label" for="input-mega-sub-item">{{ entry_menu_sub_sub_item }}</label>
									<div class="col-sm-2">
                                        <div class="form-sp"><span>{{ text_color }}</span></div>
                                        <input type="text" id="input-mega-sub-sub-item-font" class="jscolor form-control" name="mega_sub_sub_item_font_color" value="{{ mega_sub_sub_item_font_color }}" />
                                    </div>
                                    <div class="col-sm-2">
                                        <div class="form-sp"><span>{{ text_size }}</span></div>
                                        <input type="text" id="input-mega-sub-sub-item-font-size" class="form-control" name="mega_sub_sub_item_font_size" value="{{ mega_sub_sub_item_font_size }}" />
                                    </div>
                                    <div class="col-sm-2">
                                        <div class="form-sp"><span>{{ text_transform }}</span></div>
                                        <select name="mega_sub_sub_item_font_transform" id="input-mega-sub-sub-item-font-transform" class="form-control">
                                            <option value="none"        {% if mega_sub_sub_item_font_transform == 'none' %}        selected="selected" {% endif %}>{{ text_normal }}    </option>
                                            <option value="capitalize"  {% if mega_sub_sub_item_font_transform == 'capitalize' %}  selected="selected" {% endif %}>{{ text_capitalize }}</option>
                                            <option value="uppercase"   {% if mega_sub_sub_item_font_transform == 'uppercase' %}   selected="selected" {% endif %}>{{ text_uppercase }} </option>
                                            <option value="lowercase"   {% if mega_sub_sub_item_font_transform == 'lowercase' %}   selected="selected" {% endif %}>{{ text_lowercase }} </option>
                                        </select>
                                    </div>
                                    <div class="col-sm-2">
                                        <div class="form-sp"><span>{{ text_weight }}</span></div>
                                        <select name="mega_sub_sub_item_font_weight" id="input-mega-sub-sub-item-font-weigth" class="form-control">
                                            <option value="300" {% if mega_sub_sub_item_font_weight == '300' %} selected="selected" {% endif %}>{{ text_light ~ ' (300)'}} </option>
                                            <option value="400" {% if mega_sub_sub_item_font_weight == '400' %} selected="selected" {% endif %}>{{ text_normal ~ ' (400)'}}  </option>
                                            <option value="500" {% if mega_sub_sub_item_font_weight == '500' %} selected="selected" {% endif %}>{{ text_medium ~ ' (500)'}}  </option>
                                            <option value="600" {% if mega_sub_sub_item_font_weight == '600' %} selected="selected" {% endif %}>{{ text_semibold ~ ' (600)'}}  </option>
                                            <option value="700" {% if mega_sub_sub_item_font_weight == '700' %} selected="selected" {% endif %}>{{ text_bold ~ ' (700)'}}  </option>
                                        </select>
                                    </div>
                                </div>
								<div class="form-group">
                                    <label class="col-sm-2 control-label" for="input-mega-sub-sub-item">{{ entry_menu_sub_sub_item_hover }}</label>
									<div class="col-sm-2">
                                        <div class="form-sp"><span>{{ text_color }}</span></div>
                                        <input type="text" id="input-mega-sub-sub-item-hover-font" class="jscolor form-control" name="mega_sub_sub_item_hover_font_color" value="{{ mega_sub_sub_item_hover_font_color }}" />
                                    </div>
                                    <div class="col-sm-2">
                                        <div class="form-sp"><span>{{ text_weight }}</span></div>
                                        <select name="mega_sub_sub_item_hover_font_weight" id="input-mega-sub-sub-item-hover-font-weigth" class="form-control">
                                            <option value="300" {% if mega_sub_sub_item_hover_font_weight == '300' %} selected="selected" {% endif %}>{{ text_light ~ ' (300)'}} </option>
                                            <option value="400" {% if mega_sub_sub_item_hover_font_weight == '400' %} selected="selected" {% endif %}>{{ text_normal ~ ' (400)'}}  </option>
                                            <option value="500" {% if mega_sub_sub_item_hover_font_weight == '500' %} selected="selected" {% endif %}>{{ text_medium ~ ' (500)'}}  </option>
                                            <option value="600" {% if mega_sub_sub_item_hover_font_weight == '600' %} selected="selected" {% endif %}>{{ text_semibold ~ ' (600)'}}  </option>
                                            <option value="700" {% if mega_sub_sub_item_hover_font_weight == '700' %} selected="selected" {% endif %}>{{ text_bold ~ ' (700)'}}  </option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label" for="input-mega-menu-padding">{{ entry_menu_padding }}</label>
                                    <div class="col-sm-2">
                                        <div class="form-sp"><span>{{ text_top }}</span></div>
                                        <input type="text" class="form-control" name="mega_menu_pd_top" value="{{ mega_menu_pd_top }}" />
                                    </div>
                                    <div class="col-sm-2">
                                        <div class="form-sp"><span>{{ text_right }}</span></div>
                                        <input type="text" class="form-control" name="mega_menu_pd_right" value="{{ mega_menu_pd_right }}" />
                                    </div>
                                    <div class="col-sm-2">
                                        <div class="form-sp"><span>{{ text_bottom }}</span></div>
                                        <input type="text" class="form-control" name="mega_menu_pd_bottom" value="{{ mega_menu_pd_bottom }}" />
                                    </div>
                                    <div class="col-sm-2">
                                        <div class="form-sp"><span>{{ text_left }}</span></div>
                                        <input type="text" class="form-control" name="mega_menu_pd_left" value="{{ mega_menu_pd_left }}" />
                                    </div>
                                </div>
                            </div>

                            <div class="tab-pane" id="tab-flyout">
                                <ul class="nav nav-tabs">
                                    <li class="active"><a href="#tab-second-item" data-toggle="tab">{{ tab_second_item }}</a></li>
                                    <li><a href="#tab-third-item" data-toggle="tab">{{ tab_third_item }}</a></li>
                                </ul>
                                <div class="tab-content">
                                    <div class="tab-pane active" id="tab-second-item">
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label" for="input-second-item-bg">{{ entry_item_background }}</label>
                                            <div class="col-sm-2">
                                                <div class="form-sp"><span>{{ text_static }}</span></div>
                                                <input type="text" id="input-second-item-bg" class="jscolor form-control" name="second_item_bg" value="{{ second_item_bg }}" />
                                            </div>
                                            <div class="col-sm-2">
                                                <div class="form-sp"><span>{{ text_hover }}</span></div>
                                                <input type="text" id="input-second-item-bg-hover" class="jscolor form-control" name="second_item_bg_hover" value="{{ second_item_bg_hover }}" />
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label" for="input-second-item-font">{{ entry_item_font }}</label>
                                            <div class="col-sm-2">
                                                <div class="form-sp"><span>{{ text_color }}</span></div>
                                                <input type="text" id="input-second-item-font" class="jscolor form-control" name="second_item_font_color" value="{{ second_item_font_color }}" />
                                            </div>
                                            <div class="col-sm-2">
                                                <div class="form-sp"><span>{{ text_size }}</span></div>
                                                <input type="text" id="input-second-item-font-size" class="form-control" name="second_item_font_size" value="{{ second_item_font_size }}" />
                                            </div>
                                            <div class="col-sm-2">
                                                <div class="form-sp"><span>{{ text_transform }}</span></div>
                                                <select name="second_item_font_transform" id="input-second-item-font-transform" class="form-control">
                                                    <option value="none"        {% if second_item_font_transform == 'none' %}        selected="selected" {% endif %}>{{ text_normal }}    </option>
                                                    <option value="capitalize"  {% if second_item_font_transform == 'capitalize' %}  selected="selected" {% endif %}>{{ text_capitalize }}</option>
                                                    <option value="uppercase"   {% if second_item_font_transform == 'uppercase' %}   selected="selected" {% endif %}>{{ text_uppercase }} </option>
                                                    <option value="lowercase"   {% if second_item_font_transform == 'lowercase' %}   selected="selected" {% endif %}>{{ text_lowercase }} </option>
                                                </select>
                                            </div>
                                            <div class="col-sm-2">
                                                <div class="form-sp"><span>{{ text_weight }}</span></div>
                                                <select name="second_item_font_weight" id="input-second-item-font-weigth" class="form-control">
                                                    <option value="300" {% if second_item_font_weight == '300' %} selected="selected" {% endif %}>{{ text_light ~ ' (300)'}} </option>
                                                    <option value="400" {% if second_item_font_weight == '400' %} selected="selected" {% endif %}>{{ text_normal ~ ' (400)'}}  </option>
                                                    <option value="500" {% if second_item_font_weight == '500' %} selected="selected" {% endif %}>{{ text_medium ~ ' (500)'}}  </option>
                                                    <option value="600" {% if second_item_font_weight == '600' %} selected="selected" {% endif %}>{{ text_semibold ~ ' (600)'}}  </option>
                                                    <option value="700" {% if second_item_font_weight == '700' %} selected="selected" {% endif %}>{{ text_bold ~ ' (700)'}}  </option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label" for="input-second-item-font-hover">{{ entry_item_font ~ ' (' ~ text_hover ~ ')' }}</label>
                                            <div class="col-sm-2">
                                                <div class="form-sp"><span>{{ text_color }}</span></div>
                                                <input type="text" id="input-second-item-font-hover" class="jscolor form-control" name="second_item_font_color_hover" value="{{ second_item_font_color_hover }}" />
                                            </div>
                                            <div class="col-sm-2">
                                                <div class="form-sp"><span>{{ text_weight }}</span></div>
                                                <select name="second_item_font_weight_hover" id="input-second-item-font-weigth-hover" class="form-control">
                                                    <option value="300" {% if second_item_font_weight_hover == '300' %} selected="selected" {% endif %}>{{ text_light ~ ' (300)'}} </option>
                                                    <option value="400" {% if second_item_font_weight_hover == '400' %} selected="selected" {% endif %}>{{ text_normal ~ ' (400)'}}  </option>
                                                    <option value="500" {% if second_item_font_weight_hover == '500' %} selected="selected" {% endif %}>{{ text_medium ~ ' (500)'}}  </option>
                                                    <option value="600" {% if second_item_font_weight_hover == '600' %} selected="selected" {% endif %}>{{ text_semibold ~ ' (600)'}}  </option>
                                                    <option value="700" {% if second_item_font_weight_hover == '700' %} selected="selected" {% endif %}>{{ text_bold ~ ' (700)'}}  </option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="tab-pane" id="tab-third-item">
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label" for="input-third-item-bg">{{ entry_item_background }}</label>
                                            <div class="col-sm-2">
                                                <div class="form-sp"><span>{{ text_static }}</span></div>
                                                <input type="text" id="input-third-item-bg" class="jscolor form-control" name="third_item_bg" value="{{ third_item_bg }}" />
                                            </div>
                                            <div class="col-sm-2">
                                                <div class="form-sp"><span>{{ text_hover }}</span></div>
                                                <input type="text" id="input-third-item-bg-hover" class="jscolor form-control" name="third_item_bg_hover" value="{{ third_item_bg_hover }}" />
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label" for="input-third-item-font">{{ entry_item_font }}</label>
                                            <div class="col-sm-2">
                                                <div class="form-sp"><span>{{ text_color }}</span></div>
                                                <input type="text" id="input-third-item-font" class="jscolor form-control" name="third_item_font_color" value="{{ third_item_font_color }}" />
                                            </div>
                                            <div class="col-sm-2">
                                                <div class="form-sp"><span>{{ text_size }}</span></div>
                                                <input type="text" id="input-third-item-font-size" class="form-control" name="third_item_font_size" value="{{ third_item_font_size }}" />
                                            </div>
                                            <div class="col-sm-2">
                                                <div class="form-sp"><span>{{ text_transform }}</span></div>
                                                <select name="third_item_font_transform" id="input-third-item-font-transform" class="form-control">
                                                    <option value="none"        {% if third_item_font_transform == 'none' %}        selected="selected" {% endif %}>{{ text_normal }}    </option>
                                                    <option value="capitalize"  {% if third_item_font_transform == 'capitalize' %}  selected="selected" {% endif %}>{{ text_capitalize }}</option>
                                                    <option value="uppercase"   {% if third_item_font_transform == 'uppercase' %}   selected="selected" {% endif %}>{{ text_uppercase }} </option>
                                                    <option value="lowercase"   {% if third_item_font_transform == 'lowercase' %}   selected="selected" {% endif %}>{{ text_lowercase }} </option>
                                                </select>
                                            </div>
                                            <div class="col-sm-2">
                                                <div class="form-sp"><span>{{ text_weight }}</span></div>
                                                <select name="third_item_font_weight" id="input-third-item-font-weigth" class="form-control">
                                                    <option value="300" {% if third_item_font_weight == '300' %} selected="selected" {% endif %}>{{ text_light ~ ' (300)'}} </option>
                                                    <option value="400" {% if third_item_font_weight == '400' %} selected="selected" {% endif %}>{{ text_normal ~ ' (400)'}}  </option>
                                                    <option value="700" {% if third_item_font_weight == '700' %} selected="selected" {% endif %}>{{ text_bold ~ ' (700)'}}  </option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label" for="input-third-item-font-hover">{{ entry_item_font ~ ' (' ~ text_hover ~ ')' }}</label>
                                            <div class="col-sm-2">
                                                <div class="form-sp"><span>{{ text_color }}</span></div>
                                                <input type="text" id="input-third-item-font-hover" class="jscolor form-control" name="third_item_font_color_hover" value="{{ third_item_font_color_hover }}" />
                                            </div>
                                            <div class="col-sm-2">
                                                <div class="form-sp"><span>{{ text_weight }}</span></div>
                                                <select name="third_item_font_weight_hover" id="input-third-item-font-weigth-hover" class="form-control">
                                                    <option value="300" {% if third_item_font_weight_hover == '300' %} selected="selected" {% endif %}>{{ text_light ~ ' (300)'}} </option>
                                                    <option value="400" {% if third_item_font_weight_hover == '400' %} selected="selected" {% endif %}>{{ text_normal ~ ' (400)'}}  </option>
                                                    <option value="700" {% if third_item_font_weight_hover == '700' %} selected="selected" {% endif %}>{{ text_bold ~ ' (700)'}}  </option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    $(document).ready(function() {
        $('.toggle.btn').on('click', function () {
            var ckb_status = parseInt($(this).find('.ckb-switch').val());
            if(ckb_status == 1) {
                $(this).find('.ckb-switch').val('0');
            } else {
                $(this).find('.ckb-switch').val('1');
            }
        });
    })
</script>
{{ footer }}