{# Attach context to the task being created. Draft mode: picks collect in #}
{# form.context and are sent with the create request -- there is no task #}
{# id to attach to yet. Always shown: the Files tab needs no workspace dir. #}
<div class="col-12">
    <label class="form-label d-flex align-items-center mb-1">
        <span x-text="$i18n('ctx_attached')"></span>
        <span class="badge bg-azure-lt ms-2" x-show="form.context.length" x-text="form.context.length"></span>
        <button type="button" class="btn btn-sm btn-outline-primary ms-auto" @click="openPicker(null)">
            <i class="ti ti-paperclip me-1"></i>
            <span x-text="$i18n('ctx_attach')"></span>
        </button>
    </label>
    {# x-show on a neutral wrapper -- .d-flex is !important and would override display:none. #}
    <div x-show="form.context.length" x-cloak>
    <div class="d-flex flex-wrap gap-1">
        <template x-for="(c, idx) in form.context" :key="c.path">
            <span class="badge d-inline-flex align-items-center context-chip bg-azure-lt"
                  :title="c.note ? `${c.path}\n${c.note}` : c.path">
                <i class="ti me-1" :class="contextChipIcon(c)"></i>
                <button type="button" class="context-chip-label" @click="openContext(c)" x-text="c.label"></button>
                <button type="button" class="context-chip-close ms-1" :aria-label="$i18n('ctx_detach')"
                        @click.stop="form.context.splice(idx, 1)">
                    <i class="ti ti-x"></i>
                </button>
            </span>
        </template>
    </div>
    </div>
</div>