{%- extends "admin/layout.html" -%}
{% block css %}
    <link rel="stylesheet" href="{{ url_for('admin.static', filename='css/select2.min.css') }}">
    <link rel="stylesheet" href="{{ url_for('admin.static', filename='css/select2-bootstrap.css') }}">
    <link rel="stylesheet" href="{{ url_for('admin.static', filename='css/typography.css') }}">
    <link rel="stylesheet" href="{{ url_for('admin.static', filename='css/textfield.css') }}">
    <link rel="stylesheet" href="{{ url_for('admin.static', filename='css/pmd-select2.css') }}">
{% endblock %}

{% block content %}
    <style type="text/css">
        a:link {
            color: #585858;
            text-decoration: none;
        }

        a:visited {
            text-decoration: none;
            color: #585858;
        }

        a:hover {
            text-decoration: none;
            color: #A4A4A4;
        }

        a:active {
            text-decoration: none;
            color: #A4A4A4;
        }
    </style>
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Main content -->
        <section class="content">
            <!-- Main row -->
            <div class="row">
                <!-- Left col -->
                <section class="col-lg-12 connectedSortable middle">
                    <div class="box box-primary">
                        <div class="box-header with-border">
                            <h3 class="box-title">添加菜单</h3>
                        </div>
                        <form class="form-horizontal" method="post" action="{{ url_for('admin.menu_save') }}">
                            <div>
                                {{ form.hidden_tag() }}
                                {{ form.name.label }}
                                {{ form.name(class="text form-control") }}<br>
                                {{ form.father.label }}
                                {{ form.father(class="text form-control") }}<br>
                                {{ form.url.label }}
                                {{ form.url(class="text form-control") }}<br>
                                {{ form.permissions.label }}
                                <select class="select-add-tags form-control pmd-select2-tags" multiple>
                                    {% for k, v in form.permissions.choices %}
                                        <option value="{{ k }}">{{ v }}</option>
                                    {% endfor %}
                                </select>
                                <input type="hidden" value="" name="permissions" id="permissions">
                                {{ form.sort.label }}
                                {{ form.sort(class="text form-control") }}<br>
                            </div>
                            <div class="box-footer">
                                <input class="btn btn-primary" type="submit" name="submit" value="添加菜单">
                            </div>
                        </form>
                    </div>

                </section>
            </div>
        </section>
    </div>
{% endblock %}
{% block js %}
    <script src="{{ url_for('admin.static', filename='js/textfield.js') }}"></script>
    <script src="{{ url_for('admin.static', filename='js/select2.full.js') }}"></script>
    <script src="{{ url_for('admin.static', filename='js/pmd-select2.js') }}"></script>
    <script>
        $(document).ready(function () {
            $(".select-add-tags").select2({
                tags: true,
                theme: "bootstrap"
            })
        });
        $(document).ready(function () {
            $(".select-add-tags").change(
                    function () {
                        var permissions = $(".select2-selection__rendered").children(".select2-selection__choice");
                        var pvalue = "";
                        if (permissions) {
                            for (var i = 0, len = permissions.length; i < len; i++) {
                                $(".select-add-tags option").map(function () {
                                    if ($(this).text() == $(permissions[i]).attr("title")) {
                                        pvalue = pvalue + $(this).val() + ",";
                                    }
                                })
                            }
                            $("#permissions").val(pvalue)
                        }
                    }
            )
        });
    </script>
{% endblock %}