{{--Side buttons for canvas. These are repeated in a couple places--}}
<div class="btn-group-vertical" style="margin-bottom: 5px; ">
    <button data-tippy-content="Add Graphics et al element" data-tippy-placement="right" type="button"
            class="btn  btn-outline-secondary board_button "
{{--            data-toggle="modal"--}}
{{--            data-target="#new_clipart_modal"--}}
            onclick="showPanel('clipart_list_view')"
{{--            data-toggle="collapse" data-target="#clipart_list_view" aria-expanded="false"--}}
    >
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 45">
            <g >
                <g >
                    <path style="fill:currentColor"
                          d="M1 39a1 1 0 01-1-1 1 1 0 010-1l5-2 2-7a1 1 0 011-1 1 1 0 011 1 9 9 0 005 2 1 1 0 110 2 11 11 0 01-6-2l-2 6-5 3zM27 35a20 20 0 004 2 2 2 0 001 0 10 10 0 001-5 15 15 0 01-6 3zM14 45a1 1 0 01-1-1l3-5v-7a1 1 0 011-1l2-1a1 1 0 011 1 1 1 0 01-1 1h-1v8l-3 5a1 1 0 01-1 0z"/>
                    <path style="fill:currentColor"
                          d="M41 31a50 50 0 00-4-5c4 3 7 5 3 1-6-6-14-9-18-11l-1-1a11 11 0 00-4 0 5 5 0 00-2 1l-1 2-1-1a5 5 0 00-6-1H6 5l-1 1h2a6 6 0 00-1 5 4 4 0 002 3 4 4 0 003 1 4 4 0 003-2v4a4 4 0 002 1 3 3 0 001 0h2a22 22 0 002 0l1 1a30 30 0 005 4l1 1h2l2-1 2-2v-2h1l2 9a1 1 0 001 1l3 1a1 1 0 001 0 1 1 0 000-1 1 1 0 000-1l-3-1-3-9a1 1 0 00-1 0h-1l-1-2-1-3c7 6 14 12 10 7zm-29-9a3 3 0 01-2 3 3 3 0 01-3-4 3 3 0 013-3 3 3 0 013 3 4 4 0 01-1 1zM30 18c2 0 4 1 5 3h1v-8h8V7h-8V0h-6v7h-7v6h7z"/>
                </g>
            </g>
        </svg>
    </button>
    <button data-tippy-content="Import from device" data-tippy-placement="right" type="button"
            class="btn  btn-outline-secondary board_button "
{{--            data-toggle="modal"--}}
{{--            data-target="#new_image_modal"--}}
            onclick="showPanel('user_image_view')"
{{--            data-toggle="collapse" data-target="#user_image_view" aria-expanded="false"--}}
    >
        <svg xmlns="http://www.w3.org/2000/svg" id="svg22" version="1.1" viewBox="0 0 37 34">
            <g id="Layer_2" data-name="Layer 2" display="inline" transform="translate(-17 -16)">
                <g id="V2" display="inline">
                    <path id="path12" fill="currentColor"
                          d="M50 50H22a5 5 0 01-5-5V26a5 5 0 015-5h5l1-4a2 2 0 012-1h12a2 2 0 012 1l1 4h5a5 5 0 015 5v19a5 5 0 01-5 5z"
                          class="cls-4"/>
                    <circle id="circle14" cx="36" cy="35.1" r="7.5" fill="none" stroke="#fff"
                            stroke-miterlimit="10" stroke-width="3"/>
                    <path id="path16" fill="#fff" d="M30 18h4v3h-4z"/>
                    <path id="path18" fill="currentColor" d="M23 18h3v3h-3z" class="cls-4"/>
                </g>
            </g>
        </svg>
    </button>
    <button data-tippy-content="Insert text" data-tippy-placement="right" title="Insert text"
            type="button" aria-pressed="false"
            class="btn btn-outline-secondary board_button"
