{{ 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="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title"><i class="fa fa-pencil"></i> {{ text_edit }}</h3>
                <div class="btn-title">
                    <a href="{{ menu_editor_link }}" data-toggle="tooltip" title="{{ text_menu_editor }}" class="btn btn-widget"><i class="fa fa-bars" aria-hidden="true"></i> Menu Editor</a>
                </div>
            </div>
            <div class="panel-body">
                <form action="{{ action }}" method="post" enctype="multipart/form-data" id="form-module" class="form-horizontal">
                    <div class="frm-settings">
                        <div class="form-group">
                            <h4>{{ text_general_setting }}</h4>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label" for="input-name">{{ entry_name }}</label>
                            <div class="col-sm-10">
                                <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-4">
                                <select name="status" id="input-status" class="form-control">
                                    {% if status %}
                                        <option value="1" selected="selected">{{ text_enabled }}</option>
                                        <option value="0">{{ text_disabled }}</option>
                                    {% else %}
                                        <option value="1">{{ text_enabled }}</option>
                                        <option value="0" selected="selected">{{ text_disabled }}</option>
                                    {% endif %}
                                </select>
                            </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="frm-settings">
                        <div class="form-group">
                            <h4>{{ text_menu_bar_setting }}</h4>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label" for="input-menu-height">{{ entry_menu_height }}</label>
                            <div class="col-sm-4">
                                <input type="text" name="menu_height" value="{{ menu_height }}" id="input-menu-height" class="form-control" />
                            </div>
                        </div>
                        <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="frm-settings">
                        <div class="form-group">
                            <h4>{{ text_top_item_setting }}</h4>
                        </div>
                        <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-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="frm-settings">
                        <div class="form-group">
                            <h4>{{ text_mega_menu_setting }}</h4>
                        </div>
                        <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-text-color">{{ entry_menu_text_color }}</label>
                            <div class="col-sm-2">
                                <input type="text" id="input-mega-text-color" class="jscolor form-control" name="mega_text_color" value="{{ mega_text_color }}" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label" for="input-mega-menu-width">{{ entry_menu_width }}</label>
                            <div class="col-sm-4">
                                <input type="text" id="input-mega-menu-width" class="form-control" name="mega_menu_width" value="{{ mega_menu_width }}" />
                            </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="frm-settings">
                        <div class="form-group">
                            <h4>{{ text_flyout_menu_setting }}</h4>
                        </div>
                        <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="500" {% if third_item_font_weight == '500' %} selected="selected" {% endif %}>{{ text_medium ~ ' (500)'}}  </option>
											<option value="600" {% if third_item_font_weight == '600' %} selected="selected" {% endif %}>{{ text_semibold ~ ' (600)'}}  </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="500" {% if third_item_font_weight_hover == '500' %} selected="selected" {% endif %}>{{ text_medium ~ ' (500)'}}  </option>
											<option value="600" {% if third_item_font_weight_hover == '600' %} selected="selected" {% endif %}>{{ text_semibold ~ ' (600)'}}  </option>
                                            <option value="700" {% if third_item_font_weight_hover == '700' %} selected="selected" {% endif %}>{{ text_bold ~ ' (700)'}}  </option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{{ footer }}