{# ---- Context picker: attach an entry to a task ---------------------- #}
<div class="modal modal-blur" :class="{ 'show d-block': picker.open }" x-cloak
     @keydown.escape.window="picker.open = false">
    <div class="modal-dialog modal-lg modal-dialog-scrollable" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="ti ti-paperclip me-2"></i>
                    <span x-text="$i18n('ctx_attach_context')"></span>
                    {# Draft mode (no target yet): picks land in the new-task form. #}
                    <span class="text-secondary ms-2" :class="picker.target && 'font-monospace'"
                          x-text="picker.target ? '#' + picker.target.id : $i18n('new_task')"></span>
                </h5>
                <button type="button" class="btn-close" @click="picker.open = false" :aria-label="$i18n('close')"></button>
            </div>
            <div class="modal-body">
                <ul class="nav nav-bordered mb-3" role="tablist">
                    <template x-for="tab in pickerTabs" :key="tab.id">
                        <li class="nav-item">
                            <a href="#" class="nav-link" role="tab" :class="{ 'active': picker.tab === tab.id }"
                               @click.prevent="picker.tab = tab.id; picker.q = ''">
                                <i class="ti me-1" :class="tab.icon"></i>
                                <span x-text="$i18n(tab.label)"></span>
                            </a>
                        </li>
                    </template>
                </ul>

                <input type="search" class="form-control mb-2" x-model="picker.q" x-show="picker.tab !== 'files'"
                       :placeholder="$i18n('ctx_search')">
                {# Local files: the OS dialog does the browsing -- server and browser #}
                {# share a desktop, so the server can open it and report the path.   #}
                {# Fallback for everything else: paste one.                          #}
                <template x-if="picker.tab === 'files'">
                    <div class="mb-3">
                        <div class="small text-secondary mb-2" x-text="$i18n('ctx_file_hint')"></div>
                        <template x-if="pickerNative">
                            <div class="d-flex flex-wrap gap-2 align-items-center mb-3">
                                <button type="button" class="btn btn-primary"
                                        :disabled="picker.picking || picker.busy" @click="pickNative(false)">
                                    <i class="ti ti-folder-open me-1"></i>
                                    <span x-text="$i18n('ctx_file_choose')"></span>
                                </button>
                                <button type="button" class="btn btn-primary"
                                        :disabled="picker.picking || picker.busy" @click="pickNative(true)">
                                    <i class="ti ti-folder me-1"></i>
                                    <span x-text="$i18n('ctx_file_choose_folder')"></span>
                                </button>
                                <span class="small text-secondary" x-show="picker.picking">
                                    <span class="spinner-border spinner-border-sm me-1"></span>
                                    <span x-text="$i18n('ctx_file_picking')"></span>
                                </span>
                            </div>
                        </template>
                        <div class="small text-secondary mb-1" x-show="pickerNative" x-text="$i18n('ctx_or_path')"></div>
                        <div class="input-group">
                            <input type="text" class="form-control font-monospace" x-model="picker.path"
                                   :placeholder="$i18n('ctx_file_path_placeholder')"
                                   @keydown.enter.prevent="attachPaths(picker.path)">
                            <button type="button" class="btn"
                                    :class="pickerNative ? 'btn-outline-secondary' : 'btn-primary'"
                                    :disabled="picker.busy || !picker.path.trim()" @click="attachPaths(picker.path)">
                                <i class="ti ti-plus me-1"></i>
                                <span x-text="$i18n('ctx_file_add')"></span>
                            </button>
                        </div>
                    </div>
                </template>
                {# One note applies to the next attachment -- "why is this here" is what #}
                {# the agent reads, and once per file is the realistic amount of effort. #}
                <input type="text" class="form-control mb-3" x-model="picker.note" :placeholder="$i18n('ctx_note_placeholder')">

                {# A row toggles: attached -> detach, not attached -> attach. #}
                <div class="list-group list-group-flush" x-show="picker.tab !== 'files'">
                    <template x-for="item in pickerItems.slice(0, 100)" :key="item.path">
                        <button type="button" class="list-group-item list-group-item-action d-flex align-items-center"
                                :disabled="picker.busy" @click="toggleContext(item)">
                            <i class="ti me-2 text-secondary" :class="contextChipIcon(item)"></i>
                            <span class="flex-fill context-min-w-0">
                                <span class="d-block text-truncate fw-bold" x-text="item.label"></span>
                                <span class="d-block text-truncate text-secondary small" x-text="item.sub"></span>
                            </span>
                            <i class="ti ti-check text-green fs-2 ms-2" x-show="isAttached(item.path)"></i>
                            <i class="ti ti-plus text-secondary ms-2" x-show="!isAttached(item.path)"></i>
                        </button>
                    </template>
                    <div class="list-group-item text-secondary text-center" x-show="!pickerItems.length"
                         x-text="$i18n('ctx_no_match')"></div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-sm btn-primary" @click="picker.open = false" x-text="$i18n('close')"></button>
            </div>
        </div>
    </div>
</div>
<div class="modal-backdrop fade show" x-show="picker.open" x-cloak @click="picker.open = false"></div>