{{-- Right-hand annotation panel of the editor. All behaviour lives in xray-annotation-editor.js. --}}
<div class="xrt-card">
    <div class="xrt-card-header"><span>Target</span></div>
    <div class="xrt-card-body">
        <div class="mb-3">
            <label class="xrt-label" for="view-select">X-ray view</label>
            <select class="form-select form-select-sm" id="view-select">
                @foreach ($case->views as $index => $candidate)
                    <option value="{{ $index }}" @selected($candidate->id === $view->id)>{{ $candidate->label() }}</option>
                @endforeach
            </select>
        </div>

        <div class="mb-2">
            <label class="xrt-label" for="item-select">Item of interest</label>
            <select class="form-select form-select-sm" id="item-select">
                <option value="">— Select object —</option>
                @foreach ($items as $item)
                    <option value="{{ $item->id }}" data-name="{{ $item->name }}">
                        {{ $item->name }}{{ $item->category ? ' · '.$item->category : '' }}
                    </option>
                @endforeach
            </select>
            <div class="xrt-meta mt-1" id="mark-hint">Choose the object you are about to mark.</div>
        </div>

        <div class="d-flex flex-wrap gap-2 mb-2">
            @can(\App\Support\Permissions::ANNOTATIONS_CREATE)
                <button type="button" class="btn btn-sm btn-primary" id="btn-mark"><i class="bi bi-bounding-box"></i> Mark Target</button>
            @else
                <button type="button" class="btn btn-sm btn-primary" id="btn-mark" hidden></button>
            @endcan
            <button type="button" class="btn btn-sm btn-outline-secondary" id="btn-cancel-draw" hidden><i class="bi bi-x-lg"></i> Cancel drawing</button>
            @can(\App\Support\Permissions::ITEMS_CREATE)
                <a class="btn btn-sm btn-outline-secondary" id="create-item-link" href="#"><i class="bi bi-plus-lg"></i> Create Item</a>
            @endcan
        </div>

        <div id="editor-status" class="small mt-2 text-secondary">Select an item and click “Mark Target”, or click a target on the image.</div>
    </div>
</div>

<form class="xrt-card mt-3" id="annotation-form" hidden>
    <div class="xrt-card-header"><span id="form-title">Target</span></div>
    <div class="xrt-card-body">
        <ul class="alert alert-danger py-2 ps-4 mb-2" id="form-errors" hidden></ul>

        <div class="row g-2 mb-2">
            <div class="col-6 col-sm-3">
                <label class="xrt-label" for="f-x">X %</label>
                <input class="form-control form-control-sm xrt-coord-input" id="f-x" type="number" step="0.01" min="0" max="100">
            </div>
            <div class="col-6 col-sm-3">
                <label class="xrt-label" for="f-y">Y %</label>
                <input class="form-control form-control-sm xrt-coord-input" id="f-y" type="number" step="0.01" min="0" max="100">
            </div>
            <div class="col-6 col-sm-3">
                <label class="xrt-label" for="f-w">W %</label>
                <input class="form-control form-control-sm xrt-coord-input" id="f-w" type="number" step="0.01" min="0.5" max="100">
            </div>
            <div class="col-6 col-sm-3">
                <label class="xrt-label" for="f-h">H %</label>
                <input class="form-control form-control-sm xrt-coord-input" id="f-h" type="number" step="0.01" min="0.5" max="100">
            </div>
        </div>

        <div class="row g-2 mb-2">
            <div class="col-sm-5">
                <label class="xrt-label" for="f-label-position">Label</label>
                <select class="form-select form-select-sm" id="f-label-position">
                    <option value="">Top (default)</option>
                    @foreach ($labelPositions as $position)
                        <option value="{{ $position }}">{{ ucfirst($position) }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-sm-7">
                <label class="xrt-label" for="f-notes">Notes</label>
                <input class="form-control form-control-sm" id="f-notes" maxlength="2000" placeholder="Optional">
            </div>
        </div>

        <div class="d-flex flex-wrap gap-2 pt-2 border-top">
            <button type="submit" class="btn btn-sm btn-primary" id="btn-save"><i class="bi bi-check-lg"></i> Save</button>
            <button type="button" class="btn btn-sm btn-outline-secondary" id="btn-cancel">Cancel</button>
            <button type="button" class="btn btn-sm btn-outline-danger ms-auto" id="btn-delete" hidden><i class="bi bi-trash"></i> Delete</button>
        </div>
    </div>
</form>

<div class="xrt-card mt-3">
    <div class="xrt-card-header">
        <span>Annotations <span class="badge text-bg-light" id="annotation-count">0</span></span>
        <span class="xrt-meta">on <span id="current-view-label-list">{{ $view->label() }}</span></span>
    </div>
    <div class="xrt-card-body xrt-annotation-list" id="annotation-list"></div>
</div>