<div id="canvascontroltemplate" class="modal fade" role="dialog" data-backdrop="false" style="width: 300px">
    <div class="modal-dialog modal-sm modal-contextcontrols" role="document">

        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"  id="selected_item_name">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
{{--            <div class="card">--}}
{{--                <div class="card-header p-1 m-1" id="canvascontroltemplate_handle" style="color: #0a3544">--}}
{{--                    <div class="d-flex flex-row justify-content-between ">--}}
                        {{--                            <a href="#" onclick="hideSelected()"><i class="far fa-eye"></i></a>--}}
{{--                        <span id="selected_item_name">Selection</span>--}}
{{--                        <button class="btn btn-sm m-0" class="close" data-dismiss="modal" aria-label="Close"><span--}}
{{--                                aria-hidden="true">&times;</span>--}}
{{--                        </button>--}}
{{--                    </div>--}}
{{--                </div>--}}
{{--                <div class="card-body p-0 " id="contextualcanvascontrols">--}}
                <div class="container" id="contextualcanvascontrols">

{{--                    <div class="card-text">--}}
{{--                        <div class="card-text">--}}
                    <div class="row">
                            <button id="update_selection_btn1"
                                    class="btn btn-sm btn-link ml-1 mr-0 optionsbutton update_selection_btn1"
                                    data-toggle="collapse"
                                    data-tippy-content="Update"><i
                                    class="fas fa-edit"></i></button>
                            <button id="colourway_btn"
                                    class="btn btn-sm btn-link ml-1 mr-0 optionsbutton colourway_btn"
                                    data-toggle="collapse"
                                    data-target="#colorway_selector" data-tippy-content="Colourways"><i
                                    class="fas fa-palette"></i></button>

                            <button class="btn btn-sm btn-link m-0 " data-tippy-content="Opacity"
                                    data-toggle="collapse"
                                    data-target="#slider_selector"
                            ><i
                                    class="fas fa-chess-board"></i></button>
                            <button class="btn btn-sm btn-link m-0 optionsbutton show_scale_btn" id="show_scale_btn"
                                    onclick="toggleScale()"
                                    data-tippy-content="Show/hide scale"><i
                                    class="fas fa-ruler-horizontal"></i>
                            </button>
                            <button class="btn btn-sm btn-link m-0" onclick="flip('x')"
                                    data-tippy-content="Flip horizontal"><i class="fas fa-random "></i>
                            </button>
                            <button class="btn btn-sm btn-link m-0" onclick="flip('y')"
                                    data-tippy-content="Flip vertical"><i class="fas fa-random fa-rotate-270"></i>
                            </button>
                            <button class="btn btn-sm btn-link m-0" onclick="bringToFront()"
                                    data-tippy-content="Bring to front">
                                <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-front"
                                     fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd"
                                          d="M0 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v2h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-2H2a2 2 0 0 1-2-2V2zm5 10v2a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1h-2v5a2 2 0 0 1-2 2H5z"/>
                                </svg>
                            </button>
                            <button class="btn btn-sm btn-link m-0" onclick="sendToBack()"
                                    data-tippy-content="Send to back">
                                <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-back"
                                     fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd"
                                          d="M0 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v2h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-2H2a2 2 0 0 1-2-2V2zm2-1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H2z"/>
                                </svg>
                            </button>
                            <button class="btn btn-sm btn-link m-0 align_btn optionsbutton" id="align_btn"
                                    data-toggle="collapse"
                                    data-target="#group_options"
                                    data-tippy-content="Align">
                                <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-align-center"
                                     fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="M8 1a.5.5 0 0 1 .5.5V6h-1V1.5A.5.5 0 0 1 8 1zm0 14a.5.5 0 0 1-.5-.5V10h1v4.5a.5.5 0 0 1-.5.5zM2 7a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V7z"/>
                                </svg>
                            </button>
                            <button class="btn btn-sm btn-link m-0" onclick="cloneSelected()"
                                    data-tippy-content="Clone">
                                <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-stickies" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd" d="M0 1.5A1.5 1.5 0 0 1 1.5 0H13a1 1 0 0 1 1 1H1.5a.5.5 0 0 0-.5.5V14a1 1 0 0 1-1-1V1.5z"/>
                                    <path fill-rule="evenodd" d="M2 3.5A1.5 1.5 0 0 1 3.5 2h11A1.5 1.5 0 0 1 16 3.5v6.086a1.5 1.5 0 0 1-.44 1.06l-4.914 4.915a1.5 1.5 0 0 1-1.06.439H3.5A1.5 1.5 0 0 1 2 14.5v-11zM3.5 3a.5.5 0 0 0-.5.5v11a.5.5 0 0 0 .5.5h6.086a.5.5 0 0 0 .353-.146l4.915-4.915A.5.5 0 0 0 15 9.586V3.5a.5.5 0 0 0-.5-.5h-11z"/>
                                    <path fill-rule="evenodd" d="M10.5 10a.5.5 0 0 0-.5.5v5H9v-5A1.5 1.5 0 0 1 10.5 9h5v1h-5z"/>
                                </svg>
                            </button>
                            <button class="btn btn-sm btn-link m-0" onclick="deleteSelected()"
                                    data-tippy-content="Delete"><i
                                    class="far fa-trash-alt"></i>
                            </button>
                        </div>
{{--                        <div class="row p-0 m-0 collapse m-auto optionspanel colorway_selector"--}}
{{--                             id="colorway_selector"--}}
{{--                             data-parent="#contextualcanvascontrols">--}}
{{--                            @include('frontend.board.form.canvascontrols.colourways')--}}
{{--                        </div>--}}
{{--                        <div class="row p-0 m-0 collapse" id="slider_selector"--}}
{{--                             data-parent="#contextualcanvascontrols">--}}
{{--                            <div class="col">--}}
{{--                                <div class="row pb-0 mb-0 align-text-bottom" ><label for="opacityRange">Opacity<span id="opacity_disp"></span></label> </div>--}}
{{--                                <div class="row pt-0 mt-0"><input type="range" min="0" max="100" value="50" step="25" class="slider form-control w-100 p-1"--}}
{{--                                       id="opacityRange"--}}
{{--                                >--}}
{{--                                </div>--}}
{{--                            </div>--}}

{{--                        </div>--}}
                        <div class="row p-0 m-0 collapse optionspanel text_options" id="text_options"
                             data-parent="#contextualcanvascontrols">
                            @include('frontend.board.form.canvascontrols.textcontrols')
                        </div>
                        <div class="row p-0 m-0 collapse optionspanel shape_options" id="shape_options"
                             data-parent="#contextualcanvascontrols">
                            @include('frontend.board.form.canvascontrols.shapecontrols')
                        </div>
                        <div class="row p-0 m-0 collapse optionspanel group_options" id="group_options"
                             data-parent="#contextualcanvascontrols">
                            @include('frontend.board.form.canvascontrols.alignment')
                        </div>
{{--                    </div>--}}
{{--                </div>--}}
            </div>
        </div>
    </div>

</div>
