@extends('frontend.layouts.app')

@section('title', app_name() . ' | ' . __('navs.frontend.dashboard') )
@push('after-scripts')
    <script>
        'use strict';

        // the packery grid object
        var grid;
        //alert(1234);
        // dragula object
        var drake = dragula();

        // the board grid packery
        // var $board_grid = $('.board_grid').packery({
        //     itemSelector: '.grid-item'
        // });

        // the base URL
        const baseurl = '{{URL::to('/')}}';

        var currenteditingid = -1;

        var currentPage = 1;

        var loading = true;

        // the content template for the info popover for the board preview
        const infopopovercontent = '<div class="d-flex flex-column w-100">' +
            '<div class="w-100 mb-1 info_details_description"></div>' +
            '<div class="w-100 mb-1 "><span style="font-weight: bold">Author:</span> <span class="info_details_author"></span></div>' +
            '<div class="w-100 mb-1 "><span style="font-weight: bold">Dimensions:</span> <span class="info_details_dimensions"></span> </div>' +
            '<div class="w-100 mb-1 "><span style="font-weight: bold">Tags:</span> <span class="info_details_tags"></span> </div>' +
            '<div class="w-100 mb-1 "><span style="font-weight: bold">Folder:</span></div>' +
            '<div class="w-100 info_details_folder"></div>' +
            '</div>';

        // some folder info to help make dropdowns.
        var folder_info = {!! $logged_in_user->board_folders->whereNull('lab_id') !!};


        $(document).ready(() => {

            // add base tooltop functionality
            tippy('[data-tippy-content]');

            // select2 initialisation
            // tags
            $('.tagsselect').select2({
                placeholder: 'Select tags...',
            });

            $('.templateselect').select2({
                placeholder: 'Select template type...',
            });

            // folders
            $(".folderselect").select2({
                data: $.map(folder_info, (obj) => {
                    obj.text = obj.text || obj.label; // replace name with the property used for the text
                    return obj;
                })
            })

            // select folders in

// bit of dynamic for custom sizes
            $("#size").change((e) => {
                if ($(e.target).val() == 'custom') {
                    $("#custom_size").collapse('show');
                    $("#cust_width").attr('required', 'required');
                    $("#cust_height").attr('required', 'required');
                } else {
                    $("#custom_size").collapse('hide');

                    $("#cust_width").removeAttr('required');
                    $("#cust_height").removeAttr('required');
                }
            });

// little optimisation to only load templates when it's necessary
            $('#new_board_from_template').on('shown.bs.modal', function (e) {
                if (!template_modal_init) {
                    initTemplates();
                }
            });

            // update board population
            $('#update_board').on('shown.bs.modal', (el) => {
                $(".popover").popover('hide');
                getBoardDetails($(el.relatedTarget).data('id'))
            });

            $('#update_board').submit((event) => {
                console.log('submitting update form')
                // cancels the form submission
                event.preventDefault();
                $('#update_board').modal('hide');
                //  var vars = $("#newmediadialog").find("form").serializeArray();
                var vars = $("#update_board").find("form").serialize();
                submitUpdateBoardForm(vars);
            });

            // update board population
            $('#rename_folder_dialog').on('shown.bs.modal', (el) => {
                $(".popover").popover('hide');
                $("#update_folder_id").val($("input[name='folder_selection']:checked").val())
                $("#update_folder_name").val($('#folder_radio_label_' + $("input[name='folder_selection']:checked").val()).text())
            });

            $('#rename_folder_dialog').submit((event) => {
                console.log('submitting update folder form')
                // cancels the form submission
                event.preventDefault();
                $('#rename_folder_dialog').modal('hide');
                //  var vars = $("#newmediadialog").find("form").serializeArray();
                var vars = $("#rename_folder_dialog").find("form").serialize();
                submitUpdateFolderForm(vars);
            });

            //board item list layout and animation
            grid = $('.board_grid').packery({
                // options
                itemSelector: '.grid-item',
                gutter: 10,
            });


            $('body').on('click', function (e) {
                $('.board_info_btn').each(function () {
                    if (!$(this).is(e.target) &&
                        $(this).has(e.target).length === 0 &&
                        $('.popover').has(e.target).length === 0) {
                        $(this).popover('hide');
                    }
                });
            });

            // drag to reorder folders and move things
            drake = dragula([document.getElementById('folder_list'), document.getElementById('board_list')], {
                isContainer: function (el) {
                    return el.classList.contains('folder_sortable_droppable');
                },
            })
                // what happens when we pick something up?
                .on('drag', (el, source) => {
                    console.log('Dragging')
                    console.log(el)
                    // if it's a board preview. allow drag to inside folder else prevent
                    if (el.classList.contains('board_preview')) {
                        allowDragToFolder();
                    } else {
                        preventDragToFolder()
                    }
                })
                // what happens when we're over a target?
                .on('over', (el, container, source) => {
                    // clean up
                    $('.folder_sortable').removeClass("folder_sortable_over")
                    // if it's a board preview
                    if (el.classList.contains('board_preview')) {
                        console.log('over container:');
                        console.log(container);
                        if (container.classList.contains('folder_sortable_droppable')) {
                            $(container).addClass('folder_sortable_over')
                        }
                    }
                })

                // what happens when we drop the thing?
                .on('drop', (el, target, source, sibling) => {
                    // if it's a folder being dragged, reorder
                    // clean up
                    $('.folder_sortable').removeClass("folder_sortable_over")
                    $('.folder_sortable').removeClass("folder_sortable_droppable")

                    if (el.classList.contains('folder_sortable') && (target.id == 'folder_list')) {
                        console.log('dropping a folder')
                        // if it's been dropped to the boards, drop it back
                        console.log(target)

                        // send an array of elements to backend to reorder
                        let orderArray = ([]);
                        let orderint = 0;
                        $(".folder_sortable").each((index, item) => {
                            orderArray.push({id: $(item).data('folderid'), sortorder: orderint});
                            orderint++;
                        });
                        //console.log(orderArray)
                        // for some reason, the last element of this is always the element being moved.
                        orderArray.pop();

                        axios({
                            url: baseurl + '/board/reorderfolders',
                            method: 'POST',
                            data: {
                                order: JSON.stringify(orderArray)
                            }
                        }).then((response) => {
                            if (response.data.status == 0) {
                                // it's all good, do nothing or maybe pop up a little success notification?
                            } else {
                                // alert('something went wrong with the operation');
                            }
                        }).catch(function (error) {
                            console.log(error);
                            //alert('something went wrong with the operation');
                        }).finally(() => {
                            // wait(false);
                        });
                    } else if (el.classList.contains('board_preview') && target.classList.contains('folder_sortable')) {
// it's a board dropped onto a folder
                        let board_id = $(el).data('id');
                        let folder_id = $(target).data('folderid')
                        let source_folder_id = $('input[name="folder_selection"]:checked').val();
                        axios({
                            url: baseurl + '/board/addboardtofolder',
                            method: 'POST',
                            data: {
                                board_id: board_id,
                                folder_id: folder_id
                            }
                        }).then((response) => {

                            // kill off currently dragged element so it doesn't 'stick' weirdly to the folder, then refresh the current folder
                            grid.one('removeComplete', () => {
                                showBoards(source_folder_id)
                            }).packery('remove', $(el));

                            // update the labels in the folders.
                            // reduce count in label of currently selected folder (but only if it's not the 'show all' one)
                            if (source_folder_id > 0) {
                                $("#folder_container_" + source_folder_id).data('count', $("#folder_container_" + source_folder_id).data('count') - 1);
                                $("#folder_count_" + source_folder_id).html($("#folder_container_" + source_folder_id).data('count'));
                            }
                            // increase count in label of target folder
                            $("#folder_container_" + folder_id).data('count', $("#folder_container_" + folder_id).data('count') + 1);
                            $("#folder_count_" + folder_id).html($("#folder_container_" + folder_id).data('count'));
                        }).catch(function (error) {
                            console.log(error);
                            alert('something went wrong with the operation');
                        }).finally(() => {
                            // wait(false);
                        });
                    } else {
                        revert(el)
                    }
                    // clean up
                    preventDragToFolder()

                }).on('cancel', (el, source, container) => {
                    // if it's cancelled, clean up styles
                    $('.folder_sortable').removeClass("folder_sortable_over")
                    $('.folder_sortable').removeClass("folder_sortable_droppable")
                });

            // load boards
            showBoards($('input[name="folder_selection"]:checked').val());

            $('#template_tags').on("change", (e) => {
                console.log('changing template tags')
                template_grid.packery('remove', $('.template-grid-item'));
                // clear selection
                if (scheduled_function) {
                    clearTimeout(scheduled_function)
                }
// setTimeout returns the ID of the function to be executed
                scheduled_function = setTimeout(getNewTemplatesFromTagsAndText, delay_by_in_ms, 1)
            });

            $('#template_type').on("change", (e) => {
                console.log('changing template type')
                template_grid.packery('remove', $('.template-grid-item'));
                // clear selection
                if (scheduled_function) {
                    clearTimeout(scheduled_function)
                }
// setTimeout returns the ID of the function to be executed
                scheduled_function = setTimeout(getNewTemplatesFromTagsAndText, delay_by_in_ms, 1)
            });


            $('#new_template_search_text').on("keyup", (e) => {
                console.log('new_element_clipart_text keyup')
                // clear selection
                template_grid.packery('remove', $('.template-grid-item'));
                if (scheduled_function) {
                    clearTimeout(scheduled_function)
                }

// setTimeout returns the ID of the function to be executed
                scheduled_function = setTimeout(getNewTemplatesFromTagsAndText, delay_by_in_ms, 1)
                // $("#new_element_clipart_col").find('*').not('.permanent').remove();

            });

            //'Infinite scroll' on new clipart element
            $("#template_tiles").scroll(() => {
                console.log('page is:' + currentPage)
                if (!loading) {
                    //page height
                    currentPage++;
                    let scrollHeight = $("#template_tiles").height();
                    //scroll position
                    let scrollPos = $("#template_tiles").height() + $("#template_tiles").scrollTop();
                    // fire if the scroll position is 300 pixels above the bottom of the page
                    if (((scrollHeight - 10) >= scrollPos) / scrollHeight == 0) {
                        //console.log('bottom!')
                        getNewTemplatesFromTagsAndText(currentPage)
                    }
                }
            });

            // initTemplates();
        });


        const allowDragToFolder = () => {
            console.log('allowing drag to folders')
            $('.folder_sortable').addClass("folder_sortable_droppable")
        }


        const preventDragToFolder = () => {
            $('.folder_sortable').removeClass("folder_sortable_droppable")
        }

        /**
         *Cancel a drag operation and revert
         */
        const revert = () => {
            console.log('reverting')
            drake.cancel(revert)
        }

        /**
         * Make the board with the specified id a favourite (hits a flag in the database)
         * @param id
         */
        const makeFavourite = (id) => {
            axios({
                url: baseurl + '/board/' + id + '/favourite',
                method: 'POST',
                data: {
                    favourite: $('#favourite_' + id).is(':checked')
                }
            }).then((response) => {
                if (response.data.status == 0) {
                    $('#favourite_' + id).prop('checked', response.data.value == 1)
                } else {
                    alert('something went wrong with the update');
                }
            }).catch(function (error) {
                console.log(error);
                alert('something went wrong with the update');
            }).finally(() => {
                // wait(false);
            });
        }

        /**
         * Make a new board folder, return the folder ID and name
         */
        const makeNewBoardFolder = () => {
            axios({
                url: baseurl + '/board/newfolder',
                method: 'POST',
                data: {
                    label: $('#new_folder_name').val()
                }
            }).then((response) => {
                if (response.data.status == 0) {
                    // insert new folder into the DOM here
                    //@TODO clean this up, sync with what's already there

                    let newElement = $('<label class="container folder_sortable p-0" data-folderid="' + response.data.id + '" id="folder_container_' + response.data.id + '" data-label="' + response.data.label + '"' +
                        'data-count="0">' +
                        '<input type="radio" name="folder_selection" value="' + response.data.id + '"onchange="showBoards(' + response.data.id + ')" >' +
                        '<div class="d-flex flex-row board-folder">' +
                        '<div class="folder-status-img" style="color:blue"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150.94 126.07"><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path d="M148.05,26.25a10.66,10.66,0,0,0-8-3.55h-4.3c-.84-4.6-4.35-8.09-8.52-8.09H52.12V10.16C52.12,4.56,48.23,0,43.44,0H8.68C3.93,0,0,4.56,0,10.16V112.69a11.41,11.41,0,0,0,1.45,5.61,10.6,10.6,0,0,0,8.62,7.62,10.31,10.31,0,0,0,1.77.15H130.36c6.34,0,12-5.35,12.66-11.92l7.85-78.91A11.6,11.6,0,0,0,148.05,26.25Zm-3.3,8.36-7.85,78.93c-.34,3.46-3.34,6.38-6.54,6.38H11.84a4.77,4.77,0,0,1-.78-.07c-2.54-.38-4.23-2.82-3.92-5.7l7.73-78,.09-.94c.36-3.47,3.36-6.4,6.55-6.4H140a4.61,4.61,0,0,1,3.46,1.51A5.41,5.41,0,0,1,144.75,34.61Z"/></g></g></svg>' +
                        '</div>' +
                        '<div class="g_et_al_header3" ><span id="folder_radio_label_' + response.data.id + '">' + response.data.label + '</span> (<span id="folder_count_' + response.data.id + '">0</span>)' +
                        '</div>' +
                        '<div class="folder-actions flex-grow-1 pr-1">' +
                        '</div>' +
                        '</div>' +
                        '</label>');
                    $('#folder_list').append(newElement);
                    //@TODO add this to the var folder_info
                    $('#new_folder_name').val("");

                } else {
                    alert('something went wrong with the operation');
                }
            }).catch(function (error) {
                console.log(error);
                alert('something went wrong with the operation');
            }).finally(() => {
                // wait(false);
            });
        }

        const preview_dragoptions = {
            containment: "#drag_container",
        }

        /**
         * Retrieve and show boards for a given folder.
         * @TODO maybe make a little waiting animation
         * @param folderid
         */
        const showBoards = (folderid = null, tags = null) => {


            folderid = $('input[name="folder_selection"]:checked').val();
            var sortBy = $('#sort_by').val();
            var column = "";
            var dir = "";
            switch (sortBy) {
                case 'name_asc':
                    column = "name";
                    dir = "ASC";
                    break;
                case 'name_desc':
                    column = "name";
                    dir = "DESC";
                    break;
                case 'date_asc':
                    column = "id";
                    dir = "ASC";
                    break;
                case 'date_desc':
                    column = "id";
                    dir = "DESC";
                    break;
                default :
                    column = "name";
                    dir = "ASC";
                    break;
            }
            var favorite = $("#filter_by_favourite").prop("checked");
            var searchText = $("#filter_search_text").val();
            if (tags == null) {
                tags = $("#board_tags :selected").map((_, e) => e.value).get();
            }
            axios({
                url: baseurl + '/board/getboardsforfolder',
                method: 'post',
                data: {
                    id: folderid,
                    column: column,
                    dir: dir,
                    favorite: favorite,
                    searchText: searchText,
                    tags: tags
                }
            }).then((response) => {
                    // set folder title
                    console.log('got data for boards')
                    $("#selected_folder_label").html($('#folder_radio_label_' + folderid).text())
                    // hide delete/rename folder if necessary
                    if ($("input[name='folder_selection']:checked").val() > 0) {
                        $("#folder_update_dropdown").show();
                    } else {
                        $("#folder_update_dropdown").hide();
                    }
                    // clean up grid
                    if ($('.grid-item').length > 0) {
                        grid.one('removeComplete', () => {
                            populateBoards(response);
                        }).packery('remove', $('.grid-item'));
                    } else {
                        populateBoards(response);
                    }
                }
            ).catch(function (error) {
                console.log(error);
                alert('something went wrong with the fetch. Try refreshing the page');
            }).finally(() => {
                // wait(false);
            });
        }

        const populateBoards = (response) => {
            response.data.forEach((item, index) => {
                    // let newElement = $('<div class="grid-item board_preview board_container" data-folder="' + item.folder + '" data-id="' + item.id + '" data-timestamp="' + item.created_timestamp + '" style="border: 1px solid gray; min-width: 200px;background-color: white">' +
                    let newElement = $('<div class="grid-item board_preview board_container" data-folder="' + item.folder + '" data-id="' + item.id + '" data-timestamp="' + item.created_timestamp + '" style="border: 1px solid gray; min-width: 192px !important;width: 25% !important; max-width:192px !important; background-color: white">' +
                        '<div class="col board_section">' +
                        '<div class=" board_section_heading"><div><div class="pretty p-svg p-smooth p-toggle p-plain has-tip" data-tippy-content="Make favourite" >' +
                        '<input type="checkbox" id="favourite_' + item.id + '" onclick="makeFavourite(' + item.id + ')" ' + ((item.favourite && (item.favourite == 1)) ? 'checked' : '') + '>' +
                        '<div class="state p-off">' +
                        '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="svg svg-icon bi bi-star" viewBox="0 0 16 16">' +
                        '<path d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256 4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73 3.523-3.356c.329-.314.158-.888-.283-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356-.83 4.73zm4.905-2.767l-3.686 1.894.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288l1.847-3.658 1.846 3.658a.525.525 0 0 0 .393.288l4.052.575-2.906 2.77a.564.564 0 0 0-.163.506l.694 3.957-3.686-1.894a.503.503 0 0 0-.461 0z"/>' +
                        '</svg>' +
                        '<label></label>' +
                        '</div>' +
                        '<div class="state p-on">' +
                        '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#0d6efd" class="svg svg-icon bi bi-star-fill" viewBox="0 0 16 16">' +
                        '<path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.283.95l-3.523 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>' +
                        '</svg>' +
                        '<label></label></div>                </div>                </div>' +
                        '<a href="' + baseurl + '/board/' + item.id + '" class="g_et_al_listtitle has-tip"  data-tippy-content="' + item.name + (item.read_only == 'true' ? '(read only)' : '') + '" >' + item.name + (item.read_only == 'true' ? '(read only)' : '') + '</a>' +
                        '<div><button type="button" data-tippy-content="Info" title="' + item.name + (item.read_only == 'true' ? '(read only)' : '') + ' "data-description="' + item.description + '" data-id="' + item.id + '" data-lastmodified="' + item.updated_at_str + '"  data-readonly="' + item.read_only + '" data-dimensions="' + item.width + ' X ' + item.height + '" data-author="' + item.author + '" data-tags="' + item.formattedtags + '" class="btn btn-sm btn-outline-info board_info_btn has-tip">' +
                        '<svg width="1.5em" height="1.5em" viewBox="0 0 16 16" class="bi bi-info" fill="currentColor" xmlns="http://www.w3.org/2000/svg">' +
                        '<path d="M8.93 6.588l-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588z"/>' +
                        '<circle cx="8" cy="4.5" r="1"/>' +
                        '</svg>' +
                        '</button>' +
                        '</div>' +
                        '</div>' +
                        '<div class="board_section_image">' +
                        '<a href="' + baseurl + '/board/' + item.id + '"><img class="is-loading mb-2" src="' + item.thumb + '" style="height: 100px; border: 1px solid gray; width:100%;"></a>' +
                        '</div>' +
                        '<div class="board_section_footer">' +
                        '<div>Created:' + item.created_str + '</div>' +
                        '<div>Updated:' + item.updated_str + '</div>' +
                        '<div>' +
                        ((item.exclude_from_limit == 'true') ? '<svg  width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 11" class="has-tip" data-tippy-content="A gift from Graphics et al. This art board does not count towards your total"><defs/><defs><linearGradient id="a" x1="182.7" x2="182.7" y1="313.9" y2="5" gradientUnits="userSpaceOnUse">                    <stop offset="0" stop-color="#db6a77"/>                    <stop offset="1" stop-color="#ffa4ac"/>                    </linearGradient>            </defs>            <g data-name="Layer 2">            <g data-name="Layer 1">            <path fill="url(#a)" d="M183 314a164984 164984 0 00-90-77c-30-24-79-65-87-127-4-24 5-49 23-70C48 18 76 5 104 5a98 98 0 0175 35l4 5 4-5a98 98 0 0175-35c27 0 55 13 75 35 18 21 26 46 23 70-8 62-58 103-87 127l-9 7z" transform="scale(.03284)"/>            <path fill="#c44751" d="M9 0l2 1 1 3-3 4-3 2-3-2-3-4 1-3 2-1a3 3 0 013 1v1-1a3 3 0 013-1m0 0a3 3 0 00-3 1 3 3 0 00-3-1C2 0 0 2 0 4s2 3 3 4l3 3 3-3c1-1 3-2 3-4s-2-4-3-4z"/></g></g></svg>' : '') +
                        '</div></div></div></div>');

                    grid.append(newElement).packery('appended', newElement);

                    // add and lay out newly appended items

                    tippy('.has-tip');
                }
            )//;

// enable popovers
            $('.board_info_btn').popover({
                html: true,
                trigger: 'click',
                template: '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>',
                content: infopopovercontent,
                sanitize: false,
                title: 'hello'
            }).on('shown.bs.popover', (e) => {
                $(".info_details_description").html($(e.currentTarget).data('description'));
                $(".info_details_author").html($(e.currentTarget).data('author'));
                $(".info_details_dimensions").html($(e.currentTarget).data('dimensions'));
                $(".info_details_tags").html($(e.currentTarget).data('tags'));
                $(".info_details_folder").html($(e.currentTarget).data('folder'));
                console.log(($(e.currentTarget).data('readonly')))
                if (!($(e.currentTarget).data('readonly'))) {
                    $(".popover-header").append($('<div class="btn-group btn-group-sm float-right mb-2" role="group" aria-label="Actions">\n' +
                        '  <a type="button" tabindex="0" class="btn btn-ghost-info board_preview_btn" ><i class="fas fa-search-plus"></i></a>\n' +
                        '  <a type="button" tabindex="1" class="btn btn-ghost-info board_update_btn" data-toggle="modal" data-id="' + $(e.currentTarget).data('id') + '" data-target="#update_board"><i class="fas fa-pencil-alt"></i></a>\n' +
                        '  <a type="button" tabindex="2" class="btn btn-ghost-info board_copy_btn"><i class="fas fa-copy"></i></a>\n' +
                        '  <a type="button" tabindex="3" class="btn btn-ghost-danger board_delete_btn" onclick="deleteSelectedBoard(' + $(e.currentTarget).data('id') + ')"><i class="fas fa-trash-alt"></i></a>\n' +
                        '</div>'));

                    tippy('.board_preview_btn', {
                        content: 'Preview (TODO)',
                    });
                    tippy('.board_update_btn', {
                        content: 'Update',
                    });
                    tippy('.board_copy_btn', {
                        content: 'Copy (TODO)',
                    });
                    tippy('.board_delete_btn', {
                        content: 'Delete',
                    });
                }
                //console.log($(e.currentTarget).data('description'))
                // do something…
            });
            let display_filters = "";
            let selected_folder = $('input[name="folder_selection"]:checked').val();
            //alert(selected_folder);
            if (selected_folder != -1) {
                var folder_name = $("#folder_radio_label_" + selected_folder).text();
                var name = folder_name.split("(");
                display_filters += '<div class="form-group-btn-container" ><button class="form-group-btn">' + name[0] + '</button>' +
                    '<div class="btn-overlay"  onclick="removesinglefilter(' + selected_folder + ',' + 2 + ')"><i class="fas fa-times"></i>Clear</div></div>';
            }
            let tagsElement = $("#board_tags :selected");

            tagsElement.map((_, value) => {
                display_filters += '<div class="form-group-btn-container" ><button class="form-group-btn">' + value.text + '</button>' +
                    '<div class="btn-overlay"  onclick="removesinglefilter(' + value.value + ',' + 1 + ')"><i class="fas fa-times"></i>Clear</div></div>'
            });
            $("#display_filters").html(display_filters);
        }

        const updateFolder = (source_id) => {

        }

        // populates a form with data returned from Laravel
        const populate = (frm, data) => {
            // tags are a separate thing
            //    console.log(data.tags_str)
            $('#update_metadata_tags').val(data.tags_str.split(',')).trigger('change');
            $.each(data, (key, value) => {
                let $ctrl = $('[name=' + key + ']', frm);
                if ($ctrl.is("select")) {
                    if ($ctrl.attr('multiple')) {
                        console.log(key, value)
                        $ctrl.val(value.split(',')).trigger('change');
                    } else {
                        console.log(key, value)
                        $ctrl.val(value).trigger('change');
                    }
                } else {
                    switch ($ctrl.attr("type")) {
                        case "text" :
                        case "hidden":
                            $ctrl.val(value);
                            $ctrl.trigger('change');
                            break;
                        case "radio" :
                        case "checkbox":
                            $ctrl.each((element) => {
                                if ($(element).attr('value') == value) {
                                    $(element).prop("checked", true);
                                } else {
                                    $(element).prop("checked", false);
                                }
                                $(element).trigger('change');
                            });
                            break;

                        default:
                            $ctrl.val(value);
                    }

                }

            });
        }

        const getBoardDetails = (id) => {
            axios({
                url: baseurl + '/board/' + id + '/metadata',
                method: 'get',

            }).then((response) => {
                console.log(response.data)
                populate($("#update_board").find("form"), response.data);
            }).catch(function (error) {
                console.log(error);
                alert('something went wrong with the fetch');
            }).finally(() => {
                // wait(false);
            });
        }


        // Edit
        const submitUpdateBoardForm = (vars) => {
            axios({
                url: baseurl + '/board/' + $("#update_id").val() + '/update',
                method: 'post',
                data: vars

            }).then((response) => {
                console.log(response.data)
                showBoards($('input[name="folder_selection"]:checked').val());
            }).catch(function (error) {
                console.log(error);
                alert('something went wrong with the operation');
            }).finally(() => {
                // re-enable submit button
                $('#board_update_form').find('button[type="submit"]').removeAttr('disabled');
                // wait(false);
            });

        }

        // Edit
        const submitUpdateFolderForm = (vars) => {
            axios({
                url: baseurl + '/board/renamefolder',
                method: 'post',
                data: vars
            }).then((response) => {
                console.log(response.data)
                if (response.data.status == 0) {
                    $("#folder_radio_label_" + response.data.id).text(response.data.label);
                    $("#selected_folder_label").text(response.data.label);
                } else {
                    alert('something went wrong with the operation');
                }
            }).catch(function (error) {
                console.log(error);
                alert('something went wrong with the operation');
            }).finally(() => {
                // re-enable submit button
                $('#folder_update_form :submit').enable()
                // wait(false);
            });

        }

        $("#board_tags").change(function () {
            //alert(1234);
            var selectedValues = $("#board_tags :selected").map((_, e) => e.value).get();
            showBoards(null, selectedValues);
        })

        const clearall = () => {
            $("#filter_by_favourite").prop("checked", false);
            $("#filter_search_text").val("");
            $("#board_tags").val("").trigger("change");
            // un-necessary because the board tags trigger showboards
            //showBoards('clearall');
        }

        function removesinglefilter(id, type) {
            if (type == 1) {
                $("#board_tags option[value='" + id + "']").prop("selected", false).trigger("change");
            } else {
                $("input[name=folder_selection][value='" + -1 + "']").prop('checked', true);
                showBoards();
            }
        }

    </script>
