{{-- ────────────────────────────── ENTITY NOTES ─────────────────────────
     Reusable notes section for investor + startup show pages.

     Layout choices made for compactness:
       - The "add note" trigger is a small `+` icon button inline with
         the section count (top-right of the card header) — it does NOT
         live in the body. Click flips the card body into composer mode.
       - Each note footer stacks vertically: author + timestamp on top,
         edit/delete actions BELOW that. Cleaner read on narrow widths
         and avoids the action buttons crowding the metadata.

     Caller passes:
       - $subjectType   string  'investor' | 'startup'
       - $subjectId     int     entity primary key
       - $notes         Collection<EntityNote>
       - $sectionTitle  string  i18n'd section heading (e.g. "ملاحظات")
─────────────────────────────────────────────────────────────────────── --}}
<section class="rd-card" id="sec-notes" data-collapse-key="{{ $subjectType }}.notes" data-open="true"
         x-data="entityNotes({
            subjectType: @js($subjectType),
            subjectId:   @js($subjectId),
            initial:     @js($notes->map(fn ($n) => [
                'id'    => $n->id,
                'body'  => $n->body,
                'created_at_human' => $n->created_at?->diffForHumans(),
                'admin' => $n->admin ? ['id' => $n->admin->id, 'name' => $n->admin->name, 'email' => $n->admin->email] : null,
            ])->all()),
            urls: {
                store:   @js(route('admin.notes.store')),
                base:    @js(url('admin/notes')),
            },
            csrf:   @js(csrf_token()),
            i18n:   @js([
                'placeholder' => __('admin.notes.placeholder'),
                'save'        => __('admin.notes.save'),
                'cancel'      => __('admin.actions.cancel'),
                'add'         => __('admin.notes.add'),
                'edit'        => __('admin.actions.edit'),
                'delete'      => __('admin.actions.delete'),
                'confirm_delete' => __('admin.notes.confirm_delete'),
                'failed'      => __('admin.notes.failed'),
                'empty'       => __('admin.notes.empty'),
                'anonymous'   => __('admin.logs.guest'),
            ]),
         })">
    {{-- Header: title + count + the "+ add" icon button.
         The `+` button stops the collapse-toggle that the head normally
         triggers (event.stopPropagation in startAdd). The rd-card head
         is itself a <button>, so we render the + as a *nested* span
         with role=button to keep semantics valid. --}}
    <button type="button" class="rd-card__head">
        <h3 class="rd-card__title">
            <span class="rd-card__icon"><svg><use href="#icon-text"/></svg></span>
            {{ $sectionTitle }}
        </h3>
        <span class="rd-card__meta">
            <span class="rd-card__count" x-text="notes.length">{{ $notes->count() }}</span>
            <span class="rd-notes-add-btn"
                  role="button"
                  tabindex="0"
                  :aria-label="i18n.add"
                  :title="i18n.add"
                  @click.stop="startAdd()"
                  @keydown.enter.stop.prevent="startAdd()"
                  @keydown.space.stop.prevent="startAdd()">
                +
            </span>
            <span class="rd-card__chevron"><svg width="18" height="18"><use href="#icon-chevron"/></svg></span>
        </span>
    </button>

    <div class="rd-card__body-wrap"><div class="rd-card__body">
        {{-- Inline composer (shown after the + button is clicked) --}}
        <div class="rd-notes-composer" x-show="adding" x-cloak x-transition.opacity>
            <textarea
                x-model="draft"
                x-ref="composer"
                :placeholder="i18n.placeholder"
                rows="3"
                :disabled="busy"
                class="rd-notes-textarea"></textarea>
            <div class="rd-notes-composer__bar">
                <button type="button" class="rd-notes-btn rd-notes-btn--ghost" @click="cancelAdd()" :disabled="busy">
                    <span x-text="i18n.cancel"></span>
                </button>
                <button type="button" class="rd-notes-btn rd-notes-btn--primary" @click="submitAdd()"
                        :disabled="busy || ! draft.trim()">
                    <span x-text="busy ? '…' : i18n.save"></span>
                </button>
            </div>
        </div>

        {{-- Empty state --}}
        <p class="rd-notes-empty" x-show="notes.length === 0 && ! adding" x-cloak>
            <span x-text="i18n.empty"></span>
        </p>

        {{-- Notes list — newest first --}}
        <ul class="rd-notes-list" x-show="notes.length > 0" x-cloak>
            <template x-for="note in notes" :key="note.id">
                <li class="rd-note">
                    {{-- Display mode --}}
                    <div x-show="editingId !== note.id">
                        <p class="rd-note__body" x-text="note.body"></p>

                        {{-- Managed-Agent [AI] badge (Part 8) — clickable Run ID. --}}
                        <template x-if="note.agent_run_id">
                            <a :href="'{{ url('admin/agents/runs') }}/' + note.agent_run_id"
                               class="badge" style="--badge-color:#4f46e5;text-decoration:none;display:inline-block;margin:2px 0 6px;">
                                🤖 AI · Run #<span x-text="note.agent_run_id"></span>
                            </a>
                        </template>

                        {{-- Footer: author + timestamp on one side,
                             edit/delete buttons on the other — single row,
                             space-between. Wraps gracefully on narrow
                             widths so the actions don't get pushed off. --}}
                        <div class="rd-note__footer">
                            <span class="rd-note__author">
                                <strong x-text="note.admin?.name ?? i18n.anonymous"></strong>
                                <span class="muted">·</span>
                                <span class="rd-note__time" x-text="note.created_at_human"></span>
                            </span>
                            <span class="rd-note__actions">
                                {{-- Icon-only buttons. Label text removed
                                     per UX; the `title` + `aria-label`
                                     keep the action discoverable for
                                     tooltips + screen readers. --}}
                                <button type="button" class="rd-note__btn rd-note__btn--edit"
                                        @click="startEdit(note)"
                                        :title="i18n.edit"
                                        :aria-label="i18n.edit">
                                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                                        <path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 1 1 3 3L7 19l-4 1 1-4 12.5-12.5z"/>
                                    </svg>
                                </button>
                                <button type="button" class="rd-note__btn rd-note__btn--delete"
                                        @click="deleteOne(note)"
                                        :title="i18n.delete"
                                        :aria-label="i18n.delete">
                                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                                        <polyline points="3 6 5 6 21 6"/>
                                        <path d="M19 6l-2 14a2 2 0 0 1-2 2H9a2 2 0 0 1-2-2L5 6"/>
                                        <path d="M10 11v6"/><path d="M14 11v6"/>
                                        <path d="M9 6V4a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2"/>
                                    </svg>
                                </button>
                            </span>
                        </div>
                    </div>

                    {{-- Edit mode (inline) --}}
                    <div x-show="editingId === note.id" x-cloak>
                        <textarea
                            x-model="editDraft"
                            rows="3"
                            :disabled="busy"
                            class="rd-notes-textarea"></textarea>
                        <div class="rd-notes-composer__bar">
                            <button type="button" class="rd-notes-btn rd-notes-btn--ghost" @click="cancelEdit()" :disabled="busy">
                                <span x-text="i18n.cancel"></span>
                            </button>
                            <button type="button" class="rd-notes-btn rd-notes-btn--primary" @click="submitEdit(note)"
                                    :disabled="busy || ! editDraft.trim()">
                                <span x-text="busy ? '…' : i18n.save"></span>
                            </button>
                        </div>
                    </div>
                </li>
            </template>
        </ul>
    </div></div>
</section>