{% extends 'permission_index.html' %}

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


{% block content %}
    {#    {% include 'include/_breadcrumbs.html' %}#}
    <div class="col-12">
        <role-component inline-template>
            <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>
                    <button type="button" class="btn-group btn btn-primary d-block "
                            @click="addPermission(activeProjectId)">
                        Добавить
                    </button>
                </div>


                <div class="mt-4">
                    <div class="form-group row">
                        <div class="col-sm-1 col-form-label">
                            <label for="{{ role.name.id_for_label }}">Название: </label>
                        </div>
                        <div class="col-sm-10">
                            <input type="text" name="name" value="{{ role.name }}" maxlength="30"
                                   class=" form-control" id="id_name">
                        </div>
                        <div class="invalid-feedback d-block">
                            {{ role.name.errors }}
                        </div>
                    </div>
                    <div class="form-group row">
                        {#                        <div class="col-sm-1 col-form-label">#}
                        {#                            <label for="permissions_id">Ограничения: </label>#}
                        {#                        </div>#}
                        <div class="container text-center col">
                            <!-- Nav tabs -->
                            <ul class="nav nav-tabs" id="myTab" role="tablist">
                                <li class="nav-item" role="presentation" v-for="(proj, index) in projects">
                                    <a class="nav-link" :id="'tab-' + proj.id" data-toggle="tab"
                                       :href="'#content-' + proj.id"
                                       role="tab"
                                       :aria-controls="'content-' + proj.id" :class="{ 'active': index === 0 }"
                                       @click="activeProjectId = proj.id"
                                       aria-selected="true">{|proj.id|} <span
                                            class="badge badge-info">{| proj.cnt |}</span></a>
                                </li>
                            </ul>
                            <div class="tab-content" id="myTabContent">
                                <div class="tab-pane fade" :id="'content-' + proj.id" role="tabpanel"
                                     :aria-labelledby="'tab-' + proj.id" :class="{ 'show active': index === 0 }"
                                     v-for="(proj, index) in projects">
                                    <div class="table-list" style="min-height: 200px">
                                        <permission-component
                                                v-if="permissions[proj.id]"
                                                inline-template
                                                class="mt-2"
                                                :class="{'row-disabled' : !globalSettingsList[proj.id]?.length}"
                                                :init-perm="JSON.parse(JSON.stringify(globalSettingsItemsByProject[proj.id]))"
                                                :init-is-edit="true"
                                                :init-locations="locations[proj.id]"
                                                :init-project="proj.id"
                                                :init-type-subgineries="typeSubgineriesByProject[proj.id]"
                                                :init-type-engineries="typeEngineriesByProject[proj.id]"
                                                :init-engineries="engineriesByProject[proj.id]"
                                                :edited="false"
                                                @update="globalUpdatePermission"
                                        >
                                            {% include 'forms/permission/edit.html' %}
                                        </permission-component>
                                        <div class="row ml-0 mr-0  mt-2 pt-2 pb-2 align-items-center bg-light border">
                                            <div class="ml-2 mr-1">
                                                <div class="custom-control custom-checkbox">
                                                    <input type="checkbox" class="custom-control-input"
                                                           id="customCheck1"
                                                           :checked="globalSettingsList[proj.id]?.length === permissions[proj.id]?.length"
                                                           @change="toggleGlobalSettingByProject(proj.id, $event.target.checked)"
                                                    >
                                                    <label class="custom-control-label" for="customCheck1" ></label>
                                                </div>
                                            </div>
                                            <div class="col-2">
                                                Локация
                                            </div>
                                            <div class="col-2">
                                                Подсистема
                                            </div>
                                            <div class="col-2">
                                                Тип объекта
                                            </div>
                                            <div class="col-2">
                                                Инженерный объект
                                            </div>
                                            <div class="col-2">
                                                Доступ
                                            </div>
                                            <div class="col-1">
                                                Индекс
                                            </div>
                                            <div class="col-1" style="min-height: 1px; display: block">
                                            </div>
                                        </div>
                                        <div class="" id="permissions_id" style="margin-top: 5px">
                                            <permission-component
                                                    inline-template
                                                    v-for="(_perm, index_perm) in permissions[proj.id]"
                                                    :key="proj.id+'/'+_perm.id"
                                                    :class="[ _perm.is_delete ? 'mb-2 bg-danger text-white' : '', _perm.invalid ? 'bg-info': '']"
                                                    :init-perm="_perm"
                                                    :init-index="index_perm"
                                                    :init-project="proj.id"
                                                    :init-locations="locations[proj.id]"
                                                    :init-isEdit="_perm.isEdit"
                                                    :init-type-subgineries="typeSubgineriesByProject[proj.id]"
                                                    :init-type-engineries="typeEngineriesByProject[proj.id]"
                                                    :init-engineries="engineriesByProject[proj.id]"
                                                    :init-global-settings="globalSettingsList[proj.id].includes(_perm.id)"
                                                    @update="updatePermission"
                                                    @delete="deletePermission"
                                                    @global="toggleGlobalSetting"
                                            >
                                                {% include 'forms/permission/edit.html' %}
                                            </permission-component>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <input type="hidden" name="permissions" :value="JSON.stringify(permissions)">
            </form>
        </role-component>
    </div>
{% endblock %}
{% block script %}
    <script src='{% static "vue/permission.js" %}'></script>
    <script src='{% static "vue/role.js" %}'></script>
    <script src='{% static "vue/role_collector.js" %}'></script>
{% endblock %}