@endpush
@section('content')
    {{--{{dd($logged_in_user->has_active_subscriptions)}}--}}
    {{--    Top row: user info, icons of lab groups--}}

    <div class="header_section d-flex align-items-end">
        <div class="profile_container">
            <div class="profile_section">
                {{--        Profile picture--}}
                <div class="profile_image" style="">
                    <a href="{{route('frontend.user.account')}}">
                    <!-- <img src="{{ $logged_in_user->getPicture(80) }}"
                                                                       alt="Profile Picture"
                                                                       style="border-radius: 10px 0px 10px 10px; height: 80px"> -->
                        <img src="{{ $logged_in_user->getPicture(80) }}"
                             style="background-color: whitesmoke; border: 1px solid rgb(42, 168, 204); border-radius: 10px 0px 10px 10px;"
                             alt="Our Business Is Life Itself">
                    </a>
                </div>
                {{--        User info--}}
                <div class="user-name"><a href="{{route('frontend.user.account')}}"><p
                            class="g_et_al_header2">   {{ $logged_in_user->name }}</p></a>
                    <p class="g_et_al_paragraph2">
                        Plan:
                        @if($logged_in_user->has_active_subscription)
                            {{ $logged_in_user->plan }}
                        @else
                            Free plan
{{--                            <a href="{{route('frontend.user.newplan')}}"--}}
{{--                                          class="btn btn-sm btn-outline-warning">--}}
{{--                                Upgrade your account--}}
{{--                            </a>--}}
                        @endif</p></div>
            </div>
        </div>

        <div class="nav-container desktop-nav-container">
        @include('frontend.includes.nav_minimal')
        <!-- <div class="p-2 bd-highlight">
            {{--<hello-vue></hello-vue>--}}
            Roles debug:
            <ul>
                @role('administrator')
                <li>Administrator</li>
                @endrole
                @role('lab member')
                <li>Lab member</li>
                @endrole
                @role('user')
                <li>Base user</li>
                @endrole
                @role('student')
                <li>student</li>
                @endrole
                @role('researcher')
                <li>researcher</li>
                @endrole
                @role('lab admin')
                <li>lab admin</li>
                @endrole
                @role('big lab admin')
                <li>big lab admin</li>
                @endrole
            </ul>
        </div> -->

            {{--        Lab icons--}}
            @if($logged_in_user->labs()->count()>0)
                @foreach($logged_in_user->labs()->get() as $lab)
                    <div class="p-2 header_image"
                         style="">
                        @if($lab->icon_path)
                            <a
                                href="{{@route('frontend.lab.index',['id'=>$lab->id])}}"> <img
                                    src="{{ asset('storage/'.$lab->icon_path) }}"
                                    style="" alt="we love doing science!"></a>
                        @else
                            <a
                                href="{{@route('frontend.lab.index',['id'=>$lab->id])}}"> <img
                                    src="{{ asset('img/frontend/placeholders/lab_icon_default.svg') }}"
                                    style="" alt="we love doing science!"></a>
                        @endif
                    </div>
                @endforeach
            @endif
        </div>

    </div>

    {{--News feed and lab notifications--}}
    {{--    @can('view forum')--}}
    <div class="list_sections row" style="margin-top: 10px; min-height: 200px">
        {{--        News feed--}}
        <div class="col"
             style=" background-color: #ffffff; border: 1px solid #2aa8cc; border-radius: 0px 10px 10px 10px;">
            <div class="news_feed_heading"><a class="g_et_al_header3" href="{{route('frontend.messages')}}">
                    News feed/notifications</a>
            </div>
            {{--            News feed items--}}
            @if($notifications->count()==0)
                You're all caught up!
            @endif
            <table class="table table-hover feed_table">
                @foreach($notifications as $thread)
                    <tr>
                        <td>
                            <div class="feed_list">
                                <div class="w-25">
                                    <p class="g_et_al_timecell feed_time"> {{$thread->latestMessage->created_at->diffForHumans()}}</p>
                                </div>
                                <div class="flex-grow-1">
                                    <div class="row">
                                        <div class="col ">
                                            <a class="g_et_al_listtitle feed_title"
                                               href="{{ route('frontend.messages.show', $thread->id) }}">{{ $thread->subject }}</a>
                                        </div>
                                    </div>
                                    <div class="row">
                                        {{--                                             <div class="col g_et_al_paragraph2 text-truncate" style="max-width: 200px">--}}
                                        {{--                                                {!! $thread->latestMessage->body !!}--}}
                                        {{--                                             </div>--}}
                                    </div>
                                </div>
                                <div class="">
                                    <!-- <div class="row">
                                        <div class="col g_et_al_timecell feed_sent">
                                            Sent by
                                        </div>
                                    </div> -->
                                    <div class="row">

                                        <div class="col g_et_al_paragraph2 lab_name_section">
                                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 124.46 148.5">
                                                <g id="Layer_2" data-name="Layer 2">
                                                    <g id="Layer_1-2" data-name="Layer 1">
                                                        <path
                                                            d="M2.12,140.67a15.49,15.49,0,0,0,13.55,7.83h93.12A15.65,15.65,0,0,0,122.33,125L75.79,44.4c-.24-.38-.47-.74-.73-1.1L75,43.17v-31l.27-.14A6.38,6.38,0,0,0,72.3,0H52.16a6.38,6.38,0,0,0-6.38,6.38,6.19,6.19,0,0,0,1.88,4.5A6.15,6.15,0,0,0,49.22,12l.27.14v31l-.09.13c-.27.37-.5.74-.74,1.11L2.13,125A15.46,15.46,0,0,0,2.12,140.67ZM45.28,70.08h33.9a4.37,4.37,0,0,1,0,8.74H45.28a4.37,4.37,0,0,1,0-8.74Zm0,15.43H61.17a4.37,4.37,0,0,1,0,8.73H45.28a4.37,4.37,0,0,1,0-8.73Zm0,15.42h33.9a4.37,4.37,0,0,1,0,8.73H45.28a4.37,4.37,0,0,1,0-8.73Zm0,15.43H61.17a4.37,4.37,0,0,1,0,8.73H45.28a4.37,4.37,0,0,1,0-8.73Zm0,15.42h33.9a4.37,4.37,0,0,1,0,8.73H45.28a4.37,4.37,0,0,1,0-8.73Z"/>
                                                    </g>
                                                </g>
                                            </svg>
                                            <span>{{ $thread->creator_name }}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </td>

                    </tr>

                @endforeach
                @if($notifications->count()>4)
                    <tr>
                        <td><a href="{{route('frontend.messages')}}">{{$notification_count}} more...</a></td>
                    </tr>
                @endif

            </table>

        </div>
        {{--        Lab notifications--}}
        @if($logged_in_user->is_in_lab)
            <div class="col"
                 style="background-color: #ffffff; border: 1px solid #2aa8cc; border-radius: 0px 10px 10px 10px;">
                <div class="notification_heading g_et_al_header3">Lab notifications
                </div>
                <table class="table table-hover feed_table">
                    @foreach($lab_notifications as $thread)
                        <tr>
                            <td>
                                <div class="feed_list d-flex align-text-top mt-auto mb-auto">
                                    <div class="w-25 mt-auto mb-auto">
                                        <img class="user_icon"
                                             src="{{asset('storage/'.$thread->channel->lab->icon_path)}}">
                                        <span>{{$thread->channel->lab->name}}</span>
                                        <p class="g_et_al_timecell feed_time"> {{$thread->created_at}}</p>
                                    </div>
                                    <div class="flex-grow-1 mt-auto mb-auto">
                                        <div class="d-flex mt-auto mb-auto">
                                            <div class="flex-grow-1 mt-auto mb-auto">
                                                <a class="g_et_al_listtitle feed_title"
                                                   href="{{ $thread->path() }}">{{substr($thread->title,0,30)}}</a>
                                            </div>
                                            <div class="justify-content-end mt-auto mb-auto mr-2">
                                                <a href="{{$thread->path()}}#replies"><i
                                                        class="far fa-comment text-primary"></i><span
                                                        class="text-muted"> {{$thread->replies->count()}}</span></a>
                                            </div>
                                        </div>

                                    </div>
                                    <div class="mt-auto mb-auto">
                                        <div class="row">

                                        </div>
                                        <div class="row">
                                            <div class="col g_et_al_paragraph2 lab_name_section mt-auto mb-auto">
                                                <img class="user_icon" src="{{$thread->user->getPicture(80)}}">
                                                <span>{{$thread->user['first_name']." ".$thread->user['last_name']}}</span>
                                            </div>
                                        </div>
                                        {{--                                        </div>--}}
                                    </div>
                                </div>
                            </td>

                        </tr>
                    @endforeach
                    @if($lab_notifications->count()>4)
                        <tr>
                            <td>{{$lab_notifications_count}} more in your lab forums...</td>
                        </tr>
                    @endif
                </table>
            </div>
        @endif
    </div>
    {{--    @endcan--}}
    {{-- Board explorer--}}
    <div class="row dashboard_container" style="margin-top: 20px; min-height: 500px">

        <div class="col dashboard_section"
             style=" background-color: #ffffff; border: 1px solid #2aa8cc; border-radius: 0px 10px 10px 10px;">
            {{--            <div class="g_et_al_header2" style="border-bottom: 2px solid grey">Board explorer--}}
            {{--            </div>--}}


            <div class="row drag-section" id="drag_container">
                {{--                Artboard folders and filters section--}}

                <div class="col-sm-4 col-md-3 grid drag_section_selection" style="border-right: 1px solid #2aa8cc">

                    {{--                    Filters--}}
                    <div class="panel panel-default mb-1">
                        <div class="panel-heading ">
                            <div class="clearfix">
                                <div class="panel-title g_et_al_header3 float-left filter_title">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 142.96 149.62">
                                        <g id="Layer_2" data-name="Layer 2">
                                            <g id="Layer_1-2" data-name="Layer 1">
                                                <path
                                                    d="M136.61,0H6.34a6.31,6.31,0,0,0-5,10.12A149.65,149.65,0,0,1,10.9,24.25l47.33,81.83v30.55a6.88,6.88,0,0,0-1.69,1.24,6.77,6.77,0,0,0-2,4.86,6.91,6.91,0,0,0,6.89,6.89H81.56a6.88,6.88,0,0,0,3.16-13V106.08l47.34-81.83a149.65,149.65,0,0,1,9.61-14.13A6.32,6.32,0,0,0,136.61,0Z"/>
                                            </g>
                                        </g>
                                    </svg>
                                    Filter
                                </div>
                                <div class="float-right folder-div-after pt-1" data-toggle="collapse"
                                     data-target="#collapseFilter"></div>
                                <button class="clear_all_btn" onclick="clearall()"><i class="fas fa-times"></i>Clear All
                                </button>
                            </div>
                        </div>
                        <div id="collapseFilter" class="panel-collapse collapse" style="border-bottom: 1px solid gray">
                            <div class="panel-body">
                                <div class="form-row mb-1">
                                    {{--                        Artboard search by text @TODO get artboards dymanically when updated--}}
                                    <div class="form-group has-search">
                                        <span class="fa fa-search form-control-feedback"></span>
                                        <input type="text" id="filter_search_text"
                                               class="input_field form-control"
                                               placeholder="Search"
                                               onkeyup="showBoards()">
                                    </div>
                                </div>
                                <div class="form-row mb-1">
                                    {{--                        Artboard search by tag @TODO get artboards dymanically when updated--}}
                                    <div class="col">
                                        {{ html()->multiselect('tags[]',$tags->pluck('text', 'id'))->class('tagsselect')->id('board_tags')
                                                       }}
                                    </div>
                                </div>
                                <div class="form-row mb-1">
                                    {{--                        Artboard search by favourite @TODO get artboards dymanically when updated--}}
                                    <div class="col">
                                        <div class="pretty p-switch p-smooth p-toggle p-plain"
                                             data-tippy-content="Show only favourites">
                                            <input type="checkbox" id="filter_by_favourite"
                                                   onchange="showBoards()">
                                            <div class="state ">
                                                <label>Show only favourites</label>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    {{--                    Folders--}}
                    <div class="panel panel-default mb-1">
                        <div class="panel-heading ">
                            <div class="panel-title ">
                                <div class="clearfix">
                                    @if($logged_in_user->has_active_subscription)
                                        <span class="filter_dropdown dropdown float-end">
                                        <button class="folder-btn"
                                                data-toggle="dropdown"
                                                aria-haspopup="true"
                                                aria-expanded="false">
                                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 180.38 126.07"><g
                                                        id="Layer_2" data-name="Layer 2"><g id="Layer_1-2"
                                                                                            data-name="Layer 1"><path
                                                                d="M180.32,35.25l-7.85,78.9c-.65,6.57-6.33,11.92-12.67,11.92H69.68A12.72,12.72,0,0,0,71.47,123a12.17,12.17,0,0,0,.8-3.07H159.8c3.21,0,6.21-2.93,6.55-6.38l7.85-78.93a5.41,5.41,0,0,0-1.27-4.25,4.59,4.59,0,0,0-3.46-1.52H72.27a12.17,12.17,0,0,0-.8-3.07,12.72,12.72,0,0,0-1.79-3.07,12.54,12.54,0,0,0-9.87-4.79H38a12.55,12.55,0,0,0-8.59,3.39V10.16C29.45,4.56,33.37,0,38.13,0H72.89c4.79,0,8.68,4.56,8.68,10.16v4.45h75.07c4.18,0,7.7,3.5,8.53,8.1h4.3a10.64,10.64,0,0,1,8,3.54A11.61,11.61,0,0,1,180.32,35.25Zm-82.48,50V63.5a5,5,0,0,0-5-5h-28v-28a5,5,0,0,0-3.3-4.72,5,5,0,0,0-1.73-.31H38a5,5,0,0,0-5,5v28H5a5,5,0,0,0-5,5V85.27a5,5,0,0,0,5,5H33v28a5,5,0,0,0,1.74,3.79s0,0,0,0A5,5,0,0,0,38,123.31H59.81a5,5,0,0,0,1.73-.31,5,5,0,0,0,3.3-4.72v-28h28A5,5,0,0,0,97.84,85.27Z"/></g></g></svg>
                                        </button>
                                        <div class="dropdown-menu">
                                        <h5 class="g_et_al_header5">New Folder</h5>
                                            <div class="form-group">
                                                <input type="text" class="form-control" id="new_folder_name"
                                                       placeholder="Folder name">
                                            </div>
                                            <div class="form-group create_btn">
                                                <button type="button" class="btn btn-primary"
                                                        onclick="makeNewBoardFolder()">Create
                                                </button>
                                            </div>
                                        </div>
                                    </span>

                                    <span class="float-start g_et_al_header3"> Folders</span>

                                    <div class="float-right folder-div-after" data-toggle="collapse"
                                         aria-expanded="true"
                                         data-target="#collapseFolders"></div>
                                    @else
                                        <span id="upgrade_prompt_but"
                                              class="g_et_al_navigation pr-0 pl-2 "
                                              style=""><a
                                                href="{{route('frontend.user.newplan')}}"
                                                class="btn btn-sm btn-outline-warning">
                           Upgrade your account for folders and other awesome features!
                        </a></span>
                                    @endif
                                </div>
                            </div>
                        </div>

                        @if($logged_in_user->has_active_subscription)
                        <div id="collapseFolders" class="folder_collapse panel-collapse show" style="">
                            <label class="container mt-2 p-0 nodrag"><input type="radio" name="folder_selection"
                                                                            id="folder_container_-1"
                                                                            value="-1" onchange="showBoards()" checked>
                                <div class="d-flex flex-row board-folder"
                                     style=" cursor:pointer;">
                                    <div class="g_et_al_header3" id="folder_radio_label_-1">Show all</div>
                                </div>
                            </label>
                            <div class="panel-body folder-lists" id="folder_list">

                                @foreach($logged_in_user->board_folders->whereNull('lab_id') as $folder)
                                    <label class="container folder_sortable p-0" data-folderid="{{$folder->id}}"
                                           id="folder_container_{{$folder->id}}" data-label="{{$folder->label}}"
                                           data-count="{{$folder->boards()->count()}}">
                                        <input
                                            type="radio" name="folder_selection" value="{{$folder->id}}"
                                            onchange="showBoards({{$folder->id}})">
                                        <div class="d-flex flex-row board-folder">
                                            <div class="folder-status-img" style="color:blue">
                                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150.94 126.07">
                                                    <g id="Layer_2" data-name="Layer 2">
                                                        <g id="Layer_1-2" data-name="Layer 1">
                                                            <path
                                                                d="M148.05,26.25a10.66,10.66,0,0,0-8-3.55h-4.3c-.84-4.6-4.35-8.09-8.52-8.09H52.12V10.16C52.12,4.56,48.23,0,43.44,0H8.68C3.93,0,0,4.56,0,10.16V112.69a11.41,11.41,0,0,0,1.45,5.61,10.6,10.6,0,0,0,8.62,7.62,10.31,10.31,0,0,0,1.77.15H130.36c6.34,0,12-5.35,12.66-11.92l7.85-78.91A11.6,11.6,0,0,0,148.05,26.25Zm-3.3,8.36-7.85,78.93c-.34,3.46-3.34,6.38-6.54,6.38H11.84a4.77,4.77,0,0,1-.78-.07c-2.54-.38-4.23-2.82-3.92-5.7l7.73-78,.09-.94c.36-3.47,3.36-6.4,6.55-6.4H140a4.61,4.61,0,0,1,3.46,1.51A5.41,5.41,0,0,1,144.75,34.61Z"/>
                                                        </g>
                                                    </g>
                                                </svg>
                                            </div>

                                            <div class="g_et_al_header3"
                                            ><span id="folder_radio_label_{{$folder->id}}">{{$folder->label}}</span>
                                                (<span
                                                    id="folder_count_{{$folder->id}}">{{$folder->boards()->count()}}</span>)
                                            </div>
                                            <div class="folder-actions flex-grow-1 pr-1">

                                            </div>
                                        </div>
                                    </label>
                                @endforeach
                            </div>
                        </div>
                            @endif

                    </div>

                </div>
                <div class="col-sm-8 col-md-9 drag_section_display">
                    <div class="d-flex bd-highlight drag_display_heading ">
                        <div class="flex-grow-1 align-self-center">
                            <form class="form-inline">
                                <div class="form-group">
                                    <label for="sort_by" class="sr-only">Sort by</label>
                                    <select id="sort_by" class="form-control" style="" onchange="showBoards()">
                                        <option value="name_asc">Name (A-Z)</option>
                                        <option value="name_desc">Name (Z-A)</option>
                                        <option value="date_desc">Newest first</option>
                                        <option value="date_asc">Oldest first</option>
                                    </select>
                                </div>
                                <div id="display_filters" class="display-filters-section">
                                    <div class="form-group-btn-container">
                                        <button class="form-group-btn" onclick="removesinglefilter()">Folder Name
                                        </button>
                                        <div class="btn-overlay"><i class="fas fa-times"></i>Clear</div>
                                    </div>

                                </div>
                            </form>
                        </div>
                        <div class="board_new_section align-self-center">

                            {{--                    <button class="btn btn-outline-info btn-lg img-button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-toggle="modal" data-target="#new_board"><i--}}
                            {{--                            class="fa fa-plus" aria-hidden="true"></i> New--}}
                            {{--                    </button>--}}

                                {{--                        @if((!Gate::check("no ads") && (5-$logged_in_user->boards->count()>0)) || Gate::check("no ads"))--}}
                                <div class="dropdown no-boards @if(!((!$logged_in_user->has_active_subscription && ($logged_in_user->myBoardsCount<3))||$logged_in_user->has_active_subscription)) d-none @endif"  id="add_board_but">
                                    <button class="board_new" data-toggle="dropdown"
                                            aria-haspopup="true"
                                            aria-expanded="false">
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 199.87 153.96">
                                            <g id="Layer_2" data-name="Layer 2">
                                                <g id="Layer_1-2" data-name="Layer 1">
                                                    <path
                                                        d="M162.26,105.39A12.41,12.41,0,0,0,165,105v36A12.94,12.94,0,0,1,152.08,154H12.93A12.94,12.94,0,0,1,0,141V31.91A12.94,12.94,0,0,1,12.93,19H127.48v5.49H12.93A7.43,7.43,0,0,0,5.5,31.91V141a7.43,7.43,0,0,0,7.43,7.43H152.08a7.43,7.43,0,0,0,7.43-7.43V105.4h2.75Zm-55.2-33A12.61,12.61,0,0,1,94.47,59.81V42.11H24.41v88.72h115V105.38a12.58,12.58,0,0,1-12-12.57V72.4ZM194.83,33h-28V5a5,5,0,0,0-5-5H140.06a5,5,0,0,0-5,5V33h-28a5,5,0,0,0-5,5V59.81a5,5,0,0,0,5,5h28v28a5,5,0,0,0,4.42,5,4.08,4.08,0,0,0,.61,0h21.77a3,3,0,0,0,.43,0A4.85,4.85,0,0,0,165,96.71a5,5,0,0,0,1.87-3.9v-28h28a5,5,0,0,0,5-5V38A5,5,0,0,0,194.83,33Z"/>
                                                </g>
                                            </g>
                                        </svg>
                                    </button>
                                    <div class="dropdown-menu board-new-dropdown">
                                        <a class="dropdown-item" data-toggle="modal" data-target="#new_board" href="#">Blank
                                            board</a>
                                        <a class="dropdown-item" data-toggle="modal"
                                           data-target="#new_board_from_template"
                                           href="#">From template</a>
                                    </div>
                                </div>
                                {{--                            @cannot('no ads')--}}
                                {{--                        {{dd($logged_in_user->current_active_subscriptions)}}--}}

                                {{--                            @endcannot--}}

{{--                            @endif--}}

                        </div>
                        {{--<span class="g_et_al_header2"> Board explorer</span>--}}
                        {{--                   // @if--}}
                        @if(!$logged_in_user->has_active_subscription)

                        @endif
                        @if(!$logged_in_user->has_active_subscription)
                            <div>
                                <div class="board_available_msg pl-2 @if($logged_in_user->myBoardsCount>2)font-weight-bold  @endif"><span
                                        data-count="{{3-$logged_in_user->myBoardsCount}}"
                                        id="free_board_count">{{3-$logged_in_user->myBoardsCount}}</span> of 3 free
                                    boards remaining.
                                </div>
                                <span id="upgrade_prompt_but"
                                      class="g_et_al_navigation pr-0 pl-2 @if($logged_in_user->myBoardsCount<3)d-none  @endif"
                                      style=""><a
                                        href="{{route('frontend.user.newplan')}}"
                                        class="btn btn-sm btn-outline-warning">
                           Upgrade your account for more!
                        </a></span>
                            </div>

                        @endif
                        {{--                    //@endcannot--}}

                        {{--            <button class="btn">New</button>--}}
                    </div>
                    <div class="row g_et_al_header2 w-100" style="margin-left:2px">
                        <div id="selected_folder_label" class="selected-label"></div>
                        <div class="dropdown" id="folder_update_dropdown">
                            <button class="board_new" data-toggle="dropdown"
                                    data-tippy-content="Rename/delete"
                                    aria-haspopup="true"
                                    aria-expanded="false">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="darkgrey"
                                     class="bi bi-caret-down-fill" viewBox="0 0 16 16" d>
                                    <path
                                        d="M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/>
                                </svg>
                            </button>
                            <div class="dropdown-menu board-new-dropdown">
                                <a class="dropdown-item" data-toggle="modal" data-target="#rename_folder_dialog"
                                   href="#">Rename folder

                                    <svg xmlns="http://www.w3.org/2000/svg" fill="darkgrey" width="16" height="16">
                                        <defs/>
                                        <g data-name="Layer 2">
                                            <path
                                                d="M0 2v12a2 2 0 002 2h12a2 2 0 002-2V2a2 2 0 00-2-2H2a2 2 0 00-2 2zm5 11a16 16 0 01-2 0 16 16 0 011-2 9 9 0 010-1l3 2a9 9 0 01-2 1zm7-8l-5 6-2-2 5-6a1 1 0 012 0v1a1 1 0 010 1z"
                                                data-name="Layer 1"/>
                                        </g>
                                    </svg>

                                </a>
                                <a class="dropdown-item" data-toggle="modal"
                                   data-target="#delete_folder_dialog"
                                   href="#">Remove folder
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="darkgrey"
                                         class="bi bi-trash-fill" viewBox="0 0 16 16">
                                        <path
                                            d="M2.5 1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1H3v9a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4h.5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1H2.5zm3 4a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5zM8 5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7A.5.5 0 0 1 8 5zm3 .5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 1 0z"/>
                                    </svg>
                                </a>
                            </div>
                        </div>
                        {{--                        <div class="selected-label-icon">--}}
                        {{--                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="darkgrey" class="bi bi-caret-down-fill" viewBox="0 0 16 16">--}}
                        {{--                                <path d="M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/>--}}
                        {{--                            </svg>--}}
                        {{--                        </div>--}}
                    </div>
                    <div class="row w-100 board_grid ml-2" id="board_list" style="max-height: 500px; overflow-y: auto">


                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('dialogs')
    @can('create board')
        <div id="new_board" class="modal fade" role="dialog">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">New board</h4>
                        <button type="button" class="close modal-close-btn" data-dismiss="modal">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 129.94 129.94">
                                <g id="Layer_2" data-name="Layer 2">
                                    <g id="Layer_1-2" data-name="Layer 1">
                                        <path
                                            d="M112.06,0H0V112.06a17.88,17.88,0,0,0,17.88,17.88h94.18a17.87,17.87,0,0,0,17.88-17.88V17.88A17.88,17.88,0,0,0,112.06,0Zm12.88,112.06a12.9,12.9,0,0,1-12.88,12.88H17.88A12.9,12.9,0,0,1,5,112.06V5H112.06a12.9,12.9,0,0,1,12.88,12.88ZM102,40,77,65l25,25a8.5,8.5,0,1,1-12,12L65,77,40,102a8.5,8.5,0,1,1-12-12L53,65l-25-25a8.5,8.5,0,1,1,12-12L65,53l25-25a8.5,8.5,0,1,1,12,12Z"></path>
                                    </g>
                                </g>
                            </svg>
                        </button>
                    </div>
                    <div class="modal-body">
                        @include('frontend.user.form.newboard')
                    </div>
                </div>
            </div>
        </div>

        <div id="update_board" class="modal fade" role="dialog">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">Update board</h4>
                        <button type="button" class="close modal-close-btn" data-dismiss="modal">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 129.94 129.94">
                                <g id="Layer_2" data-name="Layer 2">
                                    <g id="Layer_1-2" data-name="Layer 1">
                                        <path
                                            d="M112.06,0H0V112.06a17.88,17.88,0,0,0,17.88,17.88h94.18a17.87,17.87,0,0,0,17.88-17.88V17.88A17.88,17.88,0,0,0,112.06,0Zm12.88,112.06a12.9,12.9,0,0,1-12.88,12.88H17.88A12.9,12.9,0,0,1,5,112.06V5H112.06a12.9,12.9,0,0,1,12.88,12.88ZM102,40,77,65l25,25a8.5,8.5,0,1,1-12,12L65,77,40,102a8.5,8.5,0,1,1-12-12L53,65l-25-25a8.5,8.5,0,1,1,12-12L65,53l25-25a8.5,8.5,0,1,1,12,12Z"></path>
                                    </g>
                                </g>
                            </svg>
                        </button>
                    </div>
                    <div class="modal-body">
                        @include('frontend.user.form.updateboard')
                    </div>
                </div>
            </div>
        </div>

        <div id="new_board_from_template" class="modal fade" role="dialog">
            <div class="modal-dialog modal-xl">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">New from template <span id="selected_template_name"></span></h4>
                        <button type="button" class="close" data-dismiss="modal"><i class="fa fa-times"
                                                                                    aria-hidden="true"
                                                                                    style="color: red"></i>
                        </button>
                    </div>
                    <div class="modal-body">
                        @include('frontend.user.form.newboardfromtemplate')
                    </div>
                </div>
            </div>
        </div>

        <div id="rename_folder_dialog" class="modal fade" role="dialog">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">Rename folder<span id="selected_template_name"></span></h4>
                        <button type="button" class="close" data-dismiss="modal"><i class="fa fa-times"
                                                                                    aria-hidden="true"
                                                                                    style="color: red"></i>
                        </button>
                    </div>
                    <div class="modal-body">
                        @include('frontend.user.form.updatefolder')
                    </div>
                </div>
            </div>
        </div>
        <div id="delete_folder_dialog" class="modal fade" role="dialog">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">Really delete?</h4>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            {{--<button type="submit" class="btn btn-primary">Submit</button>--}}
                            <div style="margin: 0 auto; text-align: center; ">
                                <button class="btn btn-lg btn-danger" onclick="roolyDeleteSelectedFolder()"><i
                                        class="fas fa-trash" aria-hidden="true"></i> Delete
                                </button>

                                <button class="btn btn-secondary btn-lg" data-dismiss="modal"><i class="fas fa-undo"
                                                                                                 aria-hidden="true"></i>
                                    Cancel
                                </button>
                            </div>

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

        <div id="deletedialog" class="modal fade" role="dialog">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">Really delete?</h4>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            {{--<button type="submit" class="btn btn-primary">Submit</button>--}}
                            <div style="margin: 0 auto; text-align: center; ">
                                <button class="btn btn-lg btn-danger" onclick="roolyDeleteSelectedBoard()"><i
                                        class="fas fa-trash" aria-hidden="true"></i> Delete
                                </button>

                                <button class="btn btn-secondary btn-lg" data-dismiss="modal"><i class="fas fa-undo"
                                                                                                 aria-hidden="true"></i>
                                    Cancel
                                </button>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endcan

@endsection