{% extends 'permission_index.html' %}

{% load static %}
{% load add_class %}

{% block title %}
    {{ title }} :: {{ block.super }}
{% endblock %}

{% block content %}
    <div class="col-12">
        <permission-component inline-template>
            {#    <div class="col-12">#}
            <form method="post">
                {% csrf_token %}
                <div class="btn-toolbar mt-2" role="toolbar">
                    <div class="btn-group mr-2" role="group">
                        {% include 'include/save_button.html' with name="Сохранить" %}
                    </div>
                </div>
                <div class="mt-4">
                    <div class="form-group row">
                        <div class="col-sm-1 col-form-label">
                            <label for="{{ permission.name.id_for_label }}">Название: </label>
                        </div>
                        <div class="col-sm-10">
                            <input type="text" name="name" v-model="name" value="{{ permission.name }}" maxlength="30"
                                   class=" form-control" id="id_name">
                        </div>
                        <div class="invalid-feedback d-block">
                            {{ permission.name.errors }}
                        </div>
                    </div>
                </div>
                <div class="mt-4">
                    <div class="form-group row">
                        <div class="col-sm-1 col-form-label">
                            <label for="{{ permission.name.id_for_label }}">Название2: </label>
                        </div>
                        <div class="ml-3">
                            <div class="dropdown">
                                <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton"
                                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    {|dropdownProject|}
                                </button>
                                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                    <a v-for="project in projects" class="dropdown-item"
                                       :class="{ 'active': project === selectedProject }"
                                       @click="selectedProject = project">{|project|}</a>
                                </div>
                            </div>

                        </div>
                        <div class="ml-3">
                            <div class="dropdown">
                                <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton"
                                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
                                        :class="{ 'disabled': !locations || locations.length === 0 }">
                                    {|dropdownLocation.name|}
                                </button>
                                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                    <a v-for="location in locations" class="dropdown-item"
                                       :class="{ 'active': location.id === selectedLocation }"
                                       @click="selectedLocation = location">{|location.name|}</a>
                                </div>
                            </div>
                        </div>
                        <div class="ml-3">
                            <div class="dropdown">
                                <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton"
                                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
                                        :class="{ 'disabled': !subgineries || subgineries.length === 0 }">
                                    {|dropdownSubginery.name|}
                                </button>
                                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                    <a v-for="subginery in subgineries" class="dropdown-item"
                                       :class="{ 'active': subginery.id === selectedSubginery }"
                                       @click="selectedSubginery = subginery">{|subginery.name|}</a>
                                </div>
                            </div>
                        </div>
                         <div class="ml-3">
                            <div class="dropdown">
                                <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton"
                                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
                                        :class="{ 'disabled': !engineries || engineries.length === 0 }">
                                    {|dropdownEnginery.name|}
                                </button>
                                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                    <a v-for="enginery in engineries" class="dropdown-item"
                                       :class="{ 'active': enginery.id === selectedEnginery }"
                                       @click="selectedEnginery = enginery">{|enginery.name|}</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                {#            <permission_component inline-template class="mt-4">#}
                {#                <div class="form-group row">#}
                {#                    <div class="col-sm-1 col-form-label">#}
                {#                        <label for="{{ permission.name.id_for_label }}">Название2: </label>#}
                {#                    </div>#}
                {#                    <div class="col-sm-10">#}
                {#                        <input type="text" name="name" v-model="main" maxlength="30"#}
                {#                               class=" form-control" id="id_name">#}
                {#                    </div>#}
                {#                </div>#}
                {#            </permission_component>#}
                {#            <div id="app2">#}
                {##}
                {#                #}
                {#                    <div class="col-xl-6 col-md-12 mb-3">#}
                {#                        <label for="name-cycle" class="form-label"><h6>Название цикла</h6></label>#}
                {#                        <input v-model="main" type="text" class="form-control" id="name-cycle"#}
                {#                               aria-describedby="name-cycle">#}
                {#                    </div>#}
                {#                </edit-modal-container>#}
                {#                <edit-modal-container inline-template>#}
                {#                    <div class="col-xl-6 col-md-12 mb-3">#}
                {#                        <label for="name-cycle" class="form-label"><h6>Название цикла2</h6></label>#}
                {#                        <input v-model="main" type="text" class="form-control" id="name-cycle"#}
                {#                               aria-describedby="name-cycle">#}
                {#                    </div>#}
                {#                </edit-modal-container>#}
                {#            </div>#}
            </form>
        </permission-component>
    </div>
    {#    <script src="{% static 'vue/permission.vue' %}"></script>#}
    {#    <script src="{% static 'vue/base_app.vue' %}"></script>#}
{% endblock %}
{% block script %}
    <script src='{% static "vue/permission.js" %}'></script>
    <script src='{% static "vue/permission_collector.js" %}'></script>
{% endblock %}