onclick="enableTexts()"
    >
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 44 31">
            <g id="Layer_2" data-name="Layer 2" transform="translate(-14 -17)">
                <g id="V2">
                    <path id="polygon12" fill="currentColor" d="M44 35l-2-8-4 7 1 1z" class="cls-4"/>
                    <path id="path14" fill="currentColor" d="M45 46h1a3 3 0 001-1l-2-5H35l-1 1h6l2 7h2z"
                          class="cls-4"/>
                    <path id="polygon16" fill="currentColor"
                          d="M34 17L14 48h6l1-2h1l3-5h2l3-4h-3l9-14v2l4-6v-2z" class="cls-4"/>
                    <path id="path18" fill="currentColor"
                          d="M56 47a4 4 0 01-1-2 22 22 0 01-1-3l-6-25h-5L28 42a30 30 0 01-2 3 7 7 0 01-2 2 4 4 0 01-1 0v1h11l1-1-4-2a4 4 0 011-2 13 13 0 011-3l1-2h14v3l1 2a7 7 0 010 2 2 2 0 01-1 2 4 4 0 01-2 0v1h12v-1a4 4 0 01-2 0zM35 36l9-14 3 14z"
                          class="cls-4"/>
                </g>
            </g>
        </svg>
    </button>
    <button data-tippy-content="Insert shape" data-tippy-placement="right" type="button"
            onclick="showPanel('shapes_view')"

{{--            data-toggle="modal"--}}
{{--            data-target="#new_shape_modal"--}}
            class="btn btn-outline-secondary board_button ">
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 45 41">
            <g id="Layer_2" data-name="Layer 2" transform="translate(-14 -15)">
                <g id="V2">
                    <path id="path12" fill="currentColor" d="M43 26a15 15 0 00-5 1l10 17H28a15 15 0 1015-18z"
                          class="cls-4"/>
                    <path id="polygon14" fill="currentColor" d="M29 12L14 38h30z" class="cls-4"
                          transform="translate(0 3)"/>
                </g>
            </g>
        </svg>
    </button>

    <button type="button" data-tippy-content="Insert Chart" data-tippy-placement="right"
{{--            data-toggle="popover" data-placement="right"--}}
onclick="showPanel('chart_view')"
            class="btn btn-outline-secondary board_button ">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40">
            <g data-name="Layer 2">
                <g data-name="V2 Working">
                    <path d="M0 36h40v4H0zM0 0v33h5V7h7v26h5V16h6v17h5V22h7v11h5V0H0z" fill="currentColor"/>
                </g>
            </g>
        </svg>
    </button>
    <button data-tippy-content="Insert background" data-tippy-placement="right" type="button"
{{--            data-toggle="collapse" data-target="#user_backgrount_view" aria-expanded="false"--}}
            onclick="showPanel('user_backgrount_view')"
            class="btn btn-outline-secondary board_button ">
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 37 37">
            <defs>
                <path id="rect24" fill="none" d="M18 15h37v37H18z" class="cls-21"/>
            </defs>
            <defs id="defs7">
                <clipPath id="clip-path">
                    <use style="fill:none" xlink:href="#rect24"/>
                </clipPath>
            </defs>
            <g id="Layer_2" data-name="Layer 2" transform="translate(-18 -15)">
                <g>
                    <g id="g47" clip-path="url(#clip-path)">
                        <path id="rect15" fill="currentColor" d="M13 11h9v9h-9z" transform="rotate(45 18 15)"/>
                        <path id="polygon17" fill="currentColor" d="M30 9l6 6-6 6-6-6z"/>
                        <path id="polygon19" fill="currentColor" d="M42 9l6 6-6 6-6-6z"/>
                        <path id="polygon21" fill="currentColor" d="M54 9l7 6-7 6-6-6z"/>
                        <path id="rect23" fill="currentColor" d="M13 23h9v9h-9z" transform="rotate(45 18 27)"/>
                        <path id="polygon25" fill="currentColor" d="M30 21l6 6-6 6-6-6z"/>
                        <path id="polygon27" fill="currentColor" d="M42 21l6 6-6 6-6-6z"/>
                        <path id="polygon29" fill="currentColor" d="M54 21l7 6-7 6-6-6z"/>
                        <path id="rect31" fill="currentColor" d="M13 35h9v9h-9z" transform="rotate(45 17 39)"/>
                        <path id="polygon33" fill="currentColor" d="M30 33l6 6-6 6-6-6z"/>
                        <path id="polygon35" fill="currentColor" d="M42 33l6 6-6 6-6-6z"/>
                        <path id="polygon37" fill="currentColor" d="M54 33l7 6-7 6-6-6z"/>
                        <path id="rect39" fill="currentColor" d="M13 47h9v9h-9z" transform="rotate(45 17 52)"/>
                        <path id="polygon41" fill="currentColor" d="M30 45l6 7-6 6-6-6z"/>
                        <path id="polygon43" fill="currentColor" d="M42 45l6 7-6 6-6-6z"/>
                        <path id="polygon45" fill="currentColor" d="M54 45l6 7-6 6-6-6z"/>
                    </g>
                    <use id="rect49" fill="none" xlink:href="#rect24"/>
                </g>
            </g>
        </svg>
    </button>
</div>