{{!
    @template local_unifiedgrader/annotation_toolbar

    Annotation toolbar with tool selection, colour picker, and undo/redo controls.
    Rendered inside the pdf_viewer template.
}}
<div class="d-flex align-items-center gap-2 px-2 py-1 border-bottom bg-white flex-wrap"
     data-region="annotation-toolbar-inner">

    {{! Tool selection buttons }}
    <div class="btn-group btn-group-sm" role="group"
         aria-label="{{#str}} annotate_tools, local_unifiedgrader {{/str}}"
         data-region="tool-selector">
        <button type="button" class="btn btn-outline-secondary active" data-tool="select"
                title="{{#str}} annotate_select, local_unifiedgrader {{/str}}">
            <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
                <path d="M3 2l10 6-4 1-2 5z"/>
            </svg>
        </button>
        <button type="button" class="btn btn-outline-secondary" data-tool="textselect"
                title="{{#str}} annotate_textselect, local_unifiedgrader {{/str}}">
            <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
                <path d="M6 2h4M8 2v12M6 14h4" stroke="currentColor" stroke-width="1.8"
                      stroke-linecap="round" fill="none"/>
            </svg>
        </button>
        <button type="button" class="btn btn-outline-secondary" data-tool="comment"
                title="{{#str}} annotate_comment, local_unifiedgrader {{/str}}">
            <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
                <path d="M8 1a7 7 0 0 0-7 7c0 1.6.5 3 1.5 4.2L1 15l3.2-1c1 .6 2.3 1 3.8 1a7 7 0 0 0 0-14z"/>
            </svg>
        </button>
        <button type="button" class="btn btn-outline-secondary" data-tool="highlight"
                title="{{#str}} annotate_highlight, local_unifiedgrader {{/str}}">
            <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
                <rect x="1" y="5" width="14" height="6" rx="1" opacity="0.5"/>
            </svg>
        </button>
    </div>

    {{! Pen tool with line width popout }}
    <div class="position-relative" data-region="pen-width-wrapper">
        <button type="button" class="btn btn-sm btn-outline-secondary" data-tool="pen"
                title="{{#str}} annotate_pen, local_unifiedgrader {{/str}}">
            <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
                <path d="M12.146.854a.5.5 0 0 1 .708 0l2.292 2.292a.5.5 0 0 1 0 .708L5.707 13.293l-3-3L12.146.854zM2 11l3 3-3.5 1.5L.5 14 2 11z"/>
            </svg>
        </button>
        <div data-region="pen-width-popout" class="d-none"
             style="position:absolute; top:100%; left:50%; transform:translateX(-50%);
                    z-index:10; background:#fff; border:1px solid #dee2e6;
                    border-radius:.375rem; padding:4px; margin-top:4px;
                    display:flex; gap:2px; box-shadow:0 2px 6px rgba(0,0,0,.15);">
            <button type="button" class="btn btn-sm btn-outline-secondary p-1" data-penwidth="1"
                    title="{{#str}} annotate_pen_fine, local_unifiedgrader {{/str}}">
                <svg width="20" height="14" viewBox="0 0 20 14">
                    <line x1="2" y1="7" x2="18" y2="7" stroke="currentColor"
                          stroke-width="1" stroke-linecap="round"/>
                </svg>
            </button>
            <button type="button" class="btn btn-sm btn-outline-secondary p-1 active" data-penwidth="3"
                    title="{{#str}} annotate_pen_medium, local_unifiedgrader {{/str}}">
                <svg width="20" height="14" viewBox="0 0 20 14">
                    <line x1="2" y1="7" x2="18" y2="7" stroke="currentColor"
                          stroke-width="3" stroke-linecap="round"/>
                </svg>
            </button>
            <button type="button" class="btn btn-sm btn-outline-secondary p-1" data-penwidth="8"
                    title="{{#str}} annotate_pen_thick, local_unifiedgrader {{/str}}">
                <svg width="20" height="14" viewBox="0 0 20 14">
                    <line x1="2" y1="7" x2="18" y2="7" stroke="currentColor"
                          stroke-width="6" stroke-linecap="round"/>
                </svg>
            </button>
        </div>
    </div>

    {{! Shape tool with shape type popout }}
    <div class="position-relative" data-region="shape-wrapper">
        <button type="button" class="btn btn-sm btn-outline-secondary" data-tool="shape" data-shape="rect"
                title="{{#str}} annotate_shape, local_unifiedgrader {{/str}}">
            <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5">
                <rect x="2" y="2" width="12" height="12" rx="1"/>
            </svg>
        </button>
        <div data-region="shape-popout" class="d-none"
             style="position:absolute; top:100%; left:50%; transform:translateX(-50%);
                    z-index:10; background:#fff; border:1px solid #dee2e6;
                    border-radius:.375rem; padding:4px; margin-top:4px;
                    display:flex; gap:2px; box-shadow:0 2px 6px rgba(0,0,0,.15);">
            <button type="button" class="btn btn-sm btn-outline-secondary p-1 active"
                    data-tool="shape" data-shape="rect"
                    title="{{#str}} annotate_shape_rect, local_unifiedgrader {{/str}}">
                <svg width="20" height="14" viewBox="0 0 20 14" fill="none" stroke="currentColor" stroke-width="1.5">
                    <rect x="3" y="2" width="14" height="10" rx="1"/>
                </svg>
            </button>
            <button type="button" class="btn btn-sm btn-outline-secondary p-1"
                    data-tool="shape" data-shape="circle"
                    title="{{#str}} annotate_shape_circle, local_unifiedgrader {{/str}}">
                <svg width="20" height="14" viewBox="0 0 20 14" fill="none" stroke="currentColor" stroke-width="1.5">
                    <ellipse cx="10" cy="7" rx="7" ry="5"/>
                </svg>
            </button>
            <button type="button" class="btn btn-sm btn-outline-secondary p-1"
                    data-tool="shape" data-shape="arrow"
                    title="{{#str}} annotate_shape_arrow, local_unifiedgrader {{/str}}">
                <svg width="20" height="14" viewBox="0 0 20 14" fill="none" stroke="currentColor" stroke-width="1.5">
                    <line x1="3" y1="11" x2="14" y2="3"/>
                    <polygon points="17,3 12,2 13,6" fill="currentColor" stroke="none"/>
                </svg>
            </button>
            <button type="button" class="btn btn-sm btn-outline-secondary p-1"
                    data-tool="shape" data-shape="line"
                    title="{{#str}} annotate_shape_line, local_unifiedgrader {{/str}}">
                <svg width="20" height="14" viewBox="0 0 20 14" fill="none" stroke="currentColor" stroke-width="1.5">
                    <line x1="3" y1="11" x2="17" y2="3" stroke-linecap="round"/>
                </svg>
            </button>
        </div>
    </div>

    {{! Stamp palette }}
    <div class="btn-group btn-group-sm" role="group"
         aria-label="{{#str}} annotate_stamps, local_unifiedgrader {{/str}}"
         data-region="stamp-selector">
        <button type="button" class="btn btn-outline-secondary" data-tool="stamp" data-stamp="CHECK"
                title="{{#str}} annotate_stamp_check, local_unifiedgrader {{/str}}">&#10003;</button>
        <button type="button" class="btn btn-outline-secondary" data-tool="stamp" data-stamp="CROSS"
                title="{{#str}} annotate_stamp_cross, local_unifiedgrader {{/str}}">&#10007;</button>
        <button type="button" class="btn btn-outline-secondary" data-tool="stamp" data-stamp="QUESTION"
                title="{{#str}} annotate_stamp_question, local_unifiedgrader {{/str}}">?</button>
    </div>

    {{! Separator }}
    <div class="vr mx-1" style="height: 24px;"></div>

    {{! Colour picker }}
    <div class="d-flex align-items-center gap-1" data-region="color-picker">
        <button type="button" class="btn btn-sm p-0 rounded-circle annotation-color-btn active"
                data-color="#EF4540" style="background:#EF4540;"
                title="{{#str}} annotate_red, local_unifiedgrader {{/str}}">
            <span class="visually-hidden">{{#str}} annotate_red, local_unifiedgrader {{/str}}</span>
        </button>
        <button type="button" class="btn btn-sm p-0 rounded-circle annotation-color-btn"
                data-color="#FFCF35" style="background:#FFCF35;"
                title="{{#str}} annotate_yellow, local_unifiedgrader {{/str}}">
            <span class="visually-hidden">{{#str}} annotate_yellow, local_unifiedgrader {{/str}}</span>
        </button>
        <button type="button" class="btn btn-sm p-0 rounded-circle annotation-color-btn"
                data-color="#98CA3E" style="background:#98CA3E;"
                title="{{#str}} annotate_green, local_unifiedgrader {{/str}}">
            <span class="visually-hidden">{{#str}} annotate_green, local_unifiedgrader {{/str}}</span>
        </button>
        <button type="button" class="btn btn-sm p-0 rounded-circle annotation-color-btn"
                data-color="#7D9FD3" style="background:#7D9FD3;"
                title="{{#str}} annotate_blue, local_unifiedgrader {{/str}}">
            <span class="visually-hidden">{{#str}} annotate_blue, local_unifiedgrader {{/str}}</span>
        </button>
        <button type="button" class="btn btn-sm p-0 rounded-circle annotation-color-btn"
                data-color="#333333" style="background:#333333;"
                title="{{#str}} annotate_black, local_unifiedgrader {{/str}}">
            <span class="visually-hidden">{{#str}} annotate_black, local_unifiedgrader {{/str}}</span>
        </button>
    </div>

    {{! Separator }}
    <div class="vr mx-1" style="height: 24px;"></div>

    {{! Undo / Redo }}
    <div class="btn-group btn-group-sm" role="group">
        <button type="button" class="btn btn-outline-secondary" data-action="undo" disabled
                title="{{#str}} annotate_undo, local_unifiedgrader {{/str}}">
            <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
                <path d="M8 3a5 5 0 1 1-4.546 2.914.5.5 0 0 0-.908-.418A6 6 0 1 0 8 2v1z"/>
                <path d="M8 4.466V.534a.25.25 0 0 0-.41-.192L5.23 2.308a.25.25 0 0 0 0 .384l2.36 1.966A.25.25 0 0 0 8 4.466z"/>
            </svg>
        </button>
        <button type="button" class="btn btn-outline-secondary" data-action="redo" disabled
                title="{{#str}} annotate_redo, local_unifiedgrader {{/str}}">
            <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor" style="transform: scaleX(-1);">
                <path d="M8 3a5 5 0 1 1-4.546 2.914.5.5 0 0 0-.908-.418A6 6 0 1 0 8 2v1z"/>
                <path d="M8 4.466V.534a.25.25 0 0 0-.41-.192L5.23 2.308a.25.25 0 0 0 0 .384l2.36 1.966A.25.25 0 0 0 8 4.466z"/>
            </svg>
        </button>
    </div>

    {{! Delete selected }}
    <button type="button" class="btn btn-sm btn-outline-secondary" data-action="delete-selected" disabled
            title="{{#str}} annotate_delete, local_unifiedgrader {{/str}}">
        <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
            <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/>
            <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4L4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/>
        </svg>
    </button>

    {{! Clear all }}
    <button type="button" class="btn btn-sm btn-outline-danger" data-action="clear-annotations"
            title="{{#str}} annotate_clearall, local_unifiedgrader {{/str}}">
        {{#str}} annotate_clearall, local_unifiedgrader {{/str}}
    </button>

    {{! Spacer to push info button to far right }}
    <div class="flex-grow-1"></div>

    {{! Search toggle }}
    <button type="button" class="btn btn-sm btn-outline-secondary" data-action="search-toggle"
            title="{{#str}} pdf_search, local_unifiedgrader {{/str}}">
        <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
            <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
        </svg>
    </button>

    {{! Document info }}
    <div class="position-relative" data-region="doc-info-wrapper">
        <button type="button" class="btn btn-sm btn-outline-secondary" data-action="doc-info"
                title="{{#str}} docinfo, local_unifiedgrader {{/str}}">
            <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
                <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
                <path d="M8.93 6.588l-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>
            </svg>
        </button>
        <div data-region="doc-info-popout" class="d-none local-unifiedgrader-docinfo-popout"></div>
    </div>

</div>
