{# Whiteboard Panel Content - Inner content for the whiteboard panel #}
{# This is the content that goes inside the panel body #}

{# Single consolidated toolbar #}
<div class="whiteboard-toolbar">
    {# Drawing Tools #}
    <div class="toolbar-group toolbar-tools">
        <button class="btn btn-sm whiteboard-tool-btn active" data-tool="pen" title="Pen">
            <i class="fa fa-pencil"></i>
        </button>
        <button class="btn btn-sm whiteboard-tool-btn" data-tool="brush" title="Brush">
            <i class="fa fa-paint-brush"></i>
        </button>
        <button class="btn btn-sm whiteboard-tool-btn" data-tool="highlighter" title="Highlighter">
            <i class="fa fa-lightbulb-o"></i>
        </button>
        <button class="btn btn-sm whiteboard-tool-btn" data-tool="eraser" title="Eraser">
            <i class="fa fa-eraser"></i>
        </button>
        <button class="btn btn-sm whiteboard-tool-btn" data-tool="pan" title="Pan (Space)">
            <i class="fa fa-hand-paper-o"></i>
        </button>
    </div>

    <div class="toolbar-divider"></div>

    {# Color Picker - inline colors #}
    <div class="toolbar-group toolbar-colors">
        <button class="btn btn-sm whiteboard-color-btn active" data-color="#000000" style="background-color: #000000;" title="Black"></button>
        <button class="btn btn-sm whiteboard-color-btn" data-color="#FF0000" style="background-color: #FF0000;" title="Red"></button>
        <button class="btn btn-sm whiteboard-color-btn" data-color="#0066FF" style="background-color: #0066FF;" title="Blue"></button>
        <button class="btn btn-sm whiteboard-color-btn" data-color="#00CC00" style="background-color: #00CC00;" title="Green"></button>
        <button class="btn btn-sm whiteboard-color-btn" data-color="#FF9900" style="background-color: #FF9900;" title="Orange"></button>
        <button class="btn btn-sm whiteboard-color-btn" data-color="#9933FF" style="background-color: #9933FF;" title="Purple"></button>
        <input type="color" id="whiteboardColorPicker" value="#000000" class="color-picker-input" title="Custom color">
    </div>

    <div class="toolbar-divider"></div>

    {# Brush Size - compact #}
    <div class="toolbar-group toolbar-size">
        <i class="fa fa-circle size-icon-sm"></i>
        <input type="range" id="whiteboardBrushSize" min="1" max="20" value="3" class="brush-slider">
        <i class="fa fa-circle size-icon-lg"></i>
        <span id="brushSizeLabel" class="size-label">3px</span>
    </div>

    <div class="toolbar-divider"></div>

    {# Zoom Controls - compact #}
    <div class="toolbar-group toolbar-zoom">
        <button class="btn btn-sm btn-secondary" id="whiteboardZoomOutBtn" title="Zoom out">
            <i class="fa fa-search-minus"></i>
        </button>
        <span id="zoomLevelLabel" class="zoom-label">100%</span>
        <button class="btn btn-sm btn-secondary" id="whiteboardZoomInBtn" title="Zoom in">
            <i class="fa fa-search-plus"></i>
        </button>
        <button class="btn btn-sm btn-secondary" id="whiteboardFitViewBtn" title="Fit to view">
            <i class="fa fa-compress"></i>
        </button>
    </div>

    <div class="toolbar-spacer"></div>

    {# Actions - right aligned #}
    <div class="toolbar-group toolbar-actions">
        <button class="btn btn-sm btn-secondary" id="whiteboardUndoBtn" title="Undo">
            <i class="fa fa-undo"></i>
        </button>
        <button class="btn btn-sm btn-warning" id="whiteboardClearBtn" title="Clear">
            <i class="fa fa-trash"></i>
        </button>
        <button class="btn btn-sm btn-primary" id="addStickyBtn" title="Add sticky note">
            <i class="fa fa-sticky-note"></i> Add Note
        </button>
        <button class="btn btn-sm btn-secondary" id="whiteboardExpandBtn" title="Fullscreen">
            <i class="fa fa-expand"></i>
        </button>
    </div>
</div>

{# Canvas Container #}
<div class="whiteboard-canvas-wrapper">
    {# Loading overlay #}
    <div class="whiteboard-loading" id="whiteboardLoading" style="display: none;">
        <i class="fa fa-spinner fa-spin"></i>
        <span>Loading...</span>
    </div>

    {# Canvas container - sticky notes float on top #}
    <div class="whiteboard-canvas-container" id="whiteboardCanvasContainer">
        <canvas id="whiteboardCanvas"></canvas>
        {# Sticky notes overlay #}
        <div class="whiteboard-sticky-container" id="whiteboardStickyContainer">
            {# Sticky notes rendered by JavaScript #}
        </div>
    </div>
</div>

{# Sticky Note Modal (Add/Edit) #}
<div class="modal fade" id="stickyNoteModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="stickyModalTitle">Add Note</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <textarea id="stickyNoteContent" class="form-control" rows="3" placeholder="Enter note content..."></textarea>
                </div>
                <div class="mb-3">
                    <label>Color</label>
                    <div class="sticky-color-options">
                        <button type="button" class="sticky-color-option selected" data-color="0" style="background-color: #FFFF88;" title="Yellow"></button>
                        <button type="button" class="sticky-color-option" data-color="1" style="background-color: #FFB8D1;" title="Pink"></button>
                        <button type="button" class="sticky-color-option" data-color="2" style="background-color: #87CEEB;" title="Blue"></button>
                        <button type="button" class="sticky-color-option" data-color="3" style="background-color: #98FB98;" title="Green"></button>
                        <button type="button" class="sticky-color-option" data-color="4" style="background-color: #FFD280;" title="Orange"></button>
                        <button type="button" class="sticky-color-option" data-color="5" style="background-color: #DDA0DD;" title="Purple"></button>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" id="confirmStickyNote">Add Note</button>
            </div>
        </div>
    </div>
</div>