{# Whiteboard Panel - Drawable canvas and sticky notes for team collaboration #}
<div class="workbook-whiteboard-panel content-card">
    <div class="card-header" data-bs-toggle="collapse" data-bs-target="#whiteboardContent">
        <h3><i class="fa fa-paint-brush"></i> Whiteboard</h3>
        <div class="card-header-actions">
            <button class="btn btn-secondary btn-sm" id="whiteboardExpandBtn" title="Toggle fullscreen">
                <i class="fa fa-expand"></i>
            </button>
            <i class="fa fa-chevron-down toggle-icon"></i>
        </div>
    </div>

    <div class="card-body collapse show" id="whiteboardContent">
        {# Toolbar #}
        <div class="whiteboard-toolbar">
            {# Drawing Tools #}
            <div class="toolbar-group">
                <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="marker" title="Marker">
                    <i class="fa fa-edit"></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 (or hold Space)">
                    <i class="fa fa-hand-paper-o"></i>
                </button>
            </div>

            {# Color Picker #}
            <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>

            {# Brush Size #}
            <div class="toolbar-group toolbar-size">
                <i class="fa fa-circle" style="font-size: 8px;"></i>
                <input type="range" id="whiteboardBrushSize" min="1" max="20" value="3" class="brush-slider">
                <i class="fa fa-circle" style="font-size: 16px;"></i>
                <span id="brushSizeLabel" class="size-label">3px</span>
            </div>
        </div>

        {# Second toolbar row - zoom and actions #}
        <div class="whiteboard-toolbar whiteboard-toolbar-secondary">
            {# Zoom Controls #}
            <div class="toolbar-group toolbar-zoom">
                <button class="btn btn-sm btn-secondary" id="whiteboardZoomOutBtn" title="Zoom out (Ctrl+-)">
                    <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 (Ctrl++)">
                    <i class="fa fa-search-plus"></i>
                </button>
                <button class="btn btn-sm btn-secondary" id="whiteboardZoomResetBtn" title="Reset to 100% (Ctrl+0)">
                    <i class="fa fa-arrows-alt"></i>
                </button>
                <button class="btn btn-sm btn-secondary" id="whiteboardFitViewBtn" title="Fit to view">
                    <i class="fa fa-compress"></i>
                </button>
            </div>

            {# Actions #}
            <div class="toolbar-group toolbar-actions">
                <button class="btn btn-sm btn-secondary" id="whiteboardUndoBtn" title="Undo (Ctrl+Z)">
                    <i class="fa fa-undo"></i>
                </button>
                <button class="btn btn-sm btn-warning" id="whiteboardClearBtn" title="Clear canvas">
                    <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>
            </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 fa-2x"></i>
                <span>Loading whiteboard...</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>

        {# Instructions #}
        <div class="whiteboard-instructions">
            <small class="text-muted">
                <i class="fa fa-info-circle"></i>
                Draw with mouse/touch. Scroll wheel to zoom. Middle-click or hold Space to pan. Drag sticky notes to reposition.
            </small>
        </div>
    </div>
</div>

{# Sticky Note Color Picker Modal (for future enhancement) #}
<div class="modal fade" id="stickyColorModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Add Sticky 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">
                    <label>Content</label>
                    <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 class="sticky-color-option selected" data-color="0" style="background-color: #FFFF88;"></button>
                        <button class="sticky-color-option" data-color="1" style="background-color: #FFB8D1;"></button>
                        <button class="sticky-color-option" data-color="2" style="background-color: #87CEEB;"></button>
                        <button class="sticky-color-option" data-color="3" style="background-color: #98FB98;"></button>
                        <button class="sticky-color-option" data-color="4" style="background-color: #FFD280;"></button>
                        <button class="sticky-color-option" data-color="5" style="background-color: #DDA0DD;"></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="confirmAddSticky">Add Note</button>
            </div>
        </div>
    </div>
</div>