{{--Side buttons for canvas. These are repeated in a couple places--}}
<div class="btn-group-vertical" style="margin-bottom: 5px">
    <button data-tippy-content="Save duplicate" data-tippy-placement="right" title="Duplicate"
            type="button"
            onclick="alert('todo')"
            class="btn btn-block btn-outline-secondary board_button ">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 308 300">
            <g id="Layer_2" data-name="Layer 2">
                <g id="V2_Working" data-name="V2 Working">
                    <path d="M3 3h264v215H3z"
                          style="fill:#fff;stroke:#999;stroke-miterlimit:10;stroke-width:6.03px"/>
                    <path d="M199 88h47v45h-47zM199 26h47v47h-47zM199 148h47v47h-47zM25 26h161v169H25z"
                          fill="#999"/>
                    <path d="M40 83h264v215H40z"
                          style="fill:#fff;stroke:#999;stroke-miterlimit:10;stroke-width:6.03px"/>
                    <path
                        d="M236 167h47v45h-47zM236 106h47v47h-47zM236 227h47v47h-47zM62 106h161v169H62z"
                        fill="#999"/>
                </g>
            </g>
        </svg>
    </button>
    <button data-tippy-content="Save" data-tippy-placement="right" title="Save" type="button"
            onclick="save()"
            class="btn  btn-block btn-outline-secondary board_button ">
        <svg xmlns="http://www.w3.org/2000/svg" id="svg28" version="1.1" viewBox="0 0 37 37">
            <defs>
                <path id="rect22" fill="#999" d="M34 17h4v9h-4z"/>
            </defs>

            <g id="Layer_2" data-name="Layer 2" transform="translate(-17 -15)">
                <g id="V2">
                    <path id="path12" fill="#fff" d="M49 38v12H23V38a3 3 0 012-3h21a3 3 0 013 3z"/>
                    <path id="path14" fill="#fff" d="M43 16v9a3 3 0 01-3 2H25a3 3 0 01-3-2v-9z"/>
                    <path id="path16" fill="#999" d="M34 17v9h5v-9zm0 0v9h5v-9zm0 0v9h5v-9z"/>
                    <path id="path18" fill="#999"
                          d="M45 15H20a3 3 0 00-3 3v31a3 3 0 003 3h31a3 3 0 003-3V24zm4 35H23V38a3 3 0 012-3h21a3 3 0 013 3zM22 16h21v9a3 3 0 01-3 2H25a3 3 0 01-3-2z"
                          class="cls-44"/>
                    <path id="line20" fill="#999" d="M54 24l-9-9"/>
                    <use style="fill:#999" xlink:href="#rect22"/>
                    <use id="rect24" style="fill:#999" xlink:href="#rect22"/>
                </g>
            </g>
        </svg>
    </button>
    <button data-tippy-content="Download" data-tippy-placement="right" type="button"
            class="btn btn-block btn-outline-secondary board_button "  data-toggle="modal"
            data-target="#downloaddialog">
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 42 46">

            <g id="Layer_2" data-name="Layer 2" transform="translate(-15 -10)">
                <g id="V2">
                    <path id="path12" fill="#999"
                          d="M38 29H21a3 3 0 00-2 2v1l-3 21a2 2 0 002 3 3 3 0 01-3-3V24a3 3 0 013-2h9a3 3 0 013 2v2h5z"/>
                    <path id="path14" fill="#999" d="M53 29H43l2-3h6a3 3 0 012 3z"/>
                    <path id="path16" fill="#fff" stroke="#999" stroke-miterlimit="10"
                          d="M51 18l-5 7-1 1-2 3h-5l-3-3v-1l-5-7h7v-7h7v7z"/>
                    <path id="path18" fill="#fff" stroke="#999" stroke-miterlimit="10"
                          d="M56 31l-2 22a3 3 0 01-2 3H19a2 2 0 01-1 0 2 2 0 01-2-3l3-21v-1a3 3 0 012-2h33a2 2 0 012 2z"/>
                </g>
            </g>
        </svg>
    </button>
    <button data-tippy-content="Share" data-tippy-placement="right" type="button" onclick="alert('todo')"
            class="btn btn-block btn-outline-secondary board_button ">
        <svg xmlns="http://www.w3.org/2000/svg" id="svg18" version="1.1" viewBox="0 0 37 37">

            <g data-name="Layer 2" transform="translate(-16 -15)">
                <g id="V2" fill="#fff" stroke="#999" stroke-miterlimit="10">
                    <path id="path12" stroke-width="4" d="M30 50h-9a3 3 0 01-3-3V20a3 3 0 013-3h9"/>
                    <path id="path14"
                          d="M40 43v-3H27V27h13v-3c0-2 1-2 2-1l3 2 4 4 3 3a3 3 0 010 3l-3 3-4 4-3 2c-1 1-2 1-2-1z"/>
                </g>
            </g>
        </svg>
    </button>
    <button data-tippy-content="Settings" data-tippy-placement="bottom" type="button"
            class="btn board_button  btn-outline-secondary d-block d-sm-none">
        <svg width="2em" height="2em" viewBox="0 0 16 16" class="bi bi-gear" fill="currentColor"
             xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd"
                  d="M8.837 1.626c-.246-.835-1.428-.835-1.674 0l-.094.319A1.873 1.873 0 0 1 4.377 3.06l-.292-.16c-.764-.415-1.6.42-1.184 1.185l.159.292a1.873 1.873 0 0 1-1.115 2.692l-.319.094c-.835.246-.835 1.428 0 1.674l.319.094a1.873 1.873 0 0 1 1.115 2.693l-.16.291c-.415.764.42 1.6 1.185 1.184l.292-.159a1.873 1.873 0 0 1 2.692 1.116l.094.318c.246.835 1.428.835 1.674 0l.094-.319a1.873 1.873 0 0 1 2.693-1.115l.291.16c.764.415 1.6-.42 1.184-1.185l-.159-.291a1.873 1.873 0 0 1 1.116-2.693l.318-.094c.835-.246.835-1.428 0-1.674l-.319-.094a1.873 1.873 0 0 1-1.115-2.692l.16-.292c.415-.764-.42-1.6-1.185-1.184l-.291.159A1.873 1.873 0 0 1 8.93 1.945l-.094-.319zm-2.633-.283c.527-1.79 3.065-1.79 3.592 0l.094.319a.873.873 0 0 0 1.255.52l.292-.16c1.64-.892 3.434.901 2.54 2.541l-.159.292a.873.873 0 0 0 .52 1.255l.319.094c1.79.527 1.79 3.065 0 3.592l-.319.094a.873.873 0 0 0-.52 1.255l.16.292c.893 1.64-.902 3.434-2.541 2.54l-.292-.159a.873.873 0 0 0-1.255.52l-.094.319c-.527 1.79-3.065 1.79-3.592 0l-.094-.319a.873.873 0 0 0-1.255-.52l-.292.16c-1.64.893-3.433-.902-2.54-2.541l.159-.292a.873.873 0 0 0-.52-1.255l-.319-.094c-1.79-.527-1.79-3.065 0-3.592l.319-.094a.873.873 0 0 0 .52-1.255l-.16-.292c-.892-1.64.902-3.433 2.541-2.54l.292.159a.873.873 0 0 0 1.255-.52l.094-.319z"/>
            <path fill-rule="evenodd"
                  d="M8 5.754a2.246 2.246 0 1 0 0 4.492 2.246 2.246 0 0 0 0-4.492zM4.754 8a3.246 3.246 0 1 1 6.492 0 3.246 3.246 0 0 1-6.492 0z"/>
        </svg>
    </button>
    <button data-tippy-content="Help" data-tippy-placement="right" title="Help" type="button" onclick="alert('todo')"
            class="btn btn-block btn-outline-secondary board_button  d-block d-sm-none">
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 40 40">

            <g data-name="Layer 2" transform="translate(-16.2 -13.1)">
                <g>
                    <circle id="circle12" cx="36.16" cy="33.139999" r="20" fill="#999"/>
                    <path id="line14" fill="none" d="M33.6 31.4L31 34"/>
                    <path id="path16" fill="#fff"
                          d="M33 38v-.2a5.5 5.5 0 01.3-1.6 8.4 8.4 0 01.7-1.6l1.6-2.6a15.3 15.3 0 001.9-3.4 9.4 9.4 0 00.5-3 7 7 0 00-.4-2.6 2.5 2.5 0 00-1-1.2 2.6 2.6 0 00-1.3-.4 2.5 2.5 0 00-2 1 5.4 5.4 0 00-1 2.7h-3.7v-3.8a26.9 26.9 0 014.2-1.5 14.4 14.4 0 013.4-.4 11 11 0 014.4.7 5 5 0 012.4 2 5.3 5.3 0 01.7 2.8 7.3 7.3 0 01-.2 1.9 7 7 0 01-.8 1.8 14.5 14.5 0 01-1.3 1.8L39 33a14.5 14.5 0 00-1.6 1.8 6.1 6.1 0 00-.7 1.4 5.1 5.1 0 00-.2 1.6v.2z"/>
                    <path id="rect18" fill="#fff" d="M32.4 41.4h5v5h-5z"
                          transform="rotate(-45 34.9 43.9)"/>
                </g>
            </g>
        </svg>
    </button>
</div>