{% extends 'domaincontroll/menu.html' %}
{% load static %}


{% block menuOpen %}
<li class="nav-item has-treeview">
    {% endblock %}

    {% block jsCode %}


    let menuItem = document.getElementById('mainItem7');
    menuItem.classList.add("active");

    document.title = "Настройки redadm";


    let boxElems = document.getElementsByName('smallBox');
    let maxHeight = 0;

    for (let box of boxElems) {
    if (box.clientHeight > maxHeight) maxHeight = box.clientHeight;
    }

    for (let box of boxElems) {
    if (box.clientHeight <= maxHeight) {
    box.style.paddingBottom = maxHeight - box.clientHeight + "px";
    }
    }


    $(function () {

    let arrUniqueVal = [];// array of unique dates of finishing jobs
    let arrEnd = [];// array of dates of finishing jobs
    let arrStatus = [];// array of 1 and 0
    let jobsTable = document.getElementById('jobsTable');// data table

    // a loop for filling in the array of unique dates for creating an x axis at the chart
    for(let row of jobsTable.children) {
    if (!(arrUniqueVal.includes(row.lastElementChild.innerHTML, 0)==1)) {
    arrUniqueVal.push(row.lastElementChild.innerHTML);
    }
    }


    for (let i=0; i < arrUniqueVal.length; i++) {
    for (let j=i+1; j < arrUniqueVal.length; j++) {
    if (arrUniqueVal[i] > arrUniqueVal[j]) {
    let buf=0;
    buf = arrUniqueVal[i];
    arrUniqueVal[i] = arrUniqueVal[j];
    arrUniqueVal[j] = buf;
    }
    }
    }


    var completedJobs = []; // an array for creating a chart - succeed jobs
    var failedJobs = [];// an array for creating a chart - failed jobs
    var completedJobs2 = [];
    var failedJobs2 = [];
    let counter = -1;

    let arrCountr=1;
    let a;
    let b;

    let newArr = [];

    for (let j=0; j < jobsTable.children.length; j++) {
    if (j == 0) {newArr.push([jobsTable.children[j].lastElementChild.innerHTML, 1,
    jobsTable.children[j].children[3].innerHTML]); continue;}
    for (let i = Object.keys(newArr).length-1; i >= 0; i--) {
    if (newArr[i][0] == jobsTable.children[j].lastElementChild.innerHTML) {
    newArr[i][1] = Number(newArr[i][1]) + 1;
    break;
    }
    else {
    newArr.push([jobsTable.children[j].lastElementChild.innerHTML, 1, jobsTable.children[j].children[3].innerHTML]);
    break;
    }
    }
    }

    for (let i=0; i < Object.keys(newArr).length; i++) {
    for (let j=i+1; j < Object.keys(newArr).length; j++) {
    let buf=0;
    if (Number(newArr[i][0].slice(0,2)) > Number(newArr[j][0].slice(0,2))) {
    /* buf = newArr[i][0];
    newArr[i][0] = newArr[j][0];
    newArr[j][0] = buf;*/

    buf = newArr[i];
    newArr[i] = newArr[j];
    newArr[j] = buf;

    }
    }
    }


    for (let i = 0; i < Object.keys(newArr).length; i++) {
    if (Number(newArr[i][2]) == 1) {
    completedJobs.push({x:String(i), y:Number(newArr[i][1])});
    failedJobs.push({x:String(i), y:0});
    }
    else {
    failedJobs.push({x:String(i), y:Number(newArr[i][1])});
    completedJobs.push({x:String(i), y:0});
    }
    }


    $("#chart").shieldChart({
    theme: "light",
    exportOptions: {
    image: false,
    print: false
    },
    primaryHeader: {
    text: ""
    },
    chartLegend: {
    align: 'right',
    verticalAlign: 'top',
    renderDirection: 'vertical'
    },
    seriesSettings: {
    line: {
    enablePointSelection: true,
    pointMark: {
    activeSettings: {
    pointSelectedState: {
    drawWidth: 4,
    drawRadius: 4
    }
    }
    }
    }
    },
    axisY: {
    min: 0,
    max: 5,
    title: {
    text: "ЗАДАНИЯ",
    style: {
    color: '#000'
    }
    }
    },
    axisX: {
    categoricalValues: arrUniqueVal,
    title: {
    text: "ВРЕМЯ",
    style: {
    color: '#000',
    fontSize: '16px'
    }
    }
    },
    dataSeries: [{
    seriesType: 'line',
    collectionAlias: "ВЫПОЛНЕНО",
    data: completedJobs
    }, {
    seriesType: 'line',
    color: '#dc3545',
    collectionAlias: "НЕ ВЫПОЛНЕНО",
    data: failedJobs
    }]
    });
    });

    var user_list = [];

    $('.add').on('click', function(){
    var essence = $(this).attr('name')
    var without = $(this).closest('div').siblings('.not_granted');
    var with_tb = $(this).closest('div').siblings('.granted').find('.user_list');

    without.find('.user_list').find('div[active*="active"]').fadeOut().promise().done(function(){

    for(var i = 0; i < user_list.length; i++){

    with_tb.append(`
    <div class="user">` + user_list[i] + `</div>
    `)

    }
    change_saver(user_list, 'add', essence);
    user_list.length = 0
    })

    })

    $('.remove').on('click', function(){
    var essence = $(this).attr('name')
    var with_tb = $(this).closest('div').siblings('.granted');
    var without = $(this).closest('div').siblings('.not_granted').find('.user_list');
    with_tb.find('.user_list').find('div[active*="active"]').fadeOut().promise().done(function(){

    for(var i = 0; i < user_list.length; i++){

    without.append(`
    <div class="user">` + user_list[i] + `</div>
    `)

    }
    change_saver(user_list, 'remove', essence);
    user_list.length = 0
    })

    })

    function change_saver(user_list, type, essence){

    $.ajax({
        type: "POST",
        headers:{"X-CSRFToken":"{{ csrf_token }}"},
        url: "{% url 'settings:save_user_changes' %}",
        data: {'data[]': user_list,
        'type': type,
        'essence': essence},
        success: function(){

        },
        error: function(){

        }
    })
    }

    $('#st-rw').on('click', function(){

    $.ajax({
    type: "POST",
    headers:{"X-CSRFToken":"{{ csrf_token }}"},
    url: "{% url 'settings:rewrite_settings' %}",
    success: function(){


    },
    error: function(){

    },
    complete: function(){
    window.location.href = '{% url 'authapp:first_launch' %}'
    }
    })
    })


    $(document).on('click', '.user', function(e){

    if($(this).attr('active')){
    $(this).css({'background-color': '', 'color': 'black'});
    $(this).removeAttr('active');
    var ind = user_list.indexOf($(this).html())
    user_list.splice(ind, 1);
    }else{
    $(this).css({'background-color': '#007bff', 'color': 'white'});
    $(this).attr('active', 'active');
    user_list.push($(this).html())
    }

    })


    $('.fork_id').on('click', function(){
        let value = $('#fork_num').val()


        $.ajax({
            type: "POST",
            data: {'value': value},
            headers:{"X-CSRFToken":"{{ csrf_token }}"},
            url: "{% url 'settings:fork_number' %}",
            success: function(){
                console.log('ll')

            }


        })


    })

    var members_of_group = []
    var permissions = [[0,0,0,0], [0,0,0,0], [0], [0], [0]]
    var unsaved_permissions = [[0,0,0,0], [0,0,0,0], [0], [0], [0]]
    var description = ''
    var group_name = ''
    var text = ''
    var empty_members = false
    var trigger = false
    var old_name = ''

    $('#new-role-group-add').on('click', function(){
        var card = $('#role-groups-card')
        $('.control_buttons').each(function () {
            $(this).children().attr('disabled', true)
        })
        $('#new-role-group-add').fadeOut()
        card.append(`
            <div class="input-group mb-3">
              <input type="text" class="form-control group-name" placeholder="Название группы">
              <div class="input-group-append">
                <button class="btn btn-outline-secondary" id="group-description" type="button">Настроить описание</button>
              </div>
              <div class="input-group-append">
                <button class="btn btn-outline-secondary" id="group-permissions" type="button">Настроить доступ для группы</button>
              </div>
              <div class="input-group-append">
                <button class="btn btn-outline-secondary" id="group-members" type="button">Добавить участников группы</button>
              </div>
              <div class="input-group-append control_buttons"  id="control-buttons">
                <button class="btn btn-primary" disabled id="new-group-save" type="button">Сохранить</button>
                <button class="btn btn-danger" id="new-group-cancel" type="button">Отменить</button>
              </div>
            </div>
        `)
        name_checker()
    })

    function name_checker(){
        var arr = []
        $('.group-name').each(function () {
            arr.push($(this).val())
        })
        $(document).on('input', '.group-name', function(){

            if($('.group-name').val() != ""){
                if( $.inArray($(this).val(), arr) >= 0 ){
                    $('#new-group-save, #group-update').attr('disabled', true)
                }else{
                    $('#new-group-save, #group-update').removeAttr('disabled')
                }
            }else{
                console.log('here')
                $('#new-group-save, #group-update').attr('disabled', true)
            }


        })


    }


    function ul_permission_former(){
        var permitted = "<ul style='color: green'>"
        var prohibited = "<ul style='color: red'>"

        var permissions_names =
        [
            ['Доступ в раздел Идентификация',
            'Создание в разделе Идентификация',
            'Редактирование в разделе Идентификация',
            'Удаление в разделе Идентификация'],
            ['Доступ в раздел Собственные сценарии',
            'Создание в разделе Собственные сценарии',
            'Редактирование в разделе Собственные сценарии',
            'Удаление в разделе Собственные сценарии'],
            ['Доступ в раздел Групповые политики'],
            ['Доступ в раздел Политики'],
            ['Доступ в раздел Журнал'],
            ['Доступ в раздел События']
        ]

        for(let i = 0; i < permissions.length; i++){
            for(let k = 0; k < permissions[i].length; k++){
                if(permissions[i][k]){
                    permitted += "<li style='font-size: 11px'>" + permissions_names[i][k] + "</li>"
                }else{
                    prohibited += "<li style='font-size: 11px'>" + permissions_names[i][k] + "</li>"
                }
            }
        }

        let final_row = '<p>Группе разрешено:</p>' + permitted + '</ul><br><p>Группе не разрешено:</p>' + prohibited + '</ul>'
        return final_row

    }

    function members_former(){
        var members_row = "<ul>"
        for(let i = 0; i < members_of_group.length; i++){
             members_row += "<li>" + members_of_group[i] + "</li>"
        }
        members_row += "</ul>"
        return members_row
    }

    function member_clean(){
        var mem = $('#members').children()
        for(let i = 0; i < mem.length; i++){
            $('#members').remove(mem[i])
            $('#non-members').prepend(mem[i])
        }
    }

    function permission_clean(){
        var perm = $('#permission-container')
        perm.find('button').removeClass('btn-success')
        perm.find('button').addClass('btn-outline-success')
        $('#secondary_identification_permissions').find('button').attr('disabled', true)
        $('#secondary_self_s_permissions').find('button').attr('disabled', true)
    }

    $(document).on('click', '#new-group-cancel', function(){
        var row = $(this).closest('.input-group')
        row.fadeOut().promise().done(function(){
            row.remove()
        })

        $('.control_buttons').each(function () {
            $(this).children().removeAttr('disabled')
        })

        $('#new-role-group-add').fadeIn()
        member_clean()
    })

    $(document).ready(function(){
        {% for group in groups %}
            var card = $('#role-groups-card')
            card.append(`
                <div class="input-group mb-3">
                  <input type="text" class="form-control group-name this_name" disabled placeholder="Название группы" value="{{ group.name }}">
                  <div class="input-group-append">
                    <button class="btn btn-outline-secondary this_description" disabled id="group-description" type="button">Описание группы</button>
                  </div>
                  <div class="input-group-append">
                    <button class="btn btn-outline-secondary this_permissions" disabled id="group-permissions" type="button">Разрешения группы</button>
                  </div>
                  <div class="input-group-append">
                    <button class="btn btn-outline-secondary this_members" disabled id="group-members" type="button">Состав участников</button>
                  </div>
                  <div class="input-group-append control_buttons" id="control-buttons">
                    <button class="btn btn-primary" id="group-change" type="button">Изменить</button>
                    <button class="btn btn-danger" id="group-delete" type="button">Удалить</button>
                  </div>
                </div>
            `)

            var group_name = $('.this_name')
            var group_description = $('.this_description')
            var group_members = $('.this_members')
            var group_permissions = $('.this_permissions')

            members_of_group = {{ group.group_members|safe }}
            permissions = {{ group.permissions }}

            // имя группы
            group_name.data([group_name.val()])
            group_name.css('pointer-events', 'none')
            // описание группы
            group_description.data(['{{ group.description }}'])
            group_description.css('pointer-events', 'none')
            group_description.wrap(`<span class="d-inline-block"
                                          data-html="true"
                                          data-trigger="hover"
                                          data-placement="bottom"
                                          data-toggle="popover"
                                          data-content="
                                          <p>` + '{{ group.description }}' + `</p>
                                          ">
                                    </span>`)
            // члены группы
            group_members.data({{ group.group_members|safe }})
            group_members.css('pointer-events', 'none')
            group_members.wrap(`<span class="d-inline-block"
                                      data-html="true"
                                      data-trigger="hover"
                                      data-placement="bottom"
                                      data-toggle="popover"
                                      data-content="<div>` + members_former() + `</div>">
                                </span>`)
            // разрешения группы
            group_permissions.data({{ group.permissions}})
            group_permissions.css('pointer-events', 'none')
            group_permissions.wrap(`<span class="d-inline-block"
                                          data-html="true"
                                          data-trigger="hover"
                                          data-placement="bottom"
                                          data-toggle="popover"
                                          data-content="
                                          ` + ul_permission_former() + `
                                          ">
                                    </span>`)

            group_name.removeClass('this_name')
            group_description.removeClass('this_description')
            group_members.removeClass('this_members')
            group_permissions.removeClass('this_permissions')

        {% endfor %}

        members_of_group = []
        permissions = [[0,0,0,0], [0,0,0,0], [0], [0], [0], [0]]
        popover_activator()
    })

    $(document).on('click', '#new-group-save', function(){
        var button_container = $(this).closest('#control-buttons')
        var row_container = button_container.closest('.input-group')
        var group_name = row_container.find('.group-name')
        var group_description = row_container.find('#group-description')
        var group_members = row_container.find('#group-members')
        var group_permissions = row_container.find('#group-permissions')
        var new_group_data_arr = []

        console.log(group_name.val())
        console.log(description)
        console.log(permissions)
        console.log(members_of_group)

        $.ajax({
            type: "POST",
            headers:{"X-CSRFToken":"{{ csrf_token }}"},
            url: "{% url 'settings:create_group' %}",
            data: {'group_name': group_name.val(),
                   'group_description': description,
                   'permissions[]': permissions,
                   'members_of_group[]': members_of_group},
            success: function(){
                console.log('success')
            },
            error: function(){
                console.log('error')
            }
        })

        $('.control_buttons').each(function () {
            $(this).children().removeAttr('disabled')
        })

        $(this).fadeOut().promise().done(function(){
            button_container.children().remove()
            button_container.append(`
                <button class="btn btn-primary" id="group-change" type="button">Изменить</button>
                <button class="btn btn-danger" id="group-delete" type="button">Удалить</button>
            `)
            // имя группы
            group_name.attr('readonly', 'true')
            group_name.data([group_name.val()])
            // описание группы
            if(description == ''){
                description = 'У группы отсутствует описание'
            }
            group_description.attr('disabled', 'true')
            group_description.data([description])
            group_description.css('pointer-events', 'none')
            group_description.text('Описание группы')
            group_description.wrap(`<span class="d-inline-block"
                                          data-html="true"
                                          data-trigger="hover"
                                          data-placement="bottom"
                                          data-toggle="popover"
                                          data-content="
                                          <p>` + description + `</p>
                                          ">
                                    </span>`)
            // члены группы
            group_members.attr('disabled', 'true')
            group_members.data(members_of_group)
            group_members.css('pointer-events', 'none')
            group_members.text('Состав участников')
            group_members.wrap(`<span class="d-inline-block"
                                      data-html="true"
                                      data-trigger="hover"
                                      data-placement="bottom"
                                      data-toggle="popover"
                                      data-content="<div>` + members_former() + `</div>">
                                </span>`)
            // разрешения группы
            group_permissions.attr('disabled', 'true')
            group_permissions.data(permissions)
            group_permissions.css('pointer-events', 'none')



            group_permissions.text('Разрешения группы')
            group_permissions.wrap(`<span class="d-inline-block"
                                          data-html="true"
                                          data-trigger="hover"
                                          data-placement="bottom"
                                          data-toggle="popover"
                                          data-content="
                                          ` + ul_permission_former() + `
                                          ">
                                    </span>`)





            $('#new-group-description').find('textarea').val('')

            members_of_group = []
            permissions = [[0,0,0,0], [0,0,0,0], [0], [0], [0], [0]]
            unsaved_permissions = [[0,0,0,0], [0,0,0,0], [0], [0], [0], [0]]
            description = ''
            group_name = ''
            text = ''

            $('#new-description').val('')
            permission_clean()
            popover_activator()
        })

        $('#new-role-group-add').fadeIn()
        member_clean()


        new_group_data_arr.push(group_name.val())
        new_group_data_arr.push(description)
        new_group_data_arr.push(permissions)
        new_group_data_arr.push(members_of_group)


    })

    function popover_activator() {
      $('[data-toggle="popover"]').popover()
    }

    $(document).on('click', '#group-delete', function(){

        var button_container = $(this).closest('#control-buttons')
        var row_container = button_container.closest('.input-group')
        var group_name = row_container.find('.group-name')
        var group_description = row_container.find('#group-description')
        var group_members = row_container.find('#group-members')
        var group_permissions = row_container.find('#group-permissions')
        var row = $(this).closest('.input-group')

        console.log('Удаление!')
        console.log(group_name.val())

        $.ajax({
            type: "POST",
            headers:{"X-CSRFToken":"{{ csrf_token }}"},
            url: "{% url 'settings:delete_group' %}",
            data: {'group_name': group_name.val(),
                   'group_description': description,
                   'permissions[]': permissions,
                   'members_of_group[]': members_of_group},
            success: function(){
                row.fadeOut().promise().done(function(){
                    row.remove()
                })
            },
            error: function(){
                console.log('error')
            }
        })



    })

    function current_permissions(curr_perm){
        var divs = $('#permission-container').children()
        for(let i = 0; i < curr_perm.length; i++){
            var curr_div = divs[i]
            var buttons = $(curr_div).find('button')
            for(let k = 0; k < curr_perm.length; k++){
                if(curr_perm[i][k]){
                    var button = buttons[k]
                    $(button).removeClass('btn-outline-success')
                    $(button).addClass('btn-success')
                    $(curr_div).find('button').removeAttr('disabled')
                }
            }
        }
    }

    function current_members(curr_mem){
        for(let i = 0; i < curr_mem.length; i++){
            $('#non-members').find("li:contains('" + curr_mem[i] + "')").remove()
            $('#members').append(`<li class='list-group-item user'>` + curr_mem[i] + `</li>`)
        }
    }

    $(document).on('click', '#group-change', function(){
        var button_container = $(this).closest('#control-buttons')
        var row_container = button_container.closest('.input-group')
        var group_name = row_container.find('.group-name')
        var group_description = row_container.find('#group-description')
        var group_members = row_container.find('#group-members')
        var group_permissions = row_container.find('#group-permissions')
        old_name = group_name.val()
        var curr_members = Object.values(group_members.data())
        permissions = Object.values(group_permissions.data())
        description = Object.values(group_description.data())[0]

        $('.control_buttons').each(function () {
            $(this).children().attr('disabled', true)
        })

        button_container.children().removeAttr('disabled')


        $('#new-role-group-add').fadeOut()
        button_container.children().remove()
        button_container.append(`
                <button class="btn btn-primary" id="group-update" type="button">Сохранить изменения</button>
                <button class="btn btn-danger" id="group-cancel" type="button">Отменить изменения</button>
        `)


        group_name.removeAttr('readonly')
        group_name.removeAttr('disabled')
        group_name.css('pointer-events', 'all')

        group_description.removeAttr('disabled')
        group_description.css('pointer-events', 'all')
        group_description.unwrap()
        group_description.text('Изменить описание группы')


        group_members.removeAttr('disabled')
        group_members.text('Изменить состав участников')
        group_members.css('pointer-events', 'all')
        group_members.unwrap()


        group_permissions.removeAttr('disabled')
        group_permissions.text('Изменить разрешения группы')
        group_permissions.css('pointer-events', 'all')
        group_permissions.unwrap()

        $('#new-description').val(description)
        current_members(curr_members)

        name_checker()
    })

    $(document).on('click', '#group-description', function(){
        $('#new-description').val(description)
        $('#new-group-description').modal()
    })

    $(document).on('click', '#save-new-description', function(){
        text = $('#new-description').val()
        if(text != ""){
            description = text
        }
        $('#new-group-description').modal('hide')
    })

    $(document).on('click', '.close_description', function(){
        $('#new-description').val(description)
    })

    $(document).on('click', '#group-permissions', function(){

        unsaved_permissions = permissions.map((x) => x)
        $('#new-group-permission').modal()


        var identification_arr = ['#identification-read-permission',
                                  '#identification-create-permission',
                                  '#identification-update-permission',
                                  '#identification-delete-permission']

        for(var i = 0; i < unsaved_permissions.length; i++){
            if(i == 0){
                if(unsaved_permissions[0][i] == 1){
                    active($(identification_arr[i]))
                    $('.secondary_identification_permissions').children().removeAttr('disabled')
                }else{
                    deactive($(identification_arr[i]))
                    $('.secondary_identification_permissions').children().attr('disabled', true)
                    $('.secondary_identification_permissions').children().removeClass('btn-success').addClass('btn-outline-success')
                }
            }else{
                if(unsaved_permissions[0][i] == 1){
                    active(identification_arr[i])
                }else{
                    deactive(identification_arr[i])
                }
            }
        }

        current_permissions(permissions)


    })

    $(document).ready(function(){
        $('#user-search').on('keyup', function(){
          var value = $(this).val().toLowerCase();
          $('#non-members > li').filter(function(){
            $(this).toggle($(this).text().toLowerCase().indexOf(value)  > - 1)
          })
        })
    })

    $(document).ready(function(){
        $('#member-search').on('keyup', function(){
          var value = $(this).val().toLowerCase();
          $('#members > li').filter(function(){
            $(this).toggle($(this).text().toLowerCase().indexOf(value)  > - 1)
          })
        })
    })

    $(document).on('click', '#add-to', function(){
        var from_li = $(this).closest('div').prev('.card').find('li[active="active"]')
        var to_ul = $(this).closest('div').next('.card').find('ul')
        from_li.attr('name', 'new_member')
        from_li.fadeOut().promise().done(function(){
            to_ul.append(from_li)
            to_ul.find('li').removeAttr('active').css({'background-color': 'rgb(255, 255, 255)', 'color': 'rgb(0, 0, 0)'}).fadeIn()
        })
    })

    $(document).on('click', '#remove-from', function(){
        var from_li = $(this).closest('div').next('.card').find('li[active="active"]')
        var to_ul = $(this).closest('div').prev('.card').find('ul')
        from_li.attr('name', 'old_member')
        from_li.fadeOut().promise().done(function(){
            to_ul.prepend(from_li)
            to_ul.find('li').removeAttr('active').css({'background-color': 'rgb(255, 255, 255)', 'color': 'rgb(0, 0, 0)'}).fadeIn()
        })
    })

    $(document).on('click', '.close_members', function(){
        var not_members = $(this).closest('div').siblings('.modal-body').find('#non-members')
        var members = $(this).closest('div').siblings('.modal-body').find('#members')

        old_members = not_members.find('li[name="old_member"]')
        new_members = members.find('li[name="new_member"]')

        not_members.append(new_members)
        members.remove(new_members)

        members.append(old_members)
        not_members.remove(old_members)

    })

    $(document).on('click', '#save-new-members', function(){
        var members = $(this).closest('div').siblings('.modal-body').find('#members')
        var names = members.find('li')
        for(let i = 0; i < names.length; i++){
            members_of_group.push($(names[i]).text())
        }
        if(members_of_group.length == 0){
            empty_members = true
        }
        $('#new-group-members').modal('hide')
    })

    // Раздел "Идентификация"

    function active(el){
        $(el).removeClass('btn-outline-success')
        $(el).addClass('btn-success')
    }

    function deactive(el){
        $(el).removeClass('btn-success')
        $(el).addClass('btn-outline-success')
    }

    $(document).on('click', '#identification-read-permission', function(){
        trigger = true
        if($(this).hasClass('btn-outline-success')){
            active(this)
            $('.secondary_identification_permissions').children().removeAttr('disabled')
            unsaved_permissions[0][0] = 1
        }else{
            deactive(this)
            $('.secondary_identification_permissions').children().attr('disabled', true)
            $('.secondary_identification_permissions').children().removeClass('btn-success').addClass('btn-outline-success')
            unsaved_permissions[0] = [0,0,0,0]
        }
    })

    $(document).on('click', '#identification-create-permission', function(){
        trigger = true
        if($(this).hasClass('btn-outline-success')){
            active(this)
            unsaved_permissions[0][1] = 1
        }else{
            deactive(this)
            unsaved_permissions[0][1] = 0
        }
    })

    $(document).on('click', '#identification-update-permission', function(){
        trigger = true
        if($(this).hasClass('btn-outline-success')){
            active(this)
            unsaved_permissions[0][2] = 1
        }else{
            deactive(this)
            unsaved_permissions[0][2] = 0
        }
    })

    $(document).on('click', '#identification-delete-permission', function(){
        trigger = true
        if($(this).hasClass('btn-outline-success')){
            active(this)
            unsaved_permissions[0][3] = 1
        }else{
            deactive(this)
            unsaved_permissions[0][3] = 0
        }
    })


    // Раздел "Собственные сценарии"

    $(document).on('click', '#self-s-read-permission', function(){
        trigger = true
        if($(this).hasClass('btn-outline-success')){
            active(this)
            $('.secondary_self_s_permissions').children().removeAttr('disabled')
            unsaved_permissions[1][0] = 1
        }else{
            deactive(this)
            $('.secondary_self_s_permissions').children().attr('disabled', true)
            $('.secondary_self_s_permissions').children().removeClass('btn-success').addClass('btn-outline-success')
            unsaved_permissions[1] = [0,0,0,0]
        }
    })

    $(document).on('click', '#self-s-create-permission', function(){
        trigger = true
        if($(this).hasClass('btn-outline-success')){
            active(this)
            unsaved_permissions[1][1] = 1
        }else{
            deactive(this)
            unsaved_permissions[1][1] = 0
        }
    })

    $(document).on('click', '#self-s-update-permission', function(){
        trigger = true
        if($(this).hasClass('btn-outline-success')){
            active(this)
            unsaved_permissions[1][2] = 1
        }else{
            deactive(this)
            unsaved_permissions[1][2] = 0
        }
    })

    $(document).on('click', '#self-s-delete-permission', function(){
        trigger = true
        if($(this).hasClass('btn-outline-success')){
            active(this)
            unsaved_permissions[1][3] = 1
        }else{
            deactive(this)
            unsaved_permissions[1][3] = 0
        }
    })

    // Раздел "Груповые политики"

    $(document).on('click', '#group-p-read-permission', function(){
        trigger = true
        if($(this).hasClass('btn-outline-success')){
            active(this)
            unsaved_permissions[2][0] = 1
        }else{
            deactive(this)
            unsaved_permissions[2][0] = 0
        }
    })

    // Раздел "Груповые политики"

    $(document).on('click', '#politics-read-permission', function(){
        trigger = true
        if($(this).hasClass('btn-outline-success')){
            active(this)
            unsaved_permissions[5][0] = 1
        }else{
            deactive(this)
            unsaved_permissions[5][0] = 0
        }
    })

    // Раздел "События"

    $(document).on('click', '#journal-read-permission', function(){
        trigger = true
        if($(this).hasClass('btn-outline-success')){
            active(this)
            unsaved_permissions[3][0] = 1
        }else{
            deactive(this)
            unsaved_permissions[3][0] = 0
        }
    })

    // Раздел "Журнал"

    $(document).on('click', '#events-read-permission', function(){
        trigger = true
        if($(this).hasClass('btn-outline-success')){
            active(this)
            unsaved_permissions[4][0] = 1
        }else{
            deactive(this)
            unsaved_permissions[4][0] = 0
        }
    })

    $('#save-new-permissions').on('click', function(){
        if(trigger){
            permissions = unsaved_permissions.map((x) => x);
        }
        $('#new-group-permission').modal('hide')
        trigger = false
        console.log(unsaved_permissions)
    })

    $(document).on('click', '.close_permissions', function(){
        unsaved_permissions = unsaved_permissions.map((x) => x);
        permission_clean()
        trigger = false
    })

    $(document).on('click', '#group-members', function(){
        $('#new-group-members').modal()
    })

    $(document).on('click', '#group-update', function(){
        var button_container = $(this).closest('#control-buttons')
        var row_container = button_container.closest('.input-group')
        var group_name = row_container.find('.group-name')
        var group_description = row_container.find('#group-description')
        var group_members = row_container.find('#group-members')
        var group_permissions = row_container.find('#group-permissions')
        var new_group_data_arr = []

        $('.control_buttons').each(function () {
            $(this).children().removeAttr('disabled')
        })

        if(members_of_group.length == 0){
            if(empty_members){
                members_of_group = []
            }else{
                members_of_group = Object.values(group_members.data())
            }
        }
        console.log(permissions)
        console.log(members_of_group)
        $.ajax({
            type: "POST",
            headers:{"X-CSRFToken":"{{ csrf_token }}"},
            url: "{% url 'settings:update_group' %}",
            data: {'new_name': group_name.val(),
                   'group_description': description,
                   'permissions[]': permissions,
                   'members_of_group[]': members_of_group,
                   'old_name': old_name},
            success: function(){
                console.log('success')
            },
            error: function(){
                console.log('error')
            }
        })

        button_container.children().remove()
        button_container.append(`
            <button class="btn btn-primary" id="group-change" type="button">Изменить</button>
            <button class="btn btn-danger" id="group-delete" type="button">Удалить</button>
        `)
        // имя группы
        group_name.attr('readonly', 'true')
        group_name.data([group_name.val()])
        // описание группы
        if(description == ''){
            description = 'У группы отсутствует описание'
        }
        console.log(description)
        group_description.attr('disabled', 'true')
        group_description.data([description])
        group_description.css('pointer-events', 'none')
        group_description.text('Описание группы')
        group_description.wrap(`<span class="d-inline-block"
                                      data-html="true"
                                      data-trigger="hover"
                                      data-placement="bottom"
                                      data-toggle="popover"
                                      data-content="
                                      <p>` + description + `</p>
                                      ">
                                </span>`)
        // члены группы
        group_members.attr('disabled', 'true')

        group_members.removeData()
        group_members.data(members_of_group)
        group_members.css('pointer-events', 'none')
        group_members.text('Состав участников')
        group_members.wrap(`<span class="d-inline-block"
                                  data-html="true"
                                  data-trigger="hover"
                                  data-placement="bottom"
                                  data-toggle="popover"
                                  data-content="<div>` + members_former() + `</div>">
                            </span>`)
        // разрешения группы
        group_permissions.attr('disabled', 'true')
        group_permissions.data(permissions)
        group_permissions.css('pointer-events', 'none')
        group_permissions.text('Разрешения группы')
        group_permissions.wrap(`<span class="d-inline-block"
                                      data-html="true"
                                      data-trigger="hover"
                                      data-placement="bottom"
                                      data-toggle="popover"
                                      data-content="
                                      ` + ul_permission_former() + `
                                      ">
                                </span>`)





        $('#new-group-description').find('textarea').val('')

        members_of_group = []
        permissions = [[0,0,0,0], [0,0,0,0], [0], [0], [0], [0]]
        unsaved_permissions = [[0,0,0,0], [0,0,0,0], [0], [0], [0], [0]]
        description = ''
        group_name = ''
        text = ''

        $('#new-description').val('')


        popover_activator()


        $('#new-role-group-add').fadeIn()
        member_clean()
        permission_clean()
        $('#new-role-group-add').fadeIn()


    })

    $(document).on('click', '#group-cancel', function(){
        var button_container = $(this).closest('#control-buttons')
        var row_container = button_container.closest('.input-group')
        var group_name = row_container.find('.group-name')
        var group_description = row_container.find('#group-description')
        var group_members = row_container.find('#group-members')
        var group_permissions = row_container.find('#group-permissions')

        $('.control_buttons').each(function () {
            $(this).children().removeAttr('disabled')
        })

        button_container.children().remove()
        button_container.append(`
            <button class="btn btn-primary" id="group-change" type="button">Изменить</button>
            <button class="btn btn-danger" id="group-delete" type="button">Удалить</button>
        `)
        let old_name = Object.values(group_name.data())[0]
        group_name.val(old_name)
        group_name.attr('readonly', 'true')
        // описание группы
        group_description.attr('disabled', 'true')
        group_description.css('pointer-events', 'none')
        group_description.text('Описание группы')
        description = Object.values(group_description.data())[0]
        group_description.wrap(`<span class="d-inline-block"
                                      data-html="true"
                                      data-trigger="hover"
                                      data-placement="bottom"
                                      data-toggle="popover"
                                      data-content="
                                      <p>` + description + `</p>
                                      ">
                                </span>`)
        // члены группы
        group_members.attr('disabled', 'true')
        members_of_group = Object.values(group_members.data())
        group_members.css('pointer-events', 'none')
        group_members.text('Состав участников')
        group_members.wrap(`<span class="d-inline-block"
                                  data-html="true"
                                  data-trigger="hover"
                                  data-placement="bottom"
                                  data-toggle="popover"
                                  data-content="<div>` + members_former() + `</div>">
                            </span>`)
        // разрешения группы
        group_permissions.attr('disabled', 'true')
        permissions = Object.values(group_permissions.data())
        group_permissions.data(permissions)
        group_permissions.css('pointer-events', 'none')

        permissions = Object.values($(group_permissions).data())

        group_permissions.text('Разрешения группы')
        group_permissions.wrap(`<span class="d-inline-block"
                                      data-html="true"
                                      data-trigger="hover"
                                      data-placement="bottom"
                                      data-toggle="popover"
                                      data-content="
                                      ` + ul_permission_former() + `
                                      ">
                                </span>`)

        $('#new-description').val('')
        members_of_group = []
        permissions = [[0,0,0,0], [0,0,0,0], [0], [0], [0], [0]]
        unsaved_permissions = [[0,0,0,0], [0,0,0,0], [0], [0], [0], [0]]
        description = ''
        group_name = ''
        text = ''
        popover_activator()
        member_clean()
        permission_clean()

        $('#new-role-group-add').fadeIn()
    })

    $("#settings-rewriter").on('click', function(){
        $(".load").each(function(e){
            $(this).prop("checked", false)
        })
    })

    $(".click_load").on('click', function(){

        let list_load = []
        $(".load").each(function(e){
            if ($(this).is(':checked')){
                list_load.push($(this).attr('id'))
            }
        })
        $.ajax({
            type: "GET",
            url: "{% url 'settings:get_load' %}",
            data: {'get_file': JSON.stringify(list_load)},
            dataType: 'binary',
		    xhrFields: {
			    'responseType': 'blob'
		    },

            success: function(data, status, xhr){
                let filename = xhr.getResponseHeader('filename')
                var blob = new Blob([data], {type: xhr.getResponseHeader('Content-Type')});
                var link = document.createElement('a');
                link.href = window.URL.createObjectURL(blob);
                link.download = filename;
                link.click();
            },
            error: function(){
                console.log('error')
            }
        })





        console.log($(this))

    })



    {% endblock %}

    {% block head %}
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">

        <!-- Tell the browser to be responsive to screen width -->
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- Font Awesome -->
        <link rel="stylesheet" href="{% static 'plugins/fontawesome-free/css/all.min.css' %}">
        <!-- Google Font: Source Sans Pro -->
        <link rel="stylesheet" href="{% static 'plugins/source-sans-pro/sourcesanspro.css' %}">
        <!--select2 -->
        <link rel="stylesheet" href="{% static 'plugins/select2/css/select2.min.css' %}">
        <link rel="stylesheet" href="{% static 'dist/css/adminlte.min.css' %}">

        <link rel="stylesheet" href="{% static 'assets/css/bootstrap.min.css' %}">
        <!-- Font awesome CSS -->
        <link rel="stylesheet" href="{% static 'assets/fonts/font-awesome-4.7.0/css/font-awesome.min.css' %}">

        <!-- Ionicons -->
        <link rel="stylesheet" href="{% static 'plugins/ionicons-master/docs/css/ionicons.min.css' %}">
        <!-- Tempusdominus Bbootstrap 4 -->
        <link rel="stylesheet"
              href="{% static 'plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css' %}">
        <!-- iCheck -->
        <link rel="stylesheet" href="{% static 'plugins/icheck-bootstrap/icheck-bootstrap.min.css' %}">
        <!-- JQVMap -->
        <link rel="stylesheet" href="{% static 'plugins/jqvmap/jqvmap.min.css' %}">
        <!-- Theme style -->
        <link rel="stylesheet" href="{% static 'dist/css/adminlte.css' %}">
        <!-- overlayScrollbars -->
        <link rel="stylesheet" href="{% static 'plugins/overlayScrollbars/css/OverlayScrollbars.min.css' %}">
        <!-- Daterange picker -->
        <link rel="stylesheet" href="{% static 'plugins/daterangepicker/daterangepicker.css' %}">
        <!-- summernote -->
        <link rel="stylesheet" href="{% static 'plugins/summernote/summernote-bs4.css' %}">
        <link rel="stylesheet" href="{% static 'plugins/toastr/toastr.min.css' %}">
        <!-- Bootstrap4 Duallistbox -->
        <link rel="stylesheet" href="{% static '/plugins/bootstrap4-duallistbox/bootstrap-duallistbox.min.css' %}">
        <link rel="stylesheet" href="{% static 'plugins/shieldUI/style.css' %}">

        <link rel="stylesheet" href="{% static '/local_scripts/settings/css/style.css' %}">

    </head>

    {% endblock %}

    {% block mainHeader %}

    {% include 'settings/includes/inc_menu_settings.html' %}
    {% endblock %}


    {% block wrapper %}
    <div class="content-wrapper">

        <div class="content-header">
            <div class="container-fluid"></div><!-- /.container-fluid -->
        </div>


        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-body">
                                <div class="nav-tabs-custom">
                                    <div class="tab-content ">
                                        <!--    этот код разместить в base.html-->
                                        <div class="section_name">
                                            <p class="section_name_p">Количество потоков выполнения хостов в сценарии</p>
                                        </div>
                                        <input id="fork_num" class="form-control" type="number" min="0" value="{{fork_ansible}}" style="width: 70px">
                                        <div class="content_place">
                                            <button type="button" class="btn btn-primary fork_id" style="margin-top: 20px;">Сохранить</button>
                                        </div>
                                        <div class="section_name">
                                            <p class="section_name_p">Изменение настроек РЕД АДМ</p>
                                        </div>
                                        <div class="content_place">
                                            <button type="button" id="settings-rewriter" class="btn btn-primary btn-lg"
                                                    data-toggle="modal" data-target="#settings-changer">Изменить
                                                первоначальные настройки РЕД АДМ
                                            </button>
                                        </div>

                                        <div class="section_name">
                                            <p class="section_name_p">Ролевые группы</p>
                                        </div>
                                        <div id="group-field">
                                            <div class="card" id="role-groups-card">
                                            </div>
                                            <div class="card" id="button-card">
                                                <button id="new-role-group-add" type="button" class="btn btn-primary">Добавить новую группу</button>
                                            </div>
                                        </div>


                                        <div class="section_name">
                                            <p class="section_name_p">Получение логов</p>
                                        </div>
                                        <div class="content_place">
                                            <a href="{% url 'settings:load_log'%}" type="button" id="logs-getter"
                                               class="btn btn-primary btn-lg">Получить логи для отправки в службу
                                                поддержки</a>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="modal fade" id="settings-changer" tabindex="-1" role="dialog"
                 aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content" style="width: 600px;">
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLabel"></h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <p>Вы уверены, что хотите перезаписать файл первоначальных настроек РЕД АДМ?</p>
                        </div>
                        <div class="modal-footer">
                            <div class="card">
                              <div class="card-body">
                                  База данных
                                <div class="form-check">
                                  <div class="form-check">
                                      <input class="form-check-input load" type="checkbox" value="" id="db">
                                      <label class="form-check-label" for="change_txt">
                                        БД
                                      </label>
                                    </div>
                              </div>
                            </div>
                            </div>
                            <div class="card">

                              <div class="card-body">
                                  Скачать события
                                <div class="form-check">
                                      <input class="form-check-input load" type="checkbox" value="" id="change_pdf">
                                      <label class="form-check-label" for="change_pdf">
                                        PDF
                                      </label>
                                    </div>
                                    <div class="form-check">
                                      <input class="form-check-input load" type="checkbox" value="" id="change_csv">
                                      <label class="form-check-label" for="change_csv">
                                        CSV
                                      </label>
                                    </div>
                                  <div class="form-check">
                                      <input class="form-check-input load" type="checkbox" value="" id="change_txt">
                                      <label class="form-check-label" for="change_txt">
                                        TXT
                                      </label>
                                    </div>
                              </div>
                            </div>
                            <div class="card">
                              <div class="card-body">
                                   Скачать журнал
                                <div class="form-check">
                                      <input class="form-check-input load" type="checkbox" value="" id="task_pdf">
                                      <label class="form-check-label" for="task_pdf">
                                        PDF
                                      </label>
                                    </div>
                                    <div class="form-check">
                                      <input class="form-check-input load" type="checkbox" value="" id="task_csv">
                                      <label class="form-check-label" for="task_csv">
                                        CSV
                                      </label>
                                    </div>
                                  <div class="form-check">
                                      <input class="form-check-input load" type="checkbox" value="" id="task_txt">
                                      <label class="form-check-label" for="task_txt">
                                        TXT
                                      </label>
                                    </div>
                              </div>
                            </div>
                             <button type="button" class="btn btn-primary click_load">Скачать</button>
                            <button type="button" class="btn btn-danger" data-dismiss="modal">Отмена</button>
                            <button id="st-rw" type="button" class="btn btn-primary">Перейти на страницу настроек
                            </button>
                        </div>
                    </div>
                </div>
            </div>

        </section>

        <div class="modal" id="new-group-description" tabindex="-1" role="dialog">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title">Введите описание группы</h5>
                <button type="button" class="close close_description" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div class="modal-body">
                <div class="input-group">
                  <textarea class="form-control" id="new-description" aria-label="With textarea"></textarea>
                </div>
              </div>
              <div class="modal-footer">
                <button type="button" id="save-new-description" class="btn btn-primary">Сохранить описание</button>
                <button type="button" class="btn btn-danger close_description" data-dismiss="modal">Закрыть</button>
              </div>
            </div>
          </div>
        </div>

        <div class="modal fade bd-example-modal-lg" id="new-group-permission" tabindex="-1" role="dialog">
          <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title">Выберите разрешения для группы</h5>
                <button type="button" class="close close_permissions" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div class="modal-body">
                <div id="permission-container" class="input-group">
                    <div id="identification" class="card-body" style="width: 100%;">
                        <div class="card-header">
                            <h5 class="card-title">Раздел "Идентификация"</h5>
                        </div>
                        <div class="mb-3 mt-3">
                            <button type="button" id="identification-read-permission" class="btn btn-outline-success identification_buttons">Доступ к разделу</button>
                        </div>
                        <div class="secondary_identification_permissions">
                            <button type="button" id="identification-create-permission" disabled class="btn btn-outline-success identification_buttons">Возможность создания</button>
                            <button type="button" id="identification-update-permission" disabled class="btn btn-outline-success identification_buttons">Возможность редактирования</button>
                            <button type="button" id="identification-delete-permission" disabled class="btn btn-outline-success identification_buttons">Возможность удаления</button>
                        </div>
                    </div>
                    <div id="self-scenarios" class="card-body" style="width: 100%;">
                        <div class="card-header">
                            <h5 class="card-title">Раздел "Собственные сценарии"</h5>
                        </div>
                        <div class="mb-3 mt-3">
                            <button type="button" id="self-s-read-permission" class="btn btn-outline-success self_s_buttons">Доступ к разделу</button>
                        </div>
                        <div class="secondary_self_s_permissions">
                            <button type="button" id="self-s-create-permission" disabled class="btn btn-outline-success self_s_buttons">Возможность создания</button>
                            <button type="button" id="self-s-update-permission" disabled class="btn btn-outline-success self_s_buttons">Возможность редактирования</button>
                            <button type="button" id="self-s-delete-permission" disabled class="btn btn-outline-success self_s_buttons">Возможность удаления</button>
                        </div>
                    </div>
                    <div id="group-politics" class="card-body" style="width: 100%;">
                        <div class="card-header">
                            <h5 class="card-title">Раздел "Групповые политики"</h5>
                        </div>
                        <div class="mb-3 mt-3">
                            <button type="button" id="group-p-read-permission" class="btn btn-outline-success group_p_buttons">Доступ к разделу</button>
                        </div>
                    </div>
                    <div id="politics" class="card-body" style="width: 100%;">
                        <div class="card-header">
                            <h5 class="card-title">Раздел "Политики"</h5>
                        </div>
                        <div class="mb-3 mt-3">
                            <button type="button" id="politics-read-permission" class="btn btn-outline-success group_p_buttons">Доступ к разделу</button>
                        </div>
                    </div>
                    <div id="journal" class="card-body" style="width: 100%;">
                        <div class="card-header">
                            <h5 class="card-title">Раздел "Журнал"</h5>
                        </div>
                        <div class="mb-3 mt-3">
                            <button type="button" id="journal-read-permission" class="btn btn-outline-success journal_buttons">Доступ к разделу</button>
                        </div>
                    </div>
                    <div id="events" class="card-body" style="width: 100%;">
                        <div class="card-header">
                            <h5 class="card-title">Раздел "События"</h5>
                        </div>
                        <div class="mb-3 mt-3">
                            <button type="button" id="events-read-permission" class="btn btn-outline-success events_buttons">Доступ к разделу</button>
                        </div>
                    </div>
                </div>
              </div>
              <div class="modal-footer">
                <button type="button" id="save-new-permissions" class="btn btn-primary">Сохранить разрешения</button>
                <button type="button" class="btn btn-danger close_permissions" data-dismiss="modal">Закрыть</button>
              </div>
            </div>
          </div>
        </div>

        <div class="modal fade bd-example-modal-lg" id="new-group-members" tabindex="-1" role="dialog">
          <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title">Выберите участников из списка</h5>
                <button type="button" class="close close_members" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div class="modal-body">
                <div class="row">
                    <div class="card col">
                      <div class="card-header">
                        Все пользователи
                      </div>
                      <div class="card-body">
                        <div class="input-group mb-3">
                          <input id="user-search" type="search" class="form-control" placeholder="Поиск..." aria-label="Username" aria-describedby="basic-addon1">
                        </div>
                        <ul id="non-members" class="list-group user_list">
                            {% for user in users %}
                            <li class="list-group-item user">{{user.name}}</li>
                            {% endfor %}
                        </ul>
                      </div>
                    </div>
                    <div class="col move_buttons">
                        <button type="button" id="add-to" class="btn btn-primary col mb-3 arrow"> >> </button>
                        <button type="button" id="remove-from" class="btn btn-primary col mb-3 arrow"> << </button>
                    </div>
                    <div class="card col">
                      <div class="card-header">
                        Члены группы
                      </div>
                      <div class="card-body">
                        <div class="input-group mb-3">
                          <input id="member-search" type="search" class="form-control" placeholder="Поиск..." aria-label="Username" aria-describedby="basic-addon1">
                        </div>
                        <ul id="members" class="list-group user_list">
                        </ul>
                      </div>
                    </div>
                </div>
              </div>
              <div class="modal-footer">
                <button type="button" id="save-new-members" class="btn btn-primary">Сохранить список участников</button>
                <button type="button" class="btn btn-danger close_members" data-dismiss="modal">Закрыть</button>
              </div>
            </div>
          </div>
        </div>

        {% endblock %}

    </div>