{{ header }}{{ column_left }}
<div id="content">
    <div class="page-header">
        <div class="container-fluid">
            <div class="pull-right">
                <button type="submit" form="form-slideshow" 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">
                <?php foreach ($breadcrumbs as $breadcrumb) { ?>
                <li><a href="{{ breadcrumb['href'] }}">{{ breadcrumb['text'] }}</a></li>
                <?php } ?>
            </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>
            <div class="panel-body">
                <form action="{{ action }}" method="post" enctype="multipart/form-data" id="form-module" class="form-horizontal">

                    <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-10">
                            <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-status">{{ text_homepage }}</label>
                        <div class="col-sm-10">
                            <select name="hhome" id="input-status" class="form-control">
                                {% if hhome %}
                                    <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-sticky">{{ text_sticky }}</label>
                        <div class="col-sm-10">
                            <select name="sticky" id="input-sticky" class="form-control">
                                {% if sticky %}
                                    <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-status">{{ text_depth }}</label>
                        <div class="col-sm-10">
                            <input class="form-control" type="text" name="hdepth" value="{% if hdepth %}{{ hdepth }}{% else %} 4 {% endif %}">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label" for="input-status">{{ text_level }}</label>
                        <div class="col-sm-10">
                            <input class="form-control" type="text" name="hlevel" value="{% if hlevel %}{{ hlevel }}{% else %}4{% endif %}">
                        </div>
                    </div>
                    <div style="display: none">
                        <div class="margin-form">
                            <input type="text" name="hactive" id="itemsInput" value="{% if hcate %}{{ hcate }}{% endif %}" size="70">
                        </div>
                    </div>
                    <div class="form-group">
                        <table id="setting" class="table table-striped table-bordered table-hover" style='text-align:center;'>
                            <tr>
                                <td>

                                    <select multiple="multiple" id="availableItems" style="width: 320px; height: 260px;">
                                        <optgroup label="Infomations">
                                            {{ cms_option }}
                                        </optgroup>
                                        <optgroup label="Category">
                                            {{ cate_option }}
                                        </optgroup>
                                        <optgroup label="Cms Links">
                                            {{ link_option }}
                                        </optgroup>
                                    </select>

                                </td>
                                <td>
                                    <select multiple="multiple" id="hactive" style="width: 320px; height: 260px;">
                                        {{ option_active }}
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <a href="#" id="addItem">Add</a>
                                </td>
                                <td>
                                    <a href="#" id="removeItem">Remove</a>
                                </td>
                                <td>
                                    <a href="#" id="menuOrderUp" class="button">&uarr;</a><br/>
                                    <a href="#" id="menuOrderDown" class="button">&darr;</a><br/>
                                </td>
                            </tr>
                            <script type="text/javascript">
                                function add() {
                                    $("#availableItems option:selected").each(function (i) {
                                        var val = $(this).val();
                                        var text = $(this).text();
                                        text = text.replace(/(^\s*)|(\s*$)/gi, "");
                                        $("#hactive").append("<option value=\"" + val + "\">" + text + "</option>");
                                    });
                                    serialize();
                                    return false;
                                }

                                function remove() {
                                    $("#hactive option:selected").each(function (i) {
                                        $(this).remove();
                                    });
                                    serialize();
                                    return false;
                                }

                                function serialize() {
                                    var options = "";
                                    $("#hactive option").each(function (i) {
                                        options += $(this).val() + ",";
                                    });
                                    $("#itemsInput").val(options.substr(0, options.length - 1));
                                }

                                function move(up) {
                                    var tomove = $("#hactive option:selected");
                                    if (tomove.length > 1) {
                                        alert('Please select just one item');
                                        return false;
                                    }
                                    if (up)
                                        tomove.prev().insertAfter(tomove);
                                    else
                                        tomove.next().insertBefore(tomove);
                                    serialize();
                                    return false;
                                }

                                $(document).ready(function () {
                                    $("#addItem").click(add);
                                    $("#availableItems").dblclick(add);
                                    $("#removeItem").click(remove);
                                    $("#hactive").dblclick(remove);
                                    $("#menuOrderUp").click(function (e) {
                                        e.preventDefault();
                                        move(true);
                                    });
                                    $("#menuOrderDown").click(function (e) {
                                        e.preventDefault();
                                        move();
                                    });
                                });
                            </script>
                        </table>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label" for="input-mobile">{{ text_mobile }}</label>
                        <div class="col-sm-10">
                            <select name="mobile" id="input-mobile" class="form-control">
                                {% if mobile %}
                                    <option value="1" selected="selected">{{ text_original }}</option>
                                    <option value="0">{{ text_category }}</option>
                                {% else %}
                                    <option value="1">{{ text_original }}</option>
                                    <option value="0" selected="selected">{{ text_category }}</option>
                                {% endif %}
                            </select>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{{ footer }}