@extends('frontend.layouts.app_board')

@section('title', app_name() . ' | ' . __('navs.frontend.dashboard') )
@section('header')


@endsection
{{--Content--}}
@section('content')
    <div class="toast ml-auto hide" role="alert" data-delay="2000"
         style="position: absolute; top: 1vh; right:5vw;z-index:1" aria-atomic="true" id="savingfeedback">
        <div class="toast-header">
            <strong class="mr-auto text-primary">Saving...</strong>
            <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
                <span aria-hidden="true">×</span>
            </button>
        </div>
        <div class="toast-body">Saved!</div>
    </div>

    <!-- Back to dashboard -->
    <button class="dashboard_nav_btn dashboard_nav_btn_board"
            onclick="save(); return window.location.href='{{URL::to(isset($board->lab_id)?"/lab/{$board->lab_id}":'/')}}'">
        Back to<br>{{isset($board->lab_id)?"Lab":'Dashboard'}}<i
            class="fas fa-arrow-left"></i></button>

    <!-- New Artboard design starts -->
    <div class="app-container">
        <div class="canvas-section">
            <div class="top-tools">
                <div class="top-buttons top-buttons_left">
                    <div class="btn-grp">
                        <button class="mini-tool" data-tippy-content="Undo" data-tippy-placement="top"
                                onclick="undo()">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 107.42 124.96">
                                <g data-name="Layer 2">
                                    <g data-name="Layer 1">
                                        <path
                                            d="M10.31,41.05l17.16,7a35,35,0,0,0,36.11,57.49c24.22-8,29.9-29,23.86-47.31A34.48,34.48,0,0,0,58.79,34.55l.9,1.77,2.54,5c2,3.91.88,8.86-2.48,10.31a5.13,5.13,0,0,1-4,0l-27.1-11L14.66,34.9,31,16.6,44.14,1.81A5.11,5.11,0,0,1,47.77,0c3.65-.18,6.82,3.77,6.77,8.16L54.46,14l0,2.55c1.32,0,2.65,0,4,.14a52.61,52.61,0,0,1,45.8,36c9.1,27.6-.64,58.25-35.09,69.6a52.63,52.63,0,0,1-58.8-81.25Z"/>
                                    </g>
                                </g>
                            </svg>
                        </button>
                        <button class="mini-tool" data-tippy-content="Redo" data-tippy-placement="top"
                                onclick="canvas.redo()">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 107.42 124.96">
                                <g data-name="Layer 2">
                                    <g data-name="Layer 1">
                                        <path
                                            d="M97.11,41.05,80,48.05a35,35,0,0,1-36.11,57.49c-24.22-8-29.9-29-23.86-47.31A34.48,34.48,0,0,1,48.63,34.55l-.9,1.77-2.54,5c-2,3.91-.88,8.86,2.48,10.31a5.13,5.13,0,0,0,4,0l27.1-11L92.75,34.9,76.46,16.6,63.28,1.81A5.11,5.11,0,0,0,59.65,0C56-.17,52.83,3.78,52.88,8.17L53,14l0,2.55c-1.32,0-2.65,0-4,.14a52.61,52.61,0,0,0-45.8,36c-9.1,27.6.64,58.25,35.09,69.6a52.63,52.63,0,0,0,58.8-81.25Z"/>
                                    </g>
                                </g>
                            </svg>
                        </button>
                    </div>
                    <div class="btn-grp">
                        <button class="mini-tool" data-tippy-content="Zoom in" data-tippy-placement="top"
                                onclick="zoomIn()">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 85.73 115.37">
                                <g data-name="Layer 2">
                                    <g data-name="Layer 1">
                                        <path
                                            d="M64,78.38l13.11,26.56a7.22,7.22,0,1,1-12.94,6.41L51,84.8A40,40,0,1,1,47.92,7.17v6.27h-7A12.16,12.16,0,0,0,30.24,19.8q-1.41.52-2.79,1.2A28.28,28.28,0,1,0,66.92,54.94a12.18,12.18,0,0,0,5.37-10.09v-7h6.78A40,40,0,0,1,64,78.38ZM79.32,19.22H66.51V6.41a6.41,6.41,0,0,0-12.82,0V19.22H40.88a6.41,6.41,0,1,0,0,12.81H53.69V44.85a6.41,6.41,0,0,0,12.82,0V32H79.32a6.41,6.41,0,1,0,0-12.81Z"/>
                                    </g>
                                </g>
                            </svg>
                        </button>
                        <button class="mini-tool" data-tippy-content="zoom out" data-tippy-placement="top"
                                onclick="zoomOut()">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 86.96 109.01">
                                <g data-name="Layer 2">
                                    <g data-name="Layer 1">
                                        <path
                                            d="M80,39.92V40c0,1.19-.07,2.37-.18,3.55,0,.41-.09.82-.14,1.23-.09.78-.21,1.55-.35,2.31-.08.44-.14.88-.24,1.31-.21,1-.47,2-.76,3-.16.53-.34,1-.52,1.56s-.4,1.14-.62,1.7-.4,1-.62,1.5c-.32.74-.68,1.47-1,2.19-.22.41-.43.83-.66,1.24-.46.81-.95,1.61-1.46,2.4l-.61.89c-.51.72-1,1.43-1.59,2.12l-.53.66a38.83,38.83,0,0,1-4.92,4.93c-.28.24-.58.47-.87.7s-.6.5-.92.74L77.06,98.58A7.22,7.22,0,0,1,64.12,105L51,78.43c-.3.09-.61.14-.92.22-.81.21-1.61.43-2.44.59-.48.09-1,.14-1.46.22-1.17.18-2.35.32-3.55.4-.73,0-1.47.1-2.2.11L40,80c-.49,0-1-.06-1.46-.07s-1.19,0-1.78-.09-1.47-.15-2.2-.25l-1.3-.2c-.82-.14-1.63-.3-2.43-.49l-.89-.23c-.89-.23-1.78-.48-2.65-.77l-.34-.13a39.91,39.91,0,0,1-8.52-4.12L18,73.37c-.6-.39-1.17-.83-1.74-1.25-.42-.32-.85-.62-1.26-1s-1-.8-1.41-1.21-.92-.81-1.36-1.23-.86-.87-1.27-1.31-.83-.88-1.22-1.34-.84-1-1.25-1.53-.64-.84-1-1.27c-.44-.61-.86-1.23-1.26-1.87-.23-.35-.45-.72-.66-1.08-.44-.74-.85-1.48-1.24-2.24-.06-.12-.13-.23-.19-.34S4,57.4,4,57.24c-.45-.93-.86-1.87-1.23-2.84-.13-.33-.25-.67-.37-1-.31-.87-.6-1.75-.85-2.64-.12-.46-.24-.92-.35-1.38C1,48.6.8,47.83.66,47c-.11-.59-.2-1.19-.27-1.78s-.17-1.34-.23-2-.08-1.41-.1-2.11C.05,40.75,0,40.38,0,40s0-.47,0-.72c0-.69,0-1.38.1-2.07s.09-1.33.17-2,.17-1.14.26-1.7C.69,32.76.82,32,1,31.26c.1-.45.22-.89.34-1.33.21-.83.43-1.65.7-2.45.13-.4.28-.78.43-1.18.29-.81.59-1.61.93-2.4.2-.44.43-.87.64-1.31.33-.69.66-1.39,1-2.06s.66-1.1,1-1.66.62-1,1-1.52c.46-.67,1-1.31,1.46-2,.27-.35.53-.71.81-1.05.58-.69,1.2-1.35,1.83-2,.26-.27.5-.55.76-.81.64-.62,1.31-1.22,2-1.8.31-.27.61-.55.93-.81.63-.5,1.29-1,1.95-1.45.43-.31.85-.62,1.29-.91.59-.39,1.21-.75,1.83-1.11s1.1-.64,1.67-.94l.68-.38c.47-.23,1-.42,1.42-.63s.76-.35,1.14-.5c.9-.37,1.81-.7,2.72-1l.72-.25A39.8,39.8,0,0,1,35.62.25l.94-.08C37.49.1,38.42.05,39.34,0c.22,0,.44,0,.65,0s.44,0,.66,0c.78,0,1.55.06,2.32.12.53,0,1.06.07,1.58.13s1.11.16,1.66.25a39.82,39.82,0,0,1,17,6.94H41.83a11.77,11.77,0,0,0-9.9,5.44c-.71.21-1.41.44-2.1.71s-1.23.5-1.84.78l-.92.45c-.51.26-1,.55-1.51.85-.32.19-.64.37-.95.57s-.89.62-1.33.93l-1,.71c-.41.34-.8.69-1.2,1l-.85.77c-.42.42-.82.85-1.21,1.29l-.61.66c-.48.57-.93,1.15-1.36,1.75l-.25.33A28.52,28.52,0,0,0,12,36.23h0c-.11.81-.17,1.63-.21,2.45,0,.14,0,.28,0,.42,0,.74,0,1.49,0,2.23l0,.6c0,.74.14,1.48.25,2.21,0,.18,0,.35.07.52.13.78.3,1.55.49,2.32l.09.34c.22.83.48,1.64.78,2.45l.07.19c.32.84.68,1.69,1.09,2.52l0,.09c.41.83.86,1.63,1.34,2.4l.08.13c.47.74,1,1.45,1.51,2.14l.14.19c.53.68,1.09,1.32,1.68,1.94l.14.16A28.36,28.36,0,0,0,36.19,68l.11,0c.75.1,1.52.16,2.28.2l.64,0c.65,0,1.3,0,2,0l.92,0c.61,0,1.23-.11,1.84-.2l.94-.14c.62-.11,1.23-.24,1.84-.39l.87-.22c.62-.18,1.25-.38,1.87-.6l.78-.29c.62-.24,1.24-.51,1.85-.8l.77-.37c.59-.3,1.15-.63,1.71-1l.84-.51c.48-.31.94-.65,1.4-1,.31-.23.62-.45.92-.69s.8-.69,1.19-1,.6-.53.89-.81.83-.87,1.23-1.32c.2-.22.42-.44.61-.67a28.39,28.39,0,0,0,5.27-9.6l0,0a28.06,28.06,0,0,0-.14-17.5H79c0,.14.07.27.1.4h0a2.07,2.07,0,0,0,0,.22c.07.32.12.66.18,1,.16.89.3,1.78.4,2.67q.07.53.12,1.05C79.91,37.56,80,38.74,80,39.92Zm7-20.66h0a6.12,6.12,0,0,0-6.13-6.12h-39a6.13,6.13,0,0,0-6.13,6.12h0a6.13,6.13,0,0,0,6.13,6.13h39A6.12,6.12,0,0,0,87,19.26Z"/>
                                    </g>
                                </g>
                            </svg>
                        </button>
                    </div>
                    <button class="mini-tool" data-tippy-content="Ruler" data-tippy-placement="top"
                            onclick="toggleRuler()">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105.91 84.18">
                            <g data-name="Layer 2">
                                <g data-name="Layer 1">
                                    <path
                                        d="M105.17,78.64,97.25,70,92.41,76.6a1.41,1.41,0,0,1-1.13.64,1.07,1.07,0,0,1-.81-.36,2,2,0,0,1,0-2.37l4.84-6.57-3.87-4.22L88.32,68a1.4,1.4,0,0,1-1.12.63,1.09,1.09,0,0,1-.81-.36,2,2,0,0,1,0-2.38l3.12-4.23-3.73-4.06-5,6.81a1.43,1.43,0,0,1-1.13.63,1,1,0,0,1-.8-.36,2,2,0,0,1,0-2.37l5-6.8L80,51.25l-3.29,4.46a1.41,1.41,0,0,1-1.12.64,1.09,1.09,0,0,1-.81-.36,1.93,1.93,0,0,1,0-2.37l3.29-4.47L74.24,45l-5,6.79a1.44,1.44,0,0,1-1.13.64,1.08,1.08,0,0,1-.81-.37,2,2,0,0,1,0-2.37l5-6.79L68.44,38.7l-3.28,4.45a1.43,1.43,0,0,1-1.13.63,1.07,1.07,0,0,1-.81-.36,2,2,0,0,1,0-2.37l3.28-4.45L62.7,32.45l-5,6.78a1.44,1.44,0,0,1-1.13.64,1.09,1.09,0,0,1-.81-.37,2,2,0,0,1,0-2.37l5-6.78L56.9,26.14l-3.28,4.44a1.43,1.43,0,0,1-1.13.63,1.08,1.08,0,0,1-.81-.36,2,2,0,0,1,0-2.37L55,24l-3.82-4.15-5,6.77A1.41,1.41,0,0,1,45,27.3a1.06,1.06,0,0,1-.81-.37,1.93,1.93,0,0,1,0-2.37l5-6.76-3.88-4.22L42.09,18a1.44,1.44,0,0,1-1.13.64,1.06,1.06,0,0,1-.81-.37,2,2,0,0,1,0-2.37l3.26-4.43L39.61,7.34l-5,6.75a1.41,1.41,0,0,1-1.13.64,1.1,1.1,0,0,1-.81-.36,2,2,0,0,1,0-2.37l5-6.76L33.49.67C32.26-.66,30.18.07,29.42,2.1L.25,80.07c-.75,2,.25,4.11,2,4.11H103.08C105.45,84.18,106.85,80.47,105.17,78.64ZM23.55,63.93,35.65,31.6,65.38,63.93Z"/>
                                </g>
                            </g>
                        </svg>
                    </button>
                </div>

                <div class="board_name_input modal-tool" onclick="showMenus('board_mainmenu_container')"><h3
                        id=""><span id="board_name_disp"> {{$board->name}}</span>&nbsp(<span id="board_dimensions">{{round($board->width/ 3.7795) }}x{{round($board->height/ 3.7795)}}</span>&nbsp;mm)
                    </h3>
                </div>
                <div class="top-buttons top-buttons_right" style="display: none">
                    {{--                    Text controls --}}
                    <div class="text-tool-options" style="display: none">
                        @include('frontend.board.form.canvascontrols.textcontrols')
                    </div>
                    <div class="image_context_menu removed-alignment" style="display: flex">
                        {{--                        Colourways dropdown--}}
                        <div class="dropdown">
                            <button class="main-tool main-tool-option " id="colorWays" data-toggle="dropdown"
                                    data-offset="-150"
                                    data-tippy-content="Colourways">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 168 168" fill="currentColor">
                                    <defs/>
                                    <g data-name="Layer 2">
                                        <path
                                            d="M162 23l-33 42-18 22a35 35 0 00-10-15 35 35 0 00-15-8l19-19 40-38c6-7 15-9 20-5s3 14-3 21zM94 81c-9-8-22-9-31 0-13 15-8 31-18 46 0 0 34 4 52-16 8-9 6-22-3-30zm19 24a33 33 0 01-7 15c-16 17-41 20-54 20a79 79 0 01-9 0l-20-3 11-17c3-5 5-10 6-17 2-9 5-20 14-31a32 32 0 0114-9l28-27 2-1H66a66 66 0 00-66 66v1a66 66 0 0066 66 66 66 0 0066-66V82zM94 81c-9-8-22-9-31 0-13 15-8 31-18 46 0 0 34 4 52-16 8-9 6-22-3-30z"
                                            data-name="Layer 1"/>
                                    </g>
                                </svg>
                            </button>
                            <div class="dropdown-menu" aria-labelledby="colorWays">
                                @include('frontend.board.form.canvascontrols.colourways')
                            </div>
                        </div>
                        <button class="main-tool main-tool-option" id="update_selection_btn"
                                data-tippy-content="Edit Chart">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96.671 96.671">
                                <g data-name="Layer 2">
                                    <g data-name="Layer 1">
                                        <path
                                            d="M0,12.3355v72A12.3355,12.3355,0,0,0,12.3355,96.671h72A12.3355,12.3355,0,0,0,96.671,84.3355v-72A12.3355,12.3355,0,0,0,84.3355,0h-72A12.3355,12.3355,0,0,0,0,12.3355ZM31.1175,75.9419a94.1917,94.1917,0,0,1-10.1508,3.1114l-.0163.0022a96.991,96.991,0,0,1,1.6922-10.4926,56.8232,56.8232,0,0,1,3.1159-9.251L39.8515,71.58A56.9914,56.9914,0,0,1,31.1175,75.9419Zm42.62-43.285L44.494,66.3243,30.4009,54.0555,59.6441,20.3892a8.0736,8.0736,0,0,1,11.3925-.7887l1.9046,1.6582A8.0775,8.0775,0,0,1,73.7371,32.6569Z"/>
                                    </g>
                                </g>
                            </svg>
                        </button>

                        <div class="dropdown  keep-open" id="edit_shapes_btn">
                            <button class="main-tool main-tool-option " id="editShapes" data-toggle="dropdown"
                                    data-offset="-150"
                                    data-tippy-content="Update shapes">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96.671 96.671" fill="currentColor">
                                    <defs/>
                                    <g data-name="Layer 1">
                                        <path
                                            d="M0,12.3355v72A12.3355,12.3355,0,0,0,12.3355,96.671h72A12.3355,12.3355,0,0,0,96.671,84.3355v-72A12.3355,12.3355,0,0,0,84.3355,0h-72A12.3355,12.3355,0,0,0,0,12.3355ZM31.1175,75.9419a94.1917,94.1917,0,0,1-10.1508,3.1114l-.0163.0022a96.991,96.991,0,0,1,1.6922-10.4926,56.8232,56.8232,0,0,1,3.1159-9.251L39.8515,71.58A56.9914,56.9914,0,0,1,31.1175,75.9419Zm42.62-43.285L44.494,66.3243,30.4009,54.0555,59.6441,20.3892a8.0736,8.0736,0,0,1,11.3925-.7887l1.9046,1.6582A8.0775,8.0775,0,0,1,73.7371,32.6569Z"></path>
                                    </g>
                                </svg>
                            </button>
                            <div class="dropdown-menu  keep-open" aria-labelledby="editShapes">
                                @include('frontend.board.form.canvascontrols.shapecontrols')
                            </div>
                        </div>

                        {{--                        <button class="main-tool main-tool-option" id="editShapes"--}}
                        {{--                                onclick="showMenus('editShapeOprions')" data-tippy-content="Update shape">--}}
                        {{--                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96.671 96.671">--}}
                        {{--                                <g data-name="Layer 2">--}}
                        {{--                                    <g data-name="Layer 1">--}}
                        {{--                                        <path--}}
                        {{--                                            d="M0,12.3355v72A12.3355,12.3355,0,0,0,12.3355,96.671h72A12.3355,12.3355,0,0,0,96.671,84.3355v-72A12.3355,12.3355,0,0,0,84.3355,0h-72A12.3355,12.3355,0,0,0,0,12.3355ZM31.1175,75.9419a94.1917,94.1917,0,0,1-10.1508,3.1114l-.0163.0022a96.991,96.991,0,0,1,1.6922-10.4926,56.8232,56.8232,0,0,1,3.1159-9.251L39.8515,71.58A56.9914,56.9914,0,0,1,31.1175,75.9419Zm42.62-43.285L44.494,66.3243,30.4009,54.0555,59.6441,20.3892a8.0736,8.0736,0,0,1,11.3925-.7887l1.9046,1.6582A8.0775,8.0775,0,0,1,73.7371,32.6569Z"/>--}}
                        {{--                                    </g>--}}
                        {{--                                </g>--}}
                        {{--                            </svg>--}}
                        {{--                        </button>--}}
                        {{--                        <button class="main-tool main-tool-option" id="groupImage" onclick="showMenus('groupObject')">--}}
                        {{--                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200.9233 202.8815">--}}
                        {{--                                <g  data-name="Layer 2">--}}
                        {{--                                    <g  data-name="Layer 1">--}}
                        {{--                                        <path--}}
                        {{--                                            d="M140.7872,28.2992H129.6561V6.61h11.1311ZM86.1934,51.6078V7.1824A7.22,7.22,0,0,1,93.4114,0H157.12l23.2762,23.2406V86.9849a7.1978,7.1978,0,0,1-6.7508,7.1352c-2.2608-1.6444-4.5259-3.2264-6.79-4.77V58.0415a6.1,6.1,0,0,0-1.6227-4.08l-.0119-.0119c-.1311-.1313-.25-.2624-.3937-.3818a5.79,5.79,0,0,0-.501-.4177,7.6385,7.6385,0,0,0-4.6649-1.5508H106.9287a7.378,7.378,0,0,0-6.1265,3.1121A58.4214,58.4214,0,0,0,86.1934,51.6078ZM99.5556,25.2449a5.7558,5.7558,0,0,0,1.718,4.0326c.1313.131.2623.2626.4058.3818a7.7952,7.7952,0,0,0,5.0942,1.8371h36.8889c3.9609,0,7.2058-2.8154,7.2058-6.2515V4.2114H99.5556ZM69.3712,136.6292a3.972,3.972,0,0,0-3.3337-4.5188c-16.5451-2.4937-25.3039-12.9128-25.3835-13.0056a3.9679,3.9679,0,0,0-6.8312,1.196l-11.5,33.0348L1.953,165.36a3.9682,3.9682,0,1,0,4.0323,6.8357l21.6253-12.7625a3.97,3.97,0,0,0,1.7332-2.1136l9.9482-28.58a52.6331,52.6331,0,0,0,25.5606,11.2239A3.97,3.97,0,0,0,69.3712,136.6292Zm24.86-.47a3.9718,3.9718,0,0,1-3.3337,4.5188l-7.3972,1.1143L83.96,176.6a3.9723,3.9723,0,0,1-.4952,1.9675L71.209,200.8256a3.9678,3.9678,0,1,1-6.9506-3.8291l11.7479-21.34-.4909-37.22a3.97,3.97,0,0,1,3.378-3.9794l10.8194-1.6315A3.9965,3.9965,0,0,1,94.2314,136.16Zm80.69-22.6978c21.371,13.7157,34.5983,20.6787,17.9606,4.82C163,89.7976,124.9727,71.7288,107.0192,64.1847a12.8766,12.8766,0,0,0-2.047-1.1364c-1.7012-.732-3.62-1.46-5.631-2.155-.1269-.0625-.2142-.1051-.2142-.1051l.0664.0586A50.202,50.202,0,0,0,83.27,57.8023a23.2039,23.2039,0,0,0-13.9912,4.1323c-4.817,3.5258-3.05,14.8519-4.0764,13.3921.4529-1.0986-2.4848-5.7931-3.54-7.0658C54.7863,59.96,41.0675,58.3,31.4439,64.326c-.2946.1848-.5158.4212-.7977.6162a1.72,1.72,0,0,0-.0547-.5743c-.5495-1.7912-3.9576-2.334-7.6127-1.2124s-6.17,3.4835-5.62,5.2748,3.9576,2.3344,7.6127,1.2122c.37-.1138.7206-.2483,1.0653-.3857C20.8143,75.86,19.892,84.7626,21.0576,91.2362c.1455.81,1.82,9.0793,9.5654,13.4291a20.3047,20.3047,0,0,0,15.4036,7.3414,20.3172,20.3172,0,0,0,15.5526-7.5373c.4146,7.0984-2.3963,9.4285,2.3183,14.8816a19.8665,19.8665,0,0,0,7.8911,5.6633,12.8751,12.8751,0,0,0,4.8088.93c1.6068,0,6.4027.3022,8.0358.2646a92.4781,92.4781,0,0,0,11.2906-1.225l6.0048,5.3969c8.5022,8.895,11.5261,10.8153,21.6795,18.6446l5.3468,3.9956h0c7.351,5.3118,14.15,9.4416,19.2842,11.3984a8.886,8.886,0,0,0,3.0422.6706,2.68,2.68,0,0,0,2.72-1.6718c2.1314-5.1273,5.0424-11.8827,4.6394-23.5579l-.5122-6.3959c-.0315-.2512-.0734-.5155-.1118-.7737h2.5522l12.0317,41.274a3.9639,3.9639,0,0,0,2.7188,2.7037l16.434,4.7023a3.9285,3.9285,0,0,0,1.0922.1547,3.97,3.97,0,0,0,1.0922-7.7859l-14.33-4.101-12.2516-42.03a3.9713,3.9713,0,0,0-3.811-2.8586h-7.2937c-1.5288-5.4962-3.3488-10.3283-3.3488-10.3283l-6.46-11.8511-.5064-1.0622c34.0069,29.0236,70.4648,58.5884,48.12,32.0216A233.4015,233.4015,0,0,0,174.9212,113.4617ZM59.2749,94.4193c-1.97,6.01-7.1318,10.33-13.2507,10.33-7.81,0-14.1425-6.9979-14.1425-15.63s6.332-15.63,14.1425-15.63c7.7327,0,13.9935,6.8652,14.1193,15.3783A21.0094,21.0094,0,0,1,59.2749,94.4193Z"/>--}}
                        {{--                                    </g>--}}
                        {{--                                </g>--}}
                        {{--                            </svg>--}}
                        {{--                        </button>--}}

                        {{--                       Opacity dropdown--}}
                        <div class="dropdown">
                            <button class="main-tool main-tool-option board-tool" id="opacity_button"
                                    data-toggle="dropdown"
                                    data-offset="-150"
                                    data-tippy-content="Opacity">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 89.7885 89.8152"
                                     fill="currentColor">
                                    <defs/>
                                    <g data-name="Layer 2">
                                        <g data-name="Layer 1">
                                            <path
                                                d="M35.9382,0V17.9084H18.03V0Zm.0608,17.9084V35.8167H53.9074V17.9084ZM18.03,35.8167V53.7251H35.9382V35.8167ZM35.999,53.9074V71.8157H53.9074V53.9074ZM0,18V35.9079H17.9084V18ZM0,53.8162V71.7246H17.9084V53.8162ZM18.03,71.9069V89.8152H35.9382V71.9069Zm35.7863,0V89.8152H71.7246V71.9069ZM53.8162,0V17.9084H71.7246V0ZM71.7246,17.9084V35.8167H89.633V17.9084ZM53.8162,35.8167V53.7251H71.7246V35.8167ZM71.88,53.8807V71.789H89.7885V53.8807Z"/>
                                        </g>
                                    </g>
                                </svg>
                            </button>
                            {{--                            Opacity controls --}}
                            <div class="dropdown-menu" aria-labelledby="opacity_button">
                                @include('frontend.board.form.canvascontrols.opacity')
                            </div>
                        </div>

                        {{--Arrange/reorder dropdown--}}
                        <div class="dropdown">
                            <button class="main-tool main-tool-option board-tool" id="arrange_button"
                                    data-toggle="dropdown"
                                    data-offset="-150"
                                    data-tippy-content="Arrange/Order">

                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 175.49 175.07"
                                     fill="currentColor">
                                    <g data-name="Layer 2">
                                        <g data-name="Layer 1">
                                            <path
                                                d="M175.49,67a67,67,0,0,0-134,0c0,1.07,0,2.13.08,3.19L0,76.54l39.86,40.85-9.41,57.68,49.27-27.23L129,175.07l-6.92-42.45A67,67,0,0,0,175.49,67ZM82.14,143.46l-2.42-1.34-2.42,1.34L37.05,165.71l7.75-47.52.4-2.49-1.76-1.8L10.38,80,42,75.18l13.85-2.11,2.64-.41,1.13-2.41L79.72,27.41,99.83,70.25,101,72.66l2.64.41L149.06,80,116,113.9l-1.76,1.8.4,2.49,2.49,15.26,5.26,32.26Z"/>
                                        </g>
                                    </g>
                                </svg>
                            </button>
                            {{--                            Opacity controls --}}
                            <div class="dropdown-menu" aria-labelledby="arrange_button">
                                @include('frontend.board.form.canvascontrols.arrange')
                            </div>
                        </div>


                        {{--                        Alignment--}}
                        <div class="dropdown board-tool">
                            <button class="main-tool main-tool-option board-tool" id="alignItems" data-toggle="dropdown"
                                    data-offset="-50"
                                    {{--                                onclick="showMenus('board-top-tool-align')"--}}
                                    data-tippy-content="Align/Distribute">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 71.36 104.59">
                                    <g data-name="Layer 2">
                                        <g data-name="Layer 1">
                                            <path
                                                d="M30,87.61H41.35V98.92a5.67,5.67,0,0,1-11.34,0ZM41.35,5.67A5.67,5.67,0,0,0,30,5.67V17.43H41.35Zm-35,11.76A6.35,6.35,0,0,0,0,23.76V81.28a6.35,6.35,0,0,0,6.32,6.33H30V17.43Zm58.72,0H41.35V87.61H65a6.35,6.35,0,0,0,6.32-6.33V23.76A6.35,6.35,0,0,0,65,17.43Z"/>

                                        </g>
                                    </g>
                                </svg>
                            </button>
                            <div class="dropdown-menu" aria-labelledby="alignItems">
                                @include('frontend.board.form.canvascontrols.alignment')
                            </div>
                        </div>

                        <div class="seperater"></div>
                        {{--                        Show and hide scale on the selected clipart--}}
                        <button class="mini-tool main-tool-option " id="scaleObject" onclick="toggleScale()"
                                data-tippy-content="Show/hide scale">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 228.6774 180.1167">
                                <g data-name="Layer 2">
                                    <g data-name="Layer 1">
                                        <path
                                            d="M218.4048,180.1167H10.2726A10.2726,10.2726,0,0,1,0,169.8442H0a10.2726,10.2726,0,0,1,10.2726-10.2725H218.4048a10.2726,10.2726,0,0,1,10.2726,10.2725h0A10.2726,10.2726,0,0,1,218.4048,180.1167ZM58.2257,73.3013c2.5392,8.6341,8.9718,13.2052,18.7907,13.2052h.1166a9.8313,9.8313,0,0,0,9.67-9.0533l.2411-2.8127a9.67,9.67,0,0,0-3.8163-8.6658c-1.8108-1.32-2.6557-3.841-2.6557-8.2471V11.761a9.8985,9.8985,0,0,0-9.8985-9.8984H64.739a9.8984,9.8984,0,0,0-9.8984,9.8984V51.1255a18.4453,18.4453,0,0,1-.8472,5.5866c-1.692,4.2323-6.7714,9.1412-13.3735,9.1412-8.2952,0-12.5275-6.6021-12.5275-17.7753V11.761A9.8984,9.8984,0,0,0,18.194,1.8626H12.2593A9.8985,9.8985,0,0,0,2.3608,11.761V88.1986c0,7.2029.2367,14.938.7448,20.8993a9.8977,9.8977,0,0,0,9.8658,9.0646h3.3444a9.8846,9.8846,0,0,0,9.8773-10.5387c-.4519-6.5532-.64-14.1377-.64-19.5935V80.92a15.72,15.72,0,0,0,11.6814,4.9089A22.3655,22.3655,0,0,0,57.7186,73.3013Zm43.1669.1686A11.1741,11.1741,0,0,0,112.5667,84.644h2.7069A11.1741,11.1741,0,0,0,126.4476,73.47V36.3976a17.0752,17.0752,0,0,1,1.0155-6.4337c1.5237-4.2312,5.4172-9.3106,12.0192-9.3106,8.1258,0,11.8509,7.11,11.8509,17.6058V73.47A11.1741,11.1741,0,0,0,162.5073,84.644h2.7057A11.1741,11.1741,0,0,0,176.3871,73.47V36.2282a21.5386,21.5386,0,0,1,1.0155-6.602c1.6931-4.91,5.9254-8.9729,11.8509-8.9729,8.294,0,12.1875,6.9409,12.1875,18.96V73.47A11.1741,11.1741,0,0,0,212.6151,84.644h2.7068A11.1741,11.1741,0,0,0,226.496,73.47v-37.58C226.496,11.1732,214.4768,0,198.5641,0A29.869,29.869,0,0,0,182.82,4.064a37.0451,37.0451,0,0,0-10.6649,9.9872h-.3388C168.2613,5.4172,159.7967,0,149.1318,0c-14.22,0-21.4993,7.788-25.0539,13.0358H123.57l-.1248-1.1775A11.1741,11.1741,0,0,0,112.333,1.8626h0a11.172,11.172,0,0,0-11.1675,11.5182c.1356,4.5506.2271,9.5141.2271,14.8911Z"/>
                                    </g>
                                </g>
                            </svg>
                        </button>
                        {{--                        Group/ungroup objects--}}
                        <button class="mini-tool main-tool-option group" id="groupObjectButton" onclick="groupObjects()"
                                data-tippy-content="Group objects">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 176 211">
                                <defs/>
                                <g data-name="Layer 2">
                                    <path
                                        d="M111 72H65a65 65 0 00-24 5 46 46 0 0187-28 6 6 0 007 4l7-1a6 6 0 004-8v-1A65 65 0 0023 83l1 3a65 65 0 00-24 51v9a65 65 0 0065 65h46a65 65 0 0065-65v-9a65 65 0 00-65-65zm-17 73v28H81v-28a18 18 0 1113 0z"
                                        data-name="Layer 1"/>
                                </g>
                            </svg>
                        </button>
                        <button class="mini-tool main-tool-option ungroup" id="ungroupObjectButton"
                                onclick="unGroupObjects()"
                                data-tippy-content="Ungroup objects">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 175.5653 191.6816">
                                <g data-name="Layer 2">
                                    <g data-name="Layer 1">
                                        <path
                                            d="M152.3594,68.0093c.06-1.1046.0979-2.2151.0979-3.3347a64.6747,64.6747,0,0,0-129.3493,0q0,1.683.0856,3.3454A64.7351,64.7351,0,0,0,0,117.7251v9.073a64.8835,64.8835,0,0,0,64.8835,64.8835h45.7981a64.8836,64.8836,0,0,0,64.8837-64.8835v-9.073A64.7355,64.7355,0,0,0,152.3594,68.0093ZM94.1741,125.5922v27.88H81.3914v-27.88a17.8695,17.8695,0,1,1,12.7827,0Zm16.5075-72.7506H64.8835A64.756,64.756,0,0,0,42.8669,56.68a45.62,45.62,0,0,1,89.8311,0A64.7531,64.7531,0,0,0,110.6816,52.8416Z"/>
                                    </g>
                                </g>
                            </svg>
                        </button>
                        <button class="mini-tool main-tool-option" onclick="flip('x')"
                                data-tippy-content="Flip horizontal">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 280.71 257.24">
                                <g data-name="Layer 2">
                                    <g data-name="Layer 1">
                                        <path
                                            d="M277.12,132.9l-90.21,60.43a12,12,0,0,1-18.76-10V69a12.05,12.05,0,0,1,18.76-10l90.21,60.44A8.08,8.08,0,0,1,277.12,132.9ZM3.59,135.34,93.8,195.77a12,12,0,0,0,18.76-10V71.48a12.06,12.06,0,0,0-18.76-10L3.59,121.9A8.08,8.08,0,0,0,3.59,135.34ZM141.19,0h0A10.76,10.76,0,0,1,152,10.76V246.48a10.76,10.76,0,0,1-10.76,10.76h0a10.76,10.76,0,0,1-10.76-10.76V10.76A10.76,10.76,0,0,1,141.19,0Z"/>
                                    </g>
                                </g>
                            </svg>
                        </button>
                        <button class="mini-tool main-tool-option" onclick="flip('y')"
                                data-tippy-content="Flip vertical">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 257.24 280.71">
                                <g data-name="Layer 2">
                                    <g data-name="Layer 1">
                                        <path
                                            d="M132.9,3.59,193.33,93.8a12,12,0,0,1-10,18.76H69A12.05,12.05,0,0,1,59,93.8L119.46,3.59A8.08,8.08,0,0,1,132.9,3.59Zm2.44,273.53,60.43-90.21a12,12,0,0,0-10-18.76H71.48a12.06,12.06,0,0,0-10,18.76l60.44,90.21A8.08,8.08,0,0,0,135.34,277.12ZM0,139.52H0a10.76,10.76,0,0,1,10.76-10.76H246.48a10.76,10.76,0,0,1,10.76,10.76h0a10.76,10.76,0,0,1-10.76,10.76H10.76A10.76,10.76,0,0,1,0,139.52Z"/>
                                    </g>
                                </g>
                            </svg>
                        </button>
                    </div>
                    <button class="mini-tool" onclick="cloneSelected()" data-tippy-content="Clone">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 115.0501 123.6897">
                            <g data-name="Layer 2">
                                <g data-name="Layer 1">
                                    <path
                                        d="M81.5585,71.9418h-12.32v12.32A2.2179,2.2179,0,0,1,67.02,86.48H57.43a2.2179,2.2179,0,0,1-2.2177-2.2178v-12.32h-12.32a2.2177,2.2177,0,0,1-2.2178-2.2178V60.1335a2.2179,2.2179,0,0,1,2.2178-2.2177h12.32v-12.32A2.2178,2.2178,0,0,1,57.43,43.3779h9.59a2.2178,2.2178,0,0,1,2.2178,2.2178v12.32h12.32a2.2178,2.2178,0,0,1,2.2177,2.2177V69.724A2.2177,2.2177,0,0,1,81.5585,71.9418ZM24.06,8.9H96.5864A10.0032,10.0032,0,0,0,86.65,0H10A10.0036,10.0036,0,0,0,0,10V95.29a10.0034,10.0034,0,0,0,8.9,9.9366V24.06A15.1771,15.1771,0,0,1,24.06,8.9Zm90.7229,80.6834c-.0224.0454-.0466.0881-.0718.1323a2.5054,2.5054,0,0,1-.3959.5341L81.61,122.9547a2.5151,2.5151,0,0,1-.3828.3137c-.0444.03-.0936.0492-.14.0758a2.4745,2.4745,0,0,1-.2907.1541c-.063.0261-.13.0394-.1945.06a2.4611,2.4611,0,0,1-.2722.0817,2.4983,2.4983,0,0,1-.4753.0479l-.0151.0015H26.06A12.6741,12.6741,0,0,1,13.4,111.03V26.06A12.6741,12.6741,0,0,1,26.06,13.4h76.33a12.6742,12.6742,0,0,1,12.66,12.66V88.48a2.5061,2.5061,0,0,1-.0467.4641c-.0018.0094-.001.0191-.0029.0284A2.46,2.46,0,0,1,114.7828,89.5835ZM89.9,85.98h20.15V26.06a7.6687,7.6687,0,0,0-7.66-7.66H26.06a7.6683,7.6683,0,0,0-7.66,7.66v84.97a7.6682,7.6682,0,0,0,7.66,7.66H77.34V98.54A12.5746,12.5746,0,0,1,89.9,85.98Z"/>
                                </g>
                            </g>
                        </svg>
                    </button>
                    <button class="mini-tool" onclick="deleteSelected()" data-tippy-content="Delete (Del)">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 152.86 172.07">
                            <g data-name="Layer 2">
                                <g data-name="Layer 1">
                                    <path
                                        d="M98.88,11V0H54V11H0V26.41H7.26v130a15.71,15.71,0,0,0,15.68,15.68h107a15.7,15.7,0,0,0,15.67-15.68v-130h7.27V11ZM44.33,156.9H31.48v-123H44.33Zm38.56,0H70v-123H82.89Zm38.55,0H108.59v-123h12.85Z"/>
                                </g>
                            </g>
                        </svg>
                    </button>

                    {{--                    <div class="board-top-tool-section board-top-tool-border top_open_menu" style="display: none">--}}
                    {{--                        <div class="board-tool-layer">--}}
                    {{--                            <button class="main-tool">--}}
                    {{--                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 167.5838 167.5838">--}}
                    {{--                                    <g data-name="Layer 2">--}}
                    {{--                                        <g data-name="Layer 1">--}}
                    {{--                                            <path--}}
                    {{--                                                d="M161.9023,22.8172l-32.9556,41.95L111.2672,87.3485a35.0133,35.0133,0,0,0-9.8794-14.9458,35.1619,35.1619,0,0,0-15.6206-8.5639l19.3177-18.551L144.7188,7.0724c6.3069-6.9871,15.2788-9.1791,20-4.8474S168.2064,15.83,161.9023,22.8172ZM93.7732,80.9193c-9.1423-8.3777-21.9936-9.3172-30.3061-.1017C50.1387,95.605,54.61,111.6046,44.5356,127.0727c0,0,34.0328,4.1446,52.0761-15.7981C104.9216,102.0586,102.9182,89.2976,93.7732,80.9193Zm19.7241,24.0533a32.5318,32.5318,0,0,1-7.5706,14.827c-15.9889,17.6763-40.603,20.3141-53.8562,20.3141a78.73,78.73,0,0,1-9.0429-.45l-20.0107-2.5512,11.0006-16.9993c3.2682-5.02,4.505-10.4852,5.9385-16.8136,2.0641-9.0817,4.62-20.3843,14.1951-31.01A32.0754,32.0754,0,0,1,68.08,63.31l28.32-27.2029,1.3209-1.274h-31.87A65.8519,65.8519,0,0,0,0,100.6854v1.0465a65.8519,65.8519,0,0,0,65.8519,65.8519h0a65.8519,65.8519,0,0,0,65.8519-65.8519V81.7126ZM93.7732,80.9193c-9.1423-8.3777-21.9936-9.3172-30.3061-.1017C50.1387,95.605,54.61,111.6046,44.5356,127.0727c0,0,34.0328,4.1446,52.0761-15.7981C104.9216,102.0586,102.9182,89.2976,93.7732,80.9193Z"/>--}}
                    {{--                                        </g>--}}
                    {{--                                    </g>--}}
                    {{--                                </svg>--}}
                    {{--                            </button>--}}
                    {{--                            <div class="board-tool-shape-options">--}}
                    {{--                                <div class=board-tool-shape>--}}
                    {{--                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 175.84 175.07">--}}
                    {{--                                        <g data-name="Layer 2">--}}
                    {{--                                            <g data-name="Layer 1">--}}
                    {{--                                                <path--}}
                    {{--                                                    d="M175.84,51.1,129.62,44,109,0,90,40.37a59,59,0,0,0-11.9-1.21A58.34,58.34,0,0,0,42.78,51l-.71.11.24.25A58.86,58.86,0,0,0,25.52,71.82h-15A10.53,10.53,0,0,0,0,82.32v82.25a10.53,10.53,0,0,0,10.5,10.5H92.76a10.53,10.53,0,0,0,10.5-10.5V150.76A58.89,58.89,0,0,0,131,123.11l19.29,10.66-7.89-48.4ZM133,118.48a58.68,58.68,0,0,0-38-76.86l14-29.85,16.14,34.39,1.14,2.41,2.64.41,36.59,5.59L138.82,81.88l-1.77,1.81.41,2.49,6.24,38.23Zm-6.38,2.19a53.85,53.85,0,0,1-23.33,24.46V82.32a10.53,10.53,0,0,0-10.5-10.5H31.19A53.94,53.94,0,0,1,45.85,55c.67-.5,1.36-1,2.06-1.47.5-.35,1-.68,1.51-1A51.74,51.74,0,0,1,55.89,49,53.24,53.24,0,0,1,78.1,44.16a53.11,53.11,0,0,1,12.22,1.41c.83.19,1.66.41,2.47.64A53.62,53.62,0,0,1,128.53,116c-.28.8-.59,1.58-.91,2.35S127,119.92,126.59,120.67Z"/>--}}
                    {{--                                            </g>--}}
                    {{--                                        </g>--}}
                    {{--                                    </svg>--}}
                    {{--                                </div>--}}
                    {{--                                <div class="shape-seperater"></div>--}}
                    {{--                                <div class=board-tool-shape>--}}
                    {{--                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 174.55 174.3">--}}
                    {{--                                        <g data-name="Layer 2">--}}
                    {{--                                            <g data-name="Layer 1">--}}
                    {{--                                                <path--}}
                    {{--                                                    d="M164.05,0H81.8A10.52,10.52,0,0,0,71.3,10.5V25A58.64,58.64,0,0,0,38.05,77.87c0,1.47.05,2.93.16,4.38L0,88.08l34.88,35.75L26.64,174.3l43.11-23.83,43.11,23.83-6.3-38.64a58.67,58.67,0,0,0,43-32.41h14.51a10.52,10.52,0,0,0,10.5-10.5V10.5A10.52,10.52,0,0,0,164.05,0ZM143.91,103.25a53.76,53.76,0,0,1-38.16,27.48l-1.12-6.9,20.08-20.58,2.05-2.1,2-2.09,10.71-11-48.2-7.36L75.49,47,73.4,42.57l-2.1-4.48-1.55-3.3L48.2,80.72l-5,.77c-.09-1.2-.13-2.4-.13-3.62A53.65,53.65,0,0,1,71.3,30.64c.69-.38,1.39-.73,2.1-1.08s1.39-.65,2.09-.95a53.63,53.63,0,0,1,70.45,70.45c-.3.7-.62,1.4-.95,2.09S144.29,102.56,143.91,103.25ZM72.17,146.1l-2.42-1.34-2.42,1.34-34.1,18.84,6.58-40.31.41-2.49-1.77-1.8L10.37,91.55,38.8,87.21l2.47-.38,2.47-.37,5.21-.8,2.64-.4,1.13-2.42,17-36.28,1.55,3.3,2.1,4.48,2.09,4.45L86.78,82.84l1.13,2.42,2.64.4,38.58,5.89-7.32,7.51-2,2.09-2,2.1-16.67,17.09-1.76,1.8.4,2.49,1.1,6.71.4,2.48.4,2.47,4.68,28.65Z"/>--}}
                    {{--                                            </g>--}}
                    {{--                                        </g>--}}
                    {{--                                    </svg>--}}
                    {{--                                </div>--}}
                    {{--                                <div class="shape-seperater"></div>--}}
                    {{--                                <div class=board-tool-shape>--}}
                    {{--                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 181.14 175.07">--}}
                    {{--                                        <g data-name="Layer 2">--}}
                    {{--                                            <g data-name="Layer 1">--}}
                    {{--                                                <path--}}
                    {{--                                                    d="M141.38,101.52l39.76-40.76-54.95-8.4L101.61,0l-20,42.68a67,67,0,1,0,42,101.34l27.23,15ZM86.5,44l15.11-32.19,20,42.72,1.13,2.41,2.64.41,45.34,6.92L137.8,98,136,99.83l.4,2.49,7.73,47.4-18.1-10A67,67,0,0,0,86.5,44Z"/>--}}
                    {{--                                            </g>--}}
                    {{--                                        </g>--}}
                    {{--                                    </svg>--}}
                    {{--                                </div>--}}
                    {{--                                <div class=board-tool-shape>--}}
                    {{--                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 175.49 175.07">--}}
                    {{--                                        <g data-name="Layer 2">--}}
                    {{--                                            <g data-name="Layer 1">--}}
                    {{--                                                <path--}}
                    {{--                                                    d="M175.49,67a67,67,0,0,0-134,0c0,1.07,0,2.13.08,3.19L0,76.54l39.86,40.85-9.41,57.68,49.27-27.23L129,175.07l-6.92-42.45A67,67,0,0,0,175.49,67ZM82.14,143.46l-2.42-1.34-2.42,1.34L37.05,165.71l7.75-47.52.4-2.49-1.76-1.8L10.38,80,42,75.18l13.85-2.11,2.64-.41,1.13-2.41L79.72,27.41,99.83,70.25,101,72.66l2.64.41L149.06,80,116,113.9l-1.76,1.8.4,2.49,2.49,15.26,5.26,32.26Z"/>--}}
                    {{--                                            </g>--}}
                    {{--                                        </g>--}}
                    {{--                                    </svg>--}}
                    {{--                                </div>--}}
                    {{--                                <div class=board-tool-shape>--}}
                    {{--                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 181.14 175.07">--}}
                    {{--                                        <g data-name="Layer 2">--}}
                    {{--                                            <g data-name="Layer 1">--}}
                    {{--                                                <path--}}
                    {{--                                                    d="M141.38,101.52l39.76-40.76-54.95-8.4L101.61,0l-20,42.68a67,67,0,1,0,42,101.34l27.23,15ZM86.5,44l15.11-32.19,20,42.72,1.13,2.41,2.64.41,45.34,6.92L137.8,98,136,99.83l.4,2.49,7.73,47.4-18.1-10A67,67,0,0,0,86.5,44Z"/>--}}
                    {{--                                            </g>--}}
                    {{--                                        </g>--}}
                    {{--                                    </svg>--}}
                    {{--                                </div>--}}
                    {{--                                <div class=board-tool-shape>--}}
                    {{--                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 175.49 175.07">--}}
                    {{--                                        <g data-name="Layer 2">--}}
                    {{--                                            <g data-name="Layer 1">--}}
                    {{--                                                <path--}}
                    {{--                                                    d="M175.49,67a67,67,0,0,0-134,0c0,1.07,0,2.13.08,3.19L0,76.54l39.86,40.85-9.41,57.68,49.27-27.23L129,175.07l-6.92-42.45A67,67,0,0,0,175.49,67ZM82.14,143.46l-2.42-1.34-2.42,1.34L37.05,165.71l7.75-47.52.4-2.49-1.76-1.8L10.38,80,42,75.18l13.85-2.11,2.64-.41,1.13-2.41L79.72,27.41,99.83,70.25,101,72.66l2.64.41L149.06,80,116,113.9l-1.76,1.8.4,2.49,2.49,15.26,5.26,32.26Z"/>--}}
                    {{--                                            </g>--}}
                    {{--                                        </g>--}}
                    {{--                                    </svg>--}}
                    {{--                                </div>--}}
                    {{--                            </div>--}}
                    {{--                            <h6 class="save-heading">Border Width</h6>--}}
                    {{--                            <div class="opacity">--}}
                    {{--                                <input id="" class="range-slider_range" type="range" value="20" min="9" max="60">--}}
                    {{--                                <span id="" class="range-slider_vaue">50%</span>--}}
                    {{--                            </div>--}}
                    {{--                        </div>--}}
                    {{--                    </div>--}}

                </div>

            </div>
            <div class="board-section">
                {{--                Left hand side buttons--}}
                <div class="left-buttons">
                    {{--                    Clipart--}}
                    {{--                    <div class="dropright">--}}
                    <button class="main-tool left_menu modal-tool" data-tippy-content="Add Graphics et al element"
                            data-tippy-placement="right"
                            {{--                                data-toggle="dropdown" --}}
                            onclick="showMenus('clipartsPannel')"

                            id="clipart_dropdown_but"

                    >
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 98.34 101.85">
                            <g data-name="Layer 2">
                                <g data-name="Layer 1">
                                    <path
                                        d="M30.69,72.08a24.92,24.92,0,0,1-12.1-5.32L13.88,80.29a1.84,1.84,0,0,1-.82,1l-10.23,6a1.94,1.94,0,0,1-1,.26,1.88,1.88,0,0,1-1-3.5l9.64-5.69L16,62.77a1.9,1.9,0,0,1,1.45-1.23,1.87,1.87,0,0,1,1.79.67,20.45,20.45,0,0,0,12,6.15,1.88,1.88,0,0,1-.56,3.72ZM42.45,68.7l-5.12.77a1.88,1.88,0,0,0-1.6,1.88L36,89,30.4,99.06a1.88,1.88,0,1,0,3.29,1.81l5.8-10.53a1.87,1.87,0,0,0,.24-.93l-.22-16.47,3.5-.53a1.88,1.88,0,1,0-.56-3.71ZM91.82,69c10.57,12.57-6.68-1.42-22.77-15.15l.24.5L72.35,60s.86,2.29,1.58,4.89h3.45a1.89,1.89,0,0,1,1.81,1.35L85,86.12l6.78,1.94a1.88,1.88,0,0,1-1,3.61L83,89.44a1.87,1.87,0,0,1-1.28-1.28L76,68.63H74.77c0,.13,0,.25,0,.37l.24,3a23.72,23.72,0,0,1-2.19,11.14,1.26,1.26,0,0,1-1.29.79,4.2,4.2,0,0,1-1.44-.31A44.18,44.18,0,0,1,61,78.25h0l-2.53-1.89c-4.81-3.7-6.24-4.61-10.26-8.82L45.39,65a45.68,45.68,0,0,1-5.34.58c-.78,0-3-.13-3.81-.13A6,6,0,0,1,34,65a9.46,9.46,0,0,1-3.74-2.68c-2.23-2.58-.9-3.68-1.09-7a9.61,9.61,0,0,1-7.36,3.57,9.61,9.61,0,0,1-7.29-3.48A9.66,9.66,0,0,1,10,49a13.45,13.45,0,0,1,2.36-10.4c-.16.06-.33.13-.5.18-1.73.53-3.35.28-3.61-.57s.93-2,2.66-2.5,3.34-.27,3.6.58a.8.8,0,0,1,0,.27c.13-.09.24-.21.38-.29,4.55-2.85,11-2.07,14.3,1.86.5.6,1.89,2.82,1.67,3.34.49.69-.35-4.67,1.93-6.33a11,11,0,0,1,6.62-2,23.74,23.74,0,0,1,7.53,1.44l0,0,.1,0c1,.33,1.86.68,2.67,1a7.06,7.06,0,0,1,1,.54c8.49,3.57,26.49,12.12,40.62,25.6,7.88,7.5,1.62,4.21-8.49-2.28A110.16,110.16,0,0,1,91.82,69ZM28.46,47.9c-.06-4-3-7.28-6.68-7.28s-6.69,3.31-6.69,7.4,3,7.39,6.69,7.39a6.76,6.76,0,0,0,6.27-4.88A10.26,10.26,0,0,0,28.46,47.9ZM82.05,16.29V0H68.11V16.29H51.82V30.22H68.11v9.44c3.67,2,7.6,4.24,11.59,6.85h2.35V30.22H98.34V16.29Z"/>
                                </g>
                            </g>
                        </svg>
                    </button>
                    {{--                            Clipart dropdown form controls --}}
                    {{--                        <div class="dropdown-menu side-container keep-open" id="clipart_dropdown_menu"--}}
                    {{--                             aria-labelledby="clipart_dropdown_but">--}}
                    {{--                            @include('frontend.board.form.newelement')--}}
                    {{--                        </div>--}}
                    {{--                    </div>--}}
                    {{--Charts--}}
                    <button class="main-tool left_menu modal-tool" data-tippy-content="Insert Chart"
                            id="charts_dropdown_but"
                            data-tippy-placement="right"
                            onclick="showMenus('chartartsPannel')"
                    >
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 109.13 109.13">
                            <g data-name="Layer 2">
                                <g data-name="Layer 1">
                                    <path
                                        d="M109.13,109.13H0v-11H109.13ZM0,0V89.88H14.88V20.05H33.17V89.88H45.42V42.55H63.71V89.88H76V61.35H94.25V89.88h14.88V0Z"/>
                                </g>
                            </g>
                        </svg>
                    </button>


                    <button class="main-tool left_menu modal-tool" data-tippy-content="Import from device"
                            data-tippy-placement="right" onclick="showMenus('imagesPannel')">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 104.55 96.06">
                            <g data-name="Layer 2">
                                <g data-name="Layer 1">
                                    <path
                                        d="M52.27,36.82A16.92,16.92,0,1,0,69.19,53.74,16.94,16.94,0,0,0,52.27,36.82Z"/>
                                    <path
                                        d="M91.16,13.88H77L74,4c-.66-2.18-2.77-4-4.69-4H35.21c-1.91,0-4,1.79-4.68,4l-3,9.91h-3.1V5.2H15.48v8.68h-2.1A13.38,13.38,0,0,0,0,27.27V82.68A13.38,13.38,0,0,0,13.38,96.06H91.16a13.38,13.38,0,0,0,13.39-13.38V27.27A13.38,13.38,0,0,0,91.16,13.88ZM36.36,5.2H45.3v8.93H36.36ZM52.27,79.09A25.35,25.35,0,1,1,77.62,53.74,25.38,25.38,0,0,1,52.27,79.09Z"/>
                                </g>
                            </g>
                        </svg>
                    </button>
                    <button class="main-tool left_menu modal-tool" data-tippy-content="Insert Shapes"
                            data-tippy-placement="right"
                            onclick="showMenus('shapesPannel')">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 139.74 126.99">
                            <g data-name="Layer 2">
                                <g data-name="Layer 1">
                                    <path
                                        d="M139.74,80a47,47,0,0,1-93.23,8.54h60.34L76.47,35.89A46.9,46.9,0,0,1,139.74,80Zm-93-80L0,80.94H93.46Z"/>
                                </g>
                            </g>
                        </svg>
                    </button>
                    <button class="main-tool left_menu modal-tool" data-tippy-content="Insert background"
                            data-tippy-placement="right" onclick="showMenus('backgroundsPannel')">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 114 114">
                            <defs/>
                            <g data-name="Layer 2">
                                <g data-name="Layer 1">
                                    <path fill="none"
                                          d="M105 10a24 24 0 01-21 24 22 22 0 010 3 21 21 0 0121 16H14a13 13 0 0111-8h1a13 13 0 0115-8 22 22 0 0117-21 24 24 0 011-13H3v71c6-6 14-12 25-14 9-1 18 0 38 8l7 3a350 350 0 0138 19v-5a356 356 0 00-33-16 44 44 0 0122-4 42 42 0 0111 3V3h-7a24 24 0 011 7z"/>
                                    <path
                                        d="M100 0a21 21 0 01-16 31 21 21 0 01-2 0A21 21 0 0163 0H0v114h114V0zm11 68a42 42 0 00-11-3 44 44 0 00-22 4 356 356 0 0133 16v5a350 350 0 00-38-19l-7-3c-20-8-29-9-38-8-11 2-19 8-25 14V3h56a24 24 0 00-1 13 22 22 0 00-17 21 13 13 0 00-15 8h-1a13 13 0 00-11 8h91a21 21 0 00-21-16 22 22 0 000-3 24 24 0 0020-31h7z"/>
                                </g>
                            </g>
                        </svg>

                    </button>
                    <button class="mini-tool left_menu board-tool" data-tippy-content="Insert text"
                            data-tippy-placement="right"
                            data-role="text" onclick="enableTexts()">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144.56 127.61">
                            <g data-name="Layer 2">
                                <g data-name="Layer 1">
                                    <path
                                        d="M93,41.84l6.13,31h-18l-.79-4.36Zm7.64,75.24,3.91-.34a8.54,8.54,0,0,0,3.13-.76L103,92.41H69.63L67,98.12H85.89l5.37,29.49h8Zm-75.95.08.73-.09L34.8,98.12h7.52L51.4,79.56H44.09l28-56.07,1.84,10.05L86.31,8.23,84.72.16H66L0,127.61H20.16L24.43,119Zm119.9,5.65-.55,4.51H104.32l.54-4.44a10.25,10.25,0,0,0,6.31-2.34A9.51,9.51,0,0,0,114,115a36.77,36.77,0,0,0,0-9.32c-.25-2.38-.61-4.93-1.09-7.71L111,86.25H66.83l-4.18,8.92a63.93,63.93,0,0,0-4.19,10.73,22.47,22.47,0,0,0-.86,7.95c.54,5,4,8.07,10.35,9l-.55,4.44h-39l.56-4.51a10.81,10.81,0,0,0,5.33-2.26,25,25,0,0,0,4.94-5.7,132.18,132.18,0,0,0,6.9-12.68L96.1,0h14.29l20.83,102.83s1.77,8.65,2.88,11.36a15.36,15.36,0,0,0,4,6.07A12.12,12.12,0,0,0,144.56,122.81ZM110,79,98,19.2,69.62,79Z"/>
                                </g>
                            </g>
                        </svg>
                    </button>
                    <div class="seperater"></div>
                    <button class="mini-tool board-tool" data-tippy-content="Save duplicate"
                            data-tippy-placement="right"
                            onclick="saveDuplicate()">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 115.99 113.17">
                            <g data-name="Layer 2">
                                <g data-name="Layer 1">
                                    <path
                                        d="M92.34,27.65H74.87V10.09H92.34ZM116,29.79v83.38H14V83.38H0V0H102V29.79Zm-3,3H17v77.38h96ZM3,80.38H14V73.29H9.68V10.09H70v19.7H99V3H3ZM100.52,63H88.84V79.85h17.47V63h-5.79Zm0-23.15H88.84V57.44h17.47V39.88h-5.79ZM88.84,103.09h17.47V85.45H88.84ZM70,39.88H23.64v63.21H84V39.88H70Z"/>
                                </g>
                            </g>
                        </svg>
                    </button>
                    <button class="mini-tool" data-tippy-content="Save" data-tippy-placement="right" onclick="save()">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 78.96 78.93">
                            <g data-name="Layer 2">
                                <g data-name="Layer 1">
                                    <path
                                        d="M59.45,0H6.05A6.05,6.05,0,0,0,0,6V72.91a6.05,6.05,0,0,0,6.05,6H72.91a6.05,6.05,0,0,0,6-6V19.48ZM11.2,3.53h43V21.16c0,2.88-2.72,5.24-6,5.24H17.25A6.53,6.53,0,0,1,13,24.86c-.12-.1-.23-.21-.34-.32a4.82,4.82,0,0,1-1.44-3.38Zm.15,45.12c0-3,2.71-5.4,6-5.4h44.2a6.4,6.4,0,0,1,3.91,1.3,4.87,4.87,0,0,1,.42.35c.12.1.22.21.33.32h0a5.11,5.11,0,0,1,1.36,3.42V75.27H11.35ZM45.76,5.54V23.72H36.43V5.54Z"/>
                                </g>
                            </g>
                        </svg>
                    </button>
                    <button class="main-tool left_menu modal-tool" data-tippy-content="Download"
                            data-tippy-placement="right"
                            onclick="showMenus('downloadPannel')">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 148.75 164.78">
                            <g data-name="Layer 2">
                                <g data-name="Layer 1">
                                    <path
                                        d="M145.88,66.36a10.57,10.57,0,0,0-7.94-3.51h-4.25c-.84-4.51-4.29-7.92-8.38-7.92H108.05l20.67-29.29H101.66V0h-26V25.64h-27l2,2.79s6.77,9.62,18.28,25.94c.12.19.25.37.39.56H51.35V50.54c0-5.51-3.84-10-8.55-10H8.55C3.87,40.53,0,45,0,50.54v101a11.27,11.27,0,0,0,1.32,5.32h0v0a10.46,10.46,0,0,0,8.58,7.72,10.08,10.08,0,0,0,1.75.15H128.42c6.27,0,11.88-5.29,12.52-11.79l7.74-77.73A11.51,11.51,0,0,0,145.88,66.36Zm-17.46,92.27H11.66a4.55,4.55,0,0,1-.76-.07c-2.48-.37-4.13-2.75-3.82-5.57l7.61-76.8.09-.92c.35-3.4,3.28-6.27,6.4-6.27H137.94a4.48,4.48,0,0,1,3.37,1.48,5.3,5.3,0,0,1,1.25,4.15l-7.74,77.76C134.49,155.77,131.56,158.63,128.42,158.63ZM79.23,3.54H98.12V29.18h23.77L105.54,52.36,98.12,62.85H79.24l-6.34-9-.11-.16c-.32-.43-.66-.89-1-1.37C63.93,41.18,58.27,33.14,55.49,29.18H79.23Z"/>
                                </g>
                            </g>
                        </svg>
                    </button>
                    <button class="main-tool left_menu modal-tool" data-tippy-content="Share"
                            data-tippy-placement="right"
                            onclick="showMenus('sharePannel')">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 141.44 140.87">
                            <g data-name="Layer 2">
                                <g data-name="Layer 1">
                                    <path
                                        d="M63.18,133.26a7.61,7.61,0,0,1-7.6,7.61H18.38A18.4,18.4,0,0,1,0,122.49V18.38A18.4,18.4,0,0,1,18.38,0h37.2a7.61,7.61,0,0,1,0,15.21H18.38a3.22,3.22,0,0,0-3.18,3.17V122.49a3.22,3.22,0,0,0,3.18,3.17h37.2A7.6,7.6,0,0,1,63.18,133.26Zm78.26-62.83a12.59,12.59,0,0,1-4,9.2l-34.72,32.62c-2.45,2.32-4.54,3-6.1,3a5.34,5.34,0,0,1-2.12-.43c-1.43-.62-3.83-2.44-3.83-7.73V97.31H38.48V43.56H90.67V33.82c0-5.29,2.4-7.11,3.83-7.73s4.39-1.1,8.22,2.53l34.71,32.62A12.55,12.55,0,0,1,141.44,70.43ZM99.29,108.62,134,76a7.55,7.55,0,0,0,0-11.12L99.29,32.26c-1.68-1.59-2.65-1.65-2.82-1.57s-.8.81-.8,3.13V48.56H43.48V92.31H95.67v14.74c0,2.32.63,3.06.8,3.13S97.61,110.2,99.29,108.62Z"/>
                                </g>
                            </g>
                        </svg>
                    </button>
                    <div class="seperater"></div>
                    <button class="main-tool left_menu modal-tool" onclick="showMenus('helpPannel')">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96.03 96.02">
                            <g data-name="Layer 2">
                                <g data-name="Layer 1">
                                    <path
                                        d="M48,0A48,48,0,1,0,96,48,48,48,0,0,0,48,0ZM45,82.28,36.47,73.8,45,65.31l8.49,8.49ZM65.73,32.76A16.93,16.93,0,0,1,63.89,37a34.73,34.73,0,0,1-3.25,4.45c-1.33,1.56-3.18,3.61-5.57,6.16A35.43,35.43,0,0,0,51.41,52a13.9,13.9,0,0,0-1.74,3.47,12.5,12.5,0,0,0-.53,3.8v.43h-8.6v-.53a13.25,13.25,0,0,1,.5-3.8,19.06,19.06,0,0,1,1.79-3.89C43.69,50,45,48,46.75,45.41a35.4,35.4,0,0,0,4.37-8.2,22.15,22.15,0,0,0,1.32-7.39,16.48,16.48,0,0,0-.89-6,5.74,5.74,0,0,0-2.29-3A6.45,6.45,0,0,0,46,20a6,6,0,0,0-5,2.24,13.12,13.12,0,0,0-2.37,6.46H29.74v-9A63.52,63.52,0,0,1,40,16a35.66,35.66,0,0,1,8.27-1,26.74,26.74,0,0,1,10.4,1.74,12.28,12.28,0,0,1,5.88,4.69A12.76,12.76,0,0,1,66.3,28.2,17.53,17.53,0,0,1,65.73,32.76Z"/>
                                </g>
                            </g>
                        </svg>
                    </button>
                    @if(auth()->user()->hasRole('administrator'))
                        <div class="seperater"></div>
                        <button class="main-tool left_menu" data-toggle="modal"
                                data-tippy-content="Send to user (admin)"
                                data-tippy-placement="right" data-target="#send_to_user">

                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 164 242">
                                <g data-name="Layer 2">
                                    <path
                                        d="M163 5a3 3 0 0 0-4-5L78 22 3 42a4 4 0 0 0 0 7l46 26 1 12a5 5 0 0 0 7 3l6-2 39 55a4 4 0 0 0 7-1Zm-20 6L58 66 19 45ZM72 80l78-62-44 110ZM58 242h-1a6 6 0 0 1 0-12h1a55 55 0 0 0 15-2 6 6 0 0 1 4 11 66 66 0 0 1-19 3Zm-25-6a6 6 0 0 1-3-1 51 51 0 0 1-15-13 6 6 0 0 1 10-8 39 39 0 0 0 11 11 6 6 0 0 1-3 11Zm63-9a6 6 0 0 1-4-10 31 31 0 0 0 7-11l1-2a6 6 0 0 1 11 3l-1 3a42 42 0 0 1-9 15 6 6 0 0 1-5 2ZM9 202a6 6 0 0 1-6-5 102 102 0 0 1-3-19 6 6 0 0 1 12-1 90 90 0 0 0 3 17 6 6 0 0 1-6 8Zm97-15a6 6 0 0 1-6-4 36 36 0 0 0-7-14 6 6 0 1 1 10-8 48 48 0 0 1 8 19 6 6 0 0 1-5 7Zm-47-19a6 6 0 0 1-3-11c5-3 12-7 20-8a6 6 0 0 1 1 12c-6 1-11 3-14 6a6 6 0 0 1-4 1Zm-52-9a6 6 0 0 1-6-7 85 85 0 0 1 6-19 6 6 0 1 1 11 5 73 73 0 0 0-5 16 6 6 0 0 1-6 5Zm19-38a6 6 0 0 1-5-10 101 101 0 0 1 14-13 6 6 0 0 1 8 9 89 89 0 0 0-12 12 6 6 0 0 1-5 2Z"
                                        data-name="Layer 1"/>
                                </g>
                            </svg>

                        </button>
                    @endif
                </div>
                <div class="canvas-board">
                    <div class="canvas-wrapper d-flex h-100">
                        <div class="canvas-layout ml-auto mr-auto">
                            <div class="canvas-content d-flex">
                                <canvas id="myCanvas" width="{{$board->width}}" height="{{$board->height}}"
                                ></canvas>
                            </div>
                        </div>
                    </div>
                    {{--                    Update board metadata form container--}}
                    <div class="board_mainmenu_container board-tool" style="display: none"
                         id="board_mainmenu_container">
                        <div class="board_mainmenu" style="z-index: 2000">
                            <div class="row">
                                <div class="col-4">
                                    {{--                    Update board metadata form--}}
                                    @include('frontend.board.form.metadata')

                                </div>
                                <div class="col-8">
                                    <div class="board_mainmenu_screen">
                                        <h6>Multiple pages management COMING SOON</h6>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    {{--                    Clipart panel--}}
                    <div class="board-tool-section graphic-tool-section board-tool" id="clipartsPannel"
                         style="display: none; width: initial"
                    >
                        @include('frontend.board.form.newelement')
                        {{--                        <div style="position: relative">--}}
                        {{--                            <button class="main-tool board-tool-btn" onclick="showMenus('clipartsPannel')">--}}
                        {{--                                <svg class="left-tool-close" xmlns="http://www.w3.org/2000/svg"--}}
                        {{--                                     viewBox="0 0 129.94 129.94">--}}
                        {{--                                    <g data-name="Layer 2">--}}
                        {{--                                        <g 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>--}}
                        {{--                                <svg class="left-tool-button" xmlns="http://www.w3.org/2000/svg"--}}
                        {{--                                     viewBox="0 0 139.74 126.99">--}}
                        {{--                                    <g data-name="Layer 2">--}}
                        {{--                                        <g data-name="Layer 1">--}}
                        {{--                                            <path--}}
                        {{--                                                d="M139.74,80a47,47,0,0,1-93.23,8.54h60.34L76.47,35.89A46.9,46.9,0,0,1,139.74,80Zm-93-80L0,80.94H93.46Z"/>--}}
                        {{--                                        </g>--}}
                        {{--                                    </g>--}}
                        {{--                                </svg>--}}
                        {{--                            </button>--}}
                        {{--                            <ul class="graphic-images shapes-lists" id="shapesList">--}}

                        {{--                                <li class="polygon_preview_div" data-sides="2" data-name="Line"--}}
                        {{--                                    data-description="A simple straight line with editable points">--}}
                        {{--                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000">--}}
                        {{--                                        <defs/>--}}
                        {{--                                        <path d="M520 520h450a20 20 0 000-40H30a20 20 0 000 40h490z"/>--}}
                        {{--                                    </svg>--}}
                        {{--                                </li>--}}
                        {{--                                <li class="polygon_preview_div" data-sides="3" data-name="Triangle"--}}
                        {{--                                    data-description="A 3 sided polygon with editable points">--}}
                        {{--                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">--}}
                        {{--                                        <defs/>--}}
                        {{--                                        <path fill="none" stroke="#000" stroke-width="2.5" d="M183 172H17l83-144z"/>--}}
                        {{--                                    </svg>--}}
                        {{--                                </li>--}}
                        {{--                                <li class="polygon_preview_div" data-sides="4" data-name="Square"--}}
                        {{--                                    data-description="A 4 sided polygon with editable points">--}}
                        {{--                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">--}}
                        {{--                                        <defs/>--}}
                        {{--                                        <path fill="none" stroke="#000" stroke-width="2.5" d="M168 168H32V32h136z"/>--}}
                        {{--                                    </svg>--}}
                        {{--                                </li>--}}
                        {{--                                <li class="polygon_preview_div" data-sides="5" data-name="Pentagon"--}}
                        {{--                                    data-description="A 5 sided polygon with editable points">--}}
                        {{--                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">--}}
                        {{--                                        <defs/>--}}
                        {{--                                        <path fill="none" stroke="#000" stroke-width="2.5"--}}
                        {{--                                              d="M156 187H44L9 80l91-67 91 67z"/>--}}
                        {{--                                    </svg>--}}
                        {{--                                </li>--}}
                        {{--                                <li class="polygon_preview_div" data-name="Pentagon" data-sides="6"--}}
                        {{--                                    data-description="A 6 sided polygon with editable points">--}}
                        {{--                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">--}}
                        {{--                                        <defs/>--}}
                        {{--                                        <path fill="none" stroke="#000" stroke-width="2.5"--}}
                        {{--                                              d="M148 183H52L4 100l48-83h96l48 83z"/>--}}
                        {{--                                    </svg>--}}
                        {{--                                </li>--}}
                        {{--                                <li class="polygon_preview_div" data-sides="7" data-name="Heptagon"--}}
                        {{--                                    data-description="A 7 sided polygon with editable points">--}}
                        {{--                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">--}}
                        {{--                                        <defs/>--}}
                        {{--                                        <path fill="none" stroke="#000" stroke-width="2.5"--}}
                        {{--                                              d="M142 191H58L6 126l19-81 75-36 75 36 19 81z"/>--}}
                        {{--                                    </svg>--}}
                        {{--                                </li>--}}
                        {{--                                <li class="polygon_preview_div" data-sides="8" data-name="Octagon"--}}
                        {{--                                    data-description="An 8 sided polygon with editable points">--}}
                        {{--                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">--}}
                        {{--                                        <defs/>--}}
                        {{--                                        <path fill="none" stroke="#000" stroke-width="2.5"--}}
                        {{--                                              d="M137 189H63l-52-52V63l52-52h74l52 52v74z"/>--}}
                        {{--                                    </svg>--}}
                        {{--                                </li>--}}
                        {{--                                <li class="polygon_preview_div" data-sides="9" data-name="Nonagon"--}}
                        {{--                                    data-description="A 9 sided polygon with editable points">--}}
                        {{--                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">--}}
                        {{--                                        <defs/>--}}
                        {{--                                        <path fill="none" stroke="#000" stroke-width="2.5"--}}
                        {{--                                              d="M133 193H67l-50-42L5 86l33-57 62-22 62 22 33 57-12 65z"/>--}}
                        {{--                                    </svg>--}}
                        {{--                                </li>--}}
                        {{--                                <li class="polygon_preview_div" data-sides="10" data-name="Dodecahedron"--}}
                        {{--                                    data-description="A 10 sided polygon with editable points">--}}
                        {{--                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">--}}
                        {{--                                        <defs/>--}}
                        {{--                                        <path fill="none" stroke="#000" stroke-width="2.5"--}}
                        {{--                                              d="M125 193H75l-43-25-25-43V75l25-43L75 7h50l43 25 25 43v50l-25 43z"/>--}}
                        {{--                                    </svg>--}}
                        {{--                                </li>--}}
                        {{--                            </ul>--}}
                        {{--                        </div>--}}
                    </div>

                    {{--                    Shapes panel--}}
                    @include('frontend.board.form.newshape')
                    {{--                    User images--}}
                    @include('frontend.board.form.imageupload')

                    {{--                                        CHart panel--}}
                    @include('frontend.board.form.chartelement')
                    {{--                    Background panel--}}
                    @include('frontend.board.form.background')
                    {{--                    Downloads
                    @TODO make this better--}}
                    @include('frontend.board.form.exports')
                    {{--                    Share--}}
                    <div class="board-tool-section share-tool-section board-tool" id="sharePannel"
                         style="display: none"
                    >
                        <div class="board-tool-wrapper">
                            <button class="main-tool board-tool-btn" onclick="showMenus('sharePannel')">
                                <svg class="left-tool-close" xmlns="http://www.w3.org/2000/svg"
                                     viewBox="0 0 129.94 129.94">
                                    <g data-name="Layer 2">
                                        <g 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>
                                <svg class="left-tool-button" xmlns="http://www.w3.org/2000/svg"
                                     viewBox="0 0 141.44 140.87">
                                    <g data-name="Layer 2">
                                        <g data-name="Layer 1">
                                            <path
                                                d="M63.18,133.26a7.61,7.61,0,0,1-7.6,7.61H18.38A18.4,18.4,0,0,1,0,122.49V18.38A18.4,18.4,0,0,1,18.38,0h37.2a7.61,7.61,0,0,1,0,15.21H18.38a3.22,3.22,0,0,0-3.18,3.17V122.49a3.22,3.22,0,0,0,3.18,3.17h37.2A7.6,7.6,0,0,1,63.18,133.26Zm78.26-62.83a12.59,12.59,0,0,1-4,9.2l-34.72,32.62c-2.45,2.32-4.54,3-6.1,3a5.34,5.34,0,0,1-2.12-.43c-1.43-.62-3.83-2.44-3.83-7.73V97.31H38.48V43.56H90.67V33.82c0-5.29,2.4-7.11,3.83-7.73s4.39-1.1,8.22,2.53l34.71,32.62A12.55,12.55,0,0,1,141.44,70.43ZM99.29,108.62,134,76a7.55,7.55,0,0,0,0-11.12L99.29,32.26c-1.68-1.59-2.65-1.65-2.82-1.57s-.8.81-.8,3.13V48.56H43.48V92.31H95.67v14.74c0,2.32.63,3.06.8,3.13S97.61,110.2,99.29,108.62Z"/>
                                        </g>
                                    </g>
                                </svg>
                            </button>
                            <h4 class="coming-soon-text">Coming Soon</h4>
                            <div class="share-section">
                                <div class="share-preview">
                                    <img src="" alt="" id="shareImagePreview" style="height:100%">
                                </div>
                                <h6 class="share-text">Share a JPG snapshot of your artboard</h6>
                                <input type="text" placeholder="Email Address" class="share-board-email"
                                       style="display: none">
                                <button class="request-send-btn" style="display: none">Submit</button>
                                {{--                                These don't work...--}}
                                <ul class="share-board-options" style="display: none">
                                    <li onclick="share('facebook')"><img
                                            src="{{ asset('img/frontend/icons/social/facebook.png') }}" alt=""></li>
                                    <li onclick="share('twitter')"><img
                                            src="{{ asset('img/frontend/icons/social/twitter.png') }}" alt=""></li>
                                    <li><img src="{{asset('img/frontend/icons/social/youtube.png')}}" alt=""></li>
                                    <li><img src="{{asset('img/frontend/icons/social/pinterest.png')}}" alt=""></li>
                                    <li><img src="{{asset('img/frontend/icons/social/tumbler.png')}}" alt=""></li>
                                    <li><img src="{{asset('img/frontend/icons/social/instagram.png')}}" alt=""></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    {{--                    Help panel--}}
                    <div class="board-tool-section search-tool-section board-tool" id="helpPannel"
                         style="display: none"
                    >
                        <div class="graphic-tool-section-content">
                            <button class="main-tool board-tool-btn" onclick="showMenus('helpPannel')">
                                <svg class="left-tool-close" xmlns="http://www.w3.org/2000/svg"
                                     viewBox="0 0 129.94 129.94">
                                    <g data-name="Layer 2">
                                        <g 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>
                                <svg class="left-tool-button" xmlns="http://www.w3.org/2000/svg"
                                     viewBox="0 0 96.03 96.02">
                                    <g data-name="Layer 2">
                                        <g data-name="Layer 1">
                                            <path
                                                d="M48,0A48,48,0,1,0,96,48,48,48,0,0,0,48,0ZM45,82.28,36.47,73.8,45,65.31l8.49,8.49ZM65.73,32.76A16.93,16.93,0,0,1,63.89,37a34.73,34.73,0,0,1-3.25,4.45c-1.33,1.56-3.18,3.61-5.57,6.16A35.43,35.43,0,0,0,51.41,52a13.9,13.9,0,0,0-1.74,3.47,12.5,12.5,0,0,0-.53,3.8v.43h-8.6v-.53a13.25,13.25,0,0,1,.5-3.8,19.06,19.06,0,0,1,1.79-3.89C43.69,50,45,48,46.75,45.41a35.4,35.4,0,0,0,4.37-8.2,22.15,22.15,0,0,0,1.32-7.39,16.48,16.48,0,0,0-.89-6,5.74,5.74,0,0,0-2.29-3A6.45,6.45,0,0,0,46,20a6,6,0,0,0-5,2.24,13.12,13.12,0,0,0-2.37,6.46H29.74v-9A63.52,63.52,0,0,1,40,16a35.66,35.66,0,0,1,8.27-1,26.74,26.74,0,0,1,10.4,1.74,12.28,12.28,0,0,1,5.88,4.69A12.76,12.76,0,0,1,66.3,28.2,17.53,17.53,0,0,1,65.73,32.76Z"></path>
                                        </g>
                                    </g>
                                </svg>
                            </button>
                            <h4 class="coming-soon-text">Coming Soon</h4>
                        </div>
                    </div>
                </div>
                {{--                    Help panel--}}

            </div>
        </div>
        {{--        <div class="multiple-page">--}}
        {{--            Multiple pages coming soon--}}
        {{--        </div>--}}
    </div>
    <!-- New Artboard design ends -->
    </div>


@endsection

@section('dialogs')

    {{--    @include('frontend.board.form.dialogs.contextual_controls')--}}

    {{--    @include('frontend.board.form.dialogs.new_clipart_modal')--}}

    {{--    @include('frontend.board.form.dialogs.new_chart_modal')--}}

    {{--    @include('frontend.board.form.dialogs.new_scatter_chart_modal')--}}

    {{--    @include('frontend.board.form.dialogs.new_text_modal')--}}

    {{--    @include('frontend.board.form.dialogs.new_image_modal')--}}

    {{--    @include('frontend.board.form.dialogs.new_shape_modal')--}}

    {{--    @include('frontend.board.form.dialogs.background_modal')--}}

    {{--    @include('frontend.board.form.dialogs.confirm_delete_user_image')--}}

    {{--    @include('frontend.board.form.dialogs.metadata_modal')--}}

    {{--    @include('frontend.board.form.dialogs.confirm_download')--}}

    {{--    --}}


    <div class="modal fade load-spinner" data-backdrop="static" data-keyboard="false" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <i style="color: #2aa8cc" class="fas fa-circle-notch fa-spin fa-3x mx-auto"></i>
            </div>
        </div>
    </div>

    <div class="popover" id="selected_content_popover">
        <div class="d-flex flex-column w-100">
            <div class="w-100 mb-1 selected_item_name"></div>
        </div>
    </div>


    <div id="loader_overlay" class="loader-wrapper">
        <span class="loader"><i style="color: #2aa8cc" class="fas fa-circle-notch fa-spin fa-3x mx-auto"></i><span
                id="loading_message"
                style="font-size: 2em; font-weight:bolder; color: #2aa8cc">Loading...</span></span>
    </div>

    @if(auth()->user()->hasRole('administrator'))
        <div id="send_to_user" class="modal fade" role="dialog">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">Send to user or lab</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">
                        {!! Form::open( ['class'=>'form-horizontal', 'role'=>'form', 'id'=>'send_to_form'])!!}
                        <div class="form-group row">
                            <div class="col-sm-12">
                                <label>User/s to send to</label>
                            </div>
                            <div class="col-sm-12">
                                <select name="user_ids[]" id="user_ids"
                                        class="userselect" multiple>
                                </select>
                            </div>
                            <div class="col-sm-12">
                                <label>Lab/s to send to</label>
                            </div>
                            <div class="col-sm-12">
                                <select name="lab_ids[]" id="lab_ids"
                                        class="labselect" multiple>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">

                            {!! Form::submit('Send', ['class'=>'btn btn-primary form-control', 'id'=>'sendtosubmitbut']) !!}
                        </div>
                        {!! Form::close() !!}
                    </div>
                </div>
            </div>
        </div>
    @endif

@endsection

@push('after-scripts')
    <!-- for creating zip file -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.5.0/jszip.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip-utils/0.1.0/jszip-utils.min.js"></script>
    <script
        src="https://cdn.rawgit.com/eligrey/FileSaver.js/5ed507ef8aa53d8ecfea96d96bc7214cd2476fd2/FileSaver.min.js"></script>

    <script>
        'use strict';
        //const baseurl = '{{URL::to('/')}}';
        //const ENABLE_HOVER_DELAY = 500;
        //let timer;

        $(document).on('click.bs.dropdown.data-api', '.keep-open', function (e) {
            e.stopPropagation();
        });

        $('.keep-open').on('hide.bs.dropdown', function (e) {
            if (e.clickEvent) {
                e.preventDefault();
            }
        })


        document.getElementById('clipartImages').addEventListener('scroll', function () {

            const bodyClassList = document.body.classList;
            // clear previous timeout function
            clearTimeout(timer);
            if (!bodyClassList.contains('disable-hover')) {
                // add the disable-hover class to the body element
                bodyClassList.add('disable-hover');
            }

            timer = setTimeout(function () {
                // remove the disable-hover class after a timeout of 500 millis
                bodyClassList.remove('disable-hover');
            }, ENABLE_HOVER_DELAY);

        }, false);

        //Sorting Hex Color:
        const colours = ["#000000", "#103000", "#002952", "#531014", "#2f1951", "#3a2b04", "#4c2205", "#630f47", "#49302a", "#8a1822", "#8e1b68", "#663b2a", "#216801", "#573581", "#17538f", "#9b3f12", "#895400", "#cc414a", "#9b664b", "#db3eab", "#808080", "#54a62f", "#906eba", "#508cc8", "#e56e1f", "#d3920f", "#ff8e97", "#d4a986", "#ffa655", "#ff8fea", "#f4c33b", "#c4c4c4", "#d3b2fe", "#98ea74", "#9dcffe", "#f9d8c5", "#ffe2ca", "#ffdcfa", "#ffe6ea", "#fff1b2", "#e3f1ff", "#dbffcb", "#f3eaff", "#ffffff"];

        // var Color = function Color(hexVal) { //define a Color class for the color objects
        //     this.hex = hexVal;
        // };
        //
        // const constructColor = (colorObj) => {
        //     var hex = colorObj.hex.substring(1);
        //     /* Get the RGB values to calculate the Hue. */
        //     var r = parseInt(hex.substring(0, 2), 16) / 255;
        //     var g = parseInt(hex.substring(2, 4), 16) / 255;
        //     var b = parseInt(hex.substring(4, 6), 16) / 255;
        //
        //     /* Getting the Max and Min values for Chroma. */
        //     var max = Math.max.apply(Math, [r, g, b]);
        //     var min = Math.min.apply(Math, [r, g, b]);
        //
        //
        //     /* Variables for HSV value of hex color. */
        //     var chr = max - min;
        //     var hue = 0;
        //     var val = max;
        //     var sat = 0;
        //
        //
        //     if (val > 0) {
        //         /* Calculate Saturation only if Value isn't 0. */
        //         sat = chr / val;
        //         if (sat > 0) {
        //             if (r == max) {
        //                 hue = 60 * (((g - min) - (b - min)) / chr);
        //                 if (hue < 0) {
        //                     hue += 360;
        //                 }
        //             } else if (g == max) {
        //                 hue = 120 + 60 * (((b - min) - (r - min)) / chr);
        //             } else if (b == max) {
        //                 hue = 240 + 60 * (((r - min) - (g - min)) / chr);
        //             }
        //         }
        //     }
        //     colorObj.chroma = chr;
        //     colorObj.hue = hue;
        //     colorObj.sat = sat;
        //     colorObj.val = val;
        //     colorObj.luma = 0.3 * r + 0.59 * g + 0.11 * b;
        //     colorObj.red = parseInt(hex.substring(0, 2), 16);
        //     colorObj.green = parseInt(hex.substring(2, 4), 16);
        //     colorObj.blue = parseInt(hex.substring(4, 6), 16);
        //     return colorObj;
        // };
        //
        // const sortColorsByLuma = (colors) => {
        //     return colors.sort(function (a, b) {
        //         return a.luma - b.luma;
        //     });
        // };
        //
        // const mapHex = (color) => {
        //     return color.hex;
        // }
        //
        // const outputColors = (hexArray) => {
        //     var colors = [];
        //     $.each(hexArray, function (i, v) {
        //         var color = new Color(v);
        //         constructColor(color);
        //         colors.push(color);
        //     });
        //
        //     sortColorsByLuma(colors);
        //
        //     console.log(colors.map(mapHex));
        // };
        //
        // outputColors(colours.reverse());
        // $('.toast').toast('show');
        /**
         * Item name is non-unique
         */
        fabric.Canvas.prototype.getItemsByAttr = function (attr, val) {
            var objectList = [];
            traverseObjects(this.getObjects(), attr, val, objectList);
            return objectList;
        };


        // the canvas
        var canvas;

        var canvas_height = {{ $board->height}};
        var canvas_width = {{$board->width}};
        var board_name = '{{$board->name}}'

        var currentClipartPage = 1;
        var currentClipartTags = [];
        var loading = false;
        var currentClipartArr = [];
        // initial point for a thing
        var currentPoint = new fabric.Point(50, 50)
        // a holder for a mouse location. Used to set the floating contextual toolbar position
        var mouseloc = null;

        const watermark_path = "{{ asset('img/frontend/watermark/watermark2.png') }}"

        var _clipboard;

        var currentDragOffset;
        var currentShapeDragOffset;

        // @TODO fix duplications
        const colourPickerOptions = {
            // strip the template down to the very basics
            //@TODO extend this to have more options
            template: '<div class="colorpicker">' +
                '<div class="colorpicker-bar"><button class="btn btn-ghost-secondary btn-sm btn-block" onclick="alert(\'TBD...\')">More...</button></div>' +
                '            <i class="colorpicker-guide"></i>' +
                '            </div>' +
                '            </div>',
            fallbackColor: '#337AB7',
            popover: {
                placement: 'right'
            },
            extensions: [
                {
                    name: 'swatches', // extension name to load
                    options: { // extension options
                        colors: {
                            "#000000": "#000000",
                            "#103000": "#103000",
                            "#002952": "#002952",
                            "#531014": "#531014",
                            "#2f1951": "#2f1951",
                            "#3a2b04": "#3a2b04",
                            "#4c2205": "#4c2205",
                            "#630f47": "#630f47",
                            "#49302a": "#49302a",
                            "#8a1822": "#8a1822",
                            "#8e1b68": "#8e1b68",
                            "#663b2a": "#663b2a",
                            "#216801": "#216801",
                            "#573581": "#573581",
                            "#17538f": "#17538f",
                            "#9b3f12": "#9b3f12",
                            "#895400": "#895400",
                            "#cc414a": "#cc414a",
                            "#9b664b": "#9b664b",
                            "#db3eab": "#db3eab",
                            "#808080": "#808080",
                            "#54a62f": "#54a62f",
                            "#906eba": "#906eba",
                            "#508cc8": "#508cc8",
                            "#e56e1f": "#e56e1f",
                            "#d3920f": "#d3920f",
                            "#ff8e97": "#ff8e97",
                            "#d4a986": "#d4a986",
                            "#ffa655": "#ffa655",
                            "#ff8fea": "#ff8fea",
                            "#f4c33b": "#f4c33b",
                            "#c4c4c4": "#c4c4c4",
                            "#d3b2fe": "#d3b2fe",
                            "#98ea74": "#98ea74",
                            "#9dcffe": "#9dcffe",
                            "#f9d8c5": "#f9d8c5",
                            "#ffe2ca": "#ffe2ca",
                            "#ffdcfa": "#ffdcfa",
                            "#ffe6ea": "#ffe6ea",
                            "#fff1b2": "#fff1b2",
                            "#e3f1ff": "#e3f1ff",
                            "#dbffcb": "#dbffcb",
                            "#f3eaff": "#f3eaff",
                            "#ffffff": "#ffffff"
                        },

                        namesAsValues: false
                    },

                }
            ]
        };

        ;

        var deleteKeyActive = true;

        var myRuler;

        var state;

        var canvas_ruler;

        // hide it
        //canvas_ruler.api.toggleRulerVisibility(false);
        $(document).ready(() => {


            //$("#loader_overlay").show();
            //wait(true)

            // restore zoom and ruler state
            @if($board->state)
                state = JSON.parse('{!! $board->state!!}')
            @endif

            // colourpickers

            // $("#background_colour").colorpicker(colourPickerOptions).change(updateBackgroundColour);

            // initialise things

            ////////////////////////////////////////////////
            //initialise core functionality
            ///////////////////////////////////////////////////
            initialiseCore()
            ////////////////////////////////////////////////
            //Load the chart javascripts
            ///////////////////////////////////////////////////
            initialiseChart();
            ////////////////////////////////////////////////
            //Load the clipart javascripts
            /////////////////////////////////////////////////
            initClipart()
            ////////////////////////////////////////////////
            //Load the shapes javascripts
            /////////////////////////////////////////////////
            initShapes();
            ////////////////////////////////////////////////
            //Load the user images javascripts
            /////////////////////////////////////////////////
            initUserImages();
            ////////////////////////////////////////////////
            //Load the texts javascripts
            /////////////////////////////////////////////////
            initTexts();
            ////////////////////////////////////////////////
            //Load the backgrouunds javascripts
            /////////////////////////////////////////////////
            initBackgrounds();

            //initAligningGuidelines(canvas);


            // binding delete key
            //@TODO work out all the little permutations that could cause issues here.
            // $('body').on('keydown', function (e) {
            //     if ((e.which == 46) && deleteKeyActive) {
            //         if (canvas.getActiveObjects().length > 0) {
            //             // implement this when ready
            //             // deleteSelected();
            //         }
            //     }
            // });

            // @TODO capturing navigation away from page, autosave maybe?
            // window.addEventListener("beforeunload", function (e) {
            //     var confirmationMessage = "\o/";
            //     e.returnValue = confirmationMessage;
            //     return confirmationMessage;
            // });

            //canvas.isDrawingMode = true;

            // restore state from database if there's data
            @if($has_data)
            //$("#loader_overlay").modal('show');
            $.getJSON('{{URL::to('board/'.$board->id.'/data')}}', function (data) {
                canvas.loadFromJSON(data, () => {
                    console.log('loaded')
                    canvas.renderAll.bind(canvas);
                    $("#loader_overlay").hide();
                    //console.log('zoom is:');
                    canvas.setZoom(0.3)
                    //console.log(canvas.getZoom())
                    restoreState();
                });
            }, function () {

            });
            @else
            $("#loader_overlay").hide();
            @endif

            @if(auth()->user()->hasRole('administrator'))
            // // select2 initialisation
            $('.templateselect').select2({
                placeholder: 'Template type...',
            });

            $('.userselect').select2({
                placeholder: 'Search by user name',
                minimumInputLength: 1,
                ajax: { // instead of writing the function to execute the request we use Select2's convenient helper
                    url: "{!! URL::to('')!!}/searchprofileforselect2private",

                    dataType: 'json',
                    quietMillis: 150,
                    data: function (term) {
                        return {
                            q: term, // search term
                        };
                    },

                    cache: true
                },
            });

            $('.labselect').select2({
                placeholder: 'Search by lab name',
                minimumInputLength: 1,
                ajax: { // instead of writing the function to execute the request we use Select2's convenient helper
                    url: "{!! URL::to('')!!}/searchlabforselect2",

                    dataType: 'json',
                    quietMillis: 150,
                    data: function (term) {
                        return {
                            q: term, // search term
                        };
                    },

                    cache: true
                },
            });


            $("#send_to_form").submit((event) => {
                $("#send_to_user").modal('hide');
                // cancels the form submission
                event.preventDefault();
                //waitingDialog.show();
                submitCopyForm();
            });

            @endif
            //hide menus when clicking outside
            $(".canvas-wrapper").click(function () {
//Hide the menus if visible
                showMenus();
            });

            // saving every 5 minutes
            setInterval(save, 300000, false)

            // $('.modal-tool, .board-tool>*').click(function(event){
            //     event.stopImmediatePropagation();
            //     console.log($(event.target))
            // });

        });

        @if(auth()->user()->hasRole('administrator'))
        const submitCopyForm = () => {
            let vars = $("#send_to_form").serialize();
            wait(true);
            axios({
                url: '{!! URL::to('')!!}/board/' + canvas_id + '/sendcanvasto',
                method: 'post',
                data: vars

            }).then((response) => {
                //  console.log(response.data);
                wait(false);
                // if it's all good
                if (response.data.status == '0') {
                    $("#sendtosubmitbut").removeAttr('disabled');
                    // show the saving success feedback
                    Swal.fire({
                        showClass: {
                            popup: 'animate__animated animate__backInDown'
                        },
                        hideClass: {
                            popup: 'animate__animated animate__backInUp'
                        },
                        toast: true,
                        position: 'top-end',
                        showConfirmButton: false,
                        timer: 3000,
                        icon: "success",
                        title: 'Copied ' + response.data.count + ' boards',
                    });
                } else {
                    $("#sendtosubmitbut").removeAttr('disabled');
                    Swal.fire(saveFailToastOptions)
                }
                // // update the board name

            }).catch(function (error) {
                // console.log(error);
                $("#sendtosubmitbut").removeAttr('disabled');
                wait(false);
                Swal.fire(saveFailToastOptions)
            });


        }
        @endif

        function triggerFile() {
            $('input[name=header_image]').trigger('click');
        }

        //clear all selcted tags
        const clearTags = (selectId, displayId) => {
            $("#" + selectId + " option:selected").prop("selected", false).trigger('change');
        }


        $(document).on('click', '#colorBy', function () {
            if ($(this).prop("checked") == true) {
                $(".color-arrow").removeClass("open");
            } else if ($(this).prop("checked") == false) {
                $(".color-arrow").addClass("open");
            }
        });
        $(document).on('click', '.chart-expand', function () {
            $(".chart-section-bottom").toggleClass("expand");
        });

        $('input[name="board_structure"]').change(function () {
            $('input[name="board_structure"]').parent().parent('button').removeClass('active');
            $('input[name="board_structure"]:checked').parent().parent('button').addClass('active');
        })


        // watermark preview if freebie
        const process_preview_watermark = (response, watermark_path) => {
            @if(!auth()->user()->has_active_subscription)
            watermark([response, watermark_path])
                .dataUrl(function (coffee, logo) {
                    let context = coffee.getContext('2d');
                    context.save();
                    // put text on logo
                    let context2 = logo.getContext('2d');
                    context2.font = "20px Arial";
                    context2.fillStyle = "#a6a6a6";
                    context2.fillText("© Graphics et al {{ \Carbon\Carbon::now()->year }}  ", 10, logo.height - 20);
                    context2.restore();
                    //logo.width = 300;
                    let width = coffee.width;
                    let height = coffee.height;
                    let logo_height = height / 10;
                    let logo_width = logo.width * (logo_height / logo.height)
                    context.drawImage(logo, 0, (height - logo_height), logo_width, logo_height);
                    context.restore();
                    return coffee;
                })
                //.image(watermark.image.lowerRight(0.5))
                .then(function (img) {
                    $('#downloadPannel').find('img').attr('src', img);
                    watermark.destroy();
                });
            @else
            $('#downloadPannel').find('img').attr('src', response);
            @endif
        }

        // watermark download if freebie
        const process_download_watermark = (resource, watermark_path, extension) => {
            @if(!auth()->user()->has_active_subscription)
            let _options = {}
            if (extension == 'jpg') {
                _options = {type: 'image/jpeg'}
            } else {
                _options = {}
            }
            watermark([resource, watermark_path], _options)
                .dataUrl(function (coffee, logo) {
                    let context = coffee.getContext('2d');
                    context.save();
                    // put text on logo
                    let context2 = logo.getContext('2d');
                    context2.font = "20px Arial";
                    context2.fillStyle = "#a6a6a6";
                    context2.fillText("© Graphics et al {{ \Carbon\Carbon::now()->year }}  ", 10, logo.height - 20);
                    context2.restore();
                    //logo.width = 300;
                    let width = coffee.width;
                    let height = coffee.height;
                    let logo_height = height / 10;
                    let logo_width = logo.width * (logo_height / logo.height)
                    context.drawImage(logo, 0, (height - logo_height), logo_width, logo_height);
                    context.restore();
                    return coffee;
                })
                .then(function (img) {
                    let link = document.createElement("a");
                    link.href = img;
                    link.download = board_name + "." + extension;
                    link.click();
                    link.remove();
                    watermark.destroy();
                });
            @else
            let link = document.createElement("a");
            link.href = resource;
            link.download = board_name + "." + extension;
            link.click();
            link.remove();
            @endif
        }

        const process_download_pdf_watermark = (resource, watermark_path) => {
            @if(!auth()->user()->has_active_subscription)
            watermark([resource, watermark_path])
                .image(function (coffee, logo) {
                    let context = coffee.getContext('2d');
                    context.save();
                    // put text on logo
                    let context2 = logo.getContext('2d');
                    context2.font = "20px Arial";
                    context2.fillStyle = "#a6a6a6";
                    context2.fillText("© Graphics et al {{ \Carbon\Carbon::now()->year }}  ", 10, logo.height - 20);
                    context2.restore();
                    //logo.width = 300;
                    let width = coffee.width;
                    let height = coffee.height;
                    let logo_height = height / 10;
                    let logo_width = logo.width * (logo_height / logo.height)
                    context.drawImage(logo, 0, (height - logo_height), logo_width, logo_height);
                    context.restore();
                    return coffee;
                })
                .then(function (img) {
                    axios({
                        url: baseurl + '/board/downloadaspdf',
                        method: 'POST',
                        data: {
                            img: $(img).attr('src')
                        },
                        responseType: 'blob', // important
                    }).then((response) => {
                        const url = window.URL.createObjectURL(new Blob([response.data]));
                        const link = document.createElement('a');
                        link.href = url;
                        link.setAttribute('download', board_name + '.pdf'); //or any other extension
                        document.body.appendChild(link);
                        link.click();
                        wait(false);
                    }).finally(() => {
                        wait(false);
                    });
                    watermark.destroy();
                });
            @else
            axios({
                url: baseurl + '/board/downloadaspdf',
                method: 'POST',
                data: {
                    img: resource
                },
                responseType: 'blob', // important
            }).then((response) => {
                const url = window.URL.createObjectURL(new Blob([response.data]));
                const link = document.createElement('a');
                link.href = url;
                link.setAttribute('download', board_name + '.pdf'); //or any other extension
                document.body.appendChild(link);
                link.click();
                wait(false);
            }).finally(() => {
                wait(false);
            });
            @endif
        }
    </script>
@endpush

@push('after-styles')

    <style>
        /* Background only for this screen */
        body {
            background-image: url('{{asset("img/frontend/backgrounds/Background_Header_Gray.svg")}}') !important;
        }
    </style>
@endpush