{{-- フォーム回答 --}}
<div class="fd-card" v-if="selectedOption.value === 'form'" style="padding: 24px 24px 0; gap: 0">
    <div class="fd-card-table-header">
        <h2 class="fd-card-title">フォーム回答</h2>
        <div class="lme-flex lme-items-center" style="gap: 16px;">
            <lme-button-flat type="primary" size="md" @click.native="onFormEditColumns">
                <lme-icon>
                    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M15.8906 16.0314H2.10949C2.03188 16.0314 1.96875 15.9682 1.96875 15.8906V15.2578C1.96875 14.9474 2.22129 14.6949 2.5317 14.6949H15.4684C15.7788 14.6949 16.0314 14.9474 16.0314 15.2578V15.8906C16.0314 15.9669 15.9669 16.0314 15.8906 16.0314ZM4.53038 13.2186C4.37418 13.2186 4.22922 13.1584 4.1112 13.0445C3.97305 12.9063 3.91291 12.7155 3.94616 12.521L4.46456 9.56453C4.47179 9.52841 4.48848 9.49708 4.51418 9.47137L11.9652 2.01938C11.9978 1.98673 12.0424 1.96875 12.0907 1.96875C12.1384 1.96875 12.1826 1.98673 12.2153 2.01938L15.1363 4.94246C15.1698 4.97592 15.1881 5.02034 15.188 5.06752C15.1878 5.11419 15.1694 5.15788 15.1363 5.19053L7.68532 12.6425C7.66315 12.6666 7.63092 12.6834 7.59218 12.6911L4.63567 13.2095C4.60038 13.2156 4.56496 13.2186 4.53038 13.2186ZM12.0907 3.77909L5.715 10.1528L5.44061 11.7171L7.0029 11.4417L13.3786 5.06801L12.0907 3.77909Z" fill="currentColor"/>
                    </svg>
                </lme-icon>
                <span>表示項目の編集・並び替え</span>
            </lme-button-flat>

            <lme-button-default type="secondary" size="md" @click.native="onFormFilter">
                <lme-icon style="transform: translateY(1px)">
                    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M11.306 15.2934H6.69409C6.38591 15.2934 6.13518 15.0409 6.13518 14.7305V10.5013L2.0457 3.55044C1.94396 3.37417 1.94408 3.16351 2.04604 2.98693C2.14725 2.81167 2.32804 2.70703 2.52968 2.70703H15.4704C15.6717 2.70703 15.8524 2.81169 15.9538 2.987C16.0561 3.16361 16.0567 3.37425 15.9554 3.55044L11.8649 10.5013L11.8649 14.7305C11.8649 15.0409 11.6142 15.2934 11.306 15.2934ZM7.39372 11.2849V14.0278H10.6064L10.6084 11.2849L7.39372 11.2849ZM3.7386 3.97266L7.22464 9.86844L7.39169 10.16H10.6084L10.7755 9.86844L14.2615 3.97266H3.7386Z" fill="currentColor"/>
                    </svg>
                </lme-icon>
                <span>絞り込み</span>
            </lme-button-default>
        </div>
    </div>
    <div class="" style="margin-block: 24px" ref="fdFormTableTop">
        <lme-table class="form-table"
            :columns="formColumns"
            :data-source="formRows"
            row-key="answer_id"
            empty-text="まだデータがありません"
            :fixed-right-count="1"
            max-height="calc(100vh - 478px)">
            <template slot="cell-action_at_answer" slot-scope="{ record }">
                <span v-if="record.action_at_answer || record.message_id"
                      v-on:click="openActionCapturePreview(record.action_at_answer, record.message_id ? [record.message_id] : null)"
                      style="color: #1677FF; cursor: pointer; font-size: 14px; font-weight: 400">プレビュー</span>
                <span v-else style="color: #1F1F1F;">設定なし</span>
            </template>
            <template slot="cell-action_at_page_transition" slot-scope="{ value }">
                <span v-if="value"
                      v-on:click="openActionCapturePreview(value)"
                      style="color: #1677FF; cursor: pointer; font-size: 14px; font-weight: 400">プレビュー</span>
                <span v-else style="color: #1F1F1F;">設定なし</span>
            </template>
            <template slot="cell-actions" slot-scope="{ record }">
                <div class="lme-flex lme-items-center lme-justify-center lme-w-full">
                    <lme-button-default type="secondary" size="sm" @click.native="onFormShowAnswer(record)">
                        <span>回答表示</span>
                    </lme-button-default>
                </div>
            </template>
        </lme-table>
    </div>
    <div class="lme-flex lme-justify-end" style="padding-bottom: 24px">
        <lme-pagination
            :pagination="formPagination"
            :is_limit="true"
            :arr_limit="[10, 20, 50, 100]"
            end_text_limit="件表示"
            @change_page="onFormPageChange"
            @change_limit="onFormLimitChange"></lme-pagination>
    </div>

    {{-- 表示項目の編集・並び替え modal --}}
    <lme-modal v-model="formColumnsModal.show" title="フォーム回答の表示項目の編集・並び替え" :width="560">
        <div class="form-cols-modal">
            <p class="form-cols-desc">フォーム回答リストに表示する項目や表示する順番を選んでください。</p>

            <div class="form-cols-section">
                <div class="form-cols-section-header">
                    <span class="form-cols-section-indicator"></span>
                    <span class="form-cols-section-title">表示する</span>
                </div>
                <draggable
                    v-model="formColumnsModal.draftVisible"
                    class="form-cols-list"
                    :options="{
                        animation: 150,
                        handle: '.drag-handle',
                        chosenClass: 'drag-chosen',
                        ghostClass: 'drag-ghost',
                        dragClass: 'drag-dragging'
                    }"
                    @start="onFormColumnsDragStart"
                    @end="onFormColumnsDragEnd">
                    <div v-for="col in formColumnsModal.draftVisible"
                         :key="col.key"
                         class="form-cols-item">
                        <div class="form-cols-item-action">
                            <lme-icon v-if="!col.required" file-name="minus-circle-filled" :size="24" color="#FF4D4F" style="cursor: pointer;" @click.native="hideFormColumn(col.key)"></lme-icon>
                        </div>
                        <p class="form-cols-item-label">@{{ col.title }}</p>
                        <div class="form-cols-item-drag drag-handle">
                            <lme-icon file-name="dots1" :size="20" color="#1677FF"></lme-icon>
                        </div>
                    </div>
                </draggable>
            </div>

            <div class="form-cols-section">
                <div class="form-cols-section-header">
                    <span class="form-cols-section-indicator"></span>
                    <span class="form-cols-section-title">表示しない</span>
                </div>
                <draggable
                    v-model="formColumnsModal.draftHidden"
                    class="form-cols-list"
                    :options="{
                        animation: 150,
                        handle: '.drag-handle',
                        chosenClass: 'drag-chosen',
                        ghostClass: 'drag-ghost',
                        dragClass: 'drag-dragging'
                    }"
                    @start="onFormColumnsDragStart"
                    @end="onFormColumnsDragEnd">
                    <div v-for="col in formColumnsModal.draftHidden" :key="col.key" class="form-cols-item">
                        <div class="form-cols-item-action">
                            <lme-icon file-name="plus-circle-filled" :size="24" color="#52C41A" style="cursor: pointer;" @click.native="showFormColumn(col.key)"></lme-icon>
                        </div>
                        <p class="form-cols-item-label">@{{ col.title }}</p>
                        <div class="form-cols-item-drag drag-handle">
                            <lme-icon file-name="dots1" :size="20" color="#1677FF"></lme-icon>
                        </div>
                    </div>
                </draggable>
                <p v-if="!formColumnsModal.draftHidden.length" class="form-cols-empty">該当する項目がありません</p>
            </div>

            <div class="form-cols-footer">
                <lme-button-flat type="primary" size="md" @click.native="closeFormColumnsModal" style="padding-inline: 0 !important; width: 74px">
                    <span>閉じる</span>
                </lme-button-flat>

                <lme-button-default type="primary" size="md" @click.native="saveFormColumnsModal">保存</lme-button-default>
            </div>
        </div>
    </lme-modal>

    {{-- 絞り込み v1 modal --}}
    <lme-modal v-model="formFilterModal.show" title="絞り込み" :width="720">
        <div class="fi-filter">
            <div class="fi-filter-panels" style="flex-direction: column; gap: 20px;">
                <div style="width: 100%;">
                    <h4 class="fi-filter-title">該当期間を選択</h4>
                    <lme-range-picker
                        v-model="formFilterModal.dateRange"
                        placeholder="日付を選択"
                        placeholder-end="日付を選択"
                        size="md"
                    ></lme-range-picker>
                </div>
            </div>

            <div class="fi-filter-panels" style="min-height: 240px">
                <div class="fi-filter-panel-folder">
                    <h4 class="fi-filter-title">フォルダ</h4>
                    <div class="fi-filter-folder-list">
                        <div v-for="folder in formFilterModal.folders"
                             :key="folder.id"
                             class="fi-filter-folder-item"
                             :class="{ 'is-active': folder.id === formFilterModal.selectedFolderId }"
                             @click="selectFormFilterFolder(folder.id)">
                            @{{ folder.name }}
                        </div>
                    </div>
                </div>

                <div class="fi-filter-panel-items">
                    <h4 class="fi-filter-title">アイテム</h4>
                    <div class="fi-filter-items">
                        <div v-if="formFilterActiveFolder.loading" class="lme-flex lme-justify-center" style="padding: 16px 0;">
                            読み込み中...
                        </div>
                        <template v-else>
                            <div v-for="item in formFilterActiveFolder.items"
                                 :key="item.form_id"
                                 class="fi-filter-item">
                                <lme-checkbox
                                    :value="item.checked"
                                    :label="item.form_name"
                                    @change="onFormFilterItemChange(item, formFilterActiveFolder.id, $event)"></lme-checkbox>
                            </div>
                        </template>
                    </div>
                </div>
            </div>

            <div class="fi-filter-selected lme-scroll-custom" style="min-height: 110px;max-height: 180px;overflow-y: auto;">
                <h4 class="fi-filter-title">追加する項目</h4>
                <div class="fi-filter-tags">
                    <lme-tag v-for="item in formFilterSelectedItems"
                             :key="item.form_id"
                             :text="item.form_name"
                             type="default"
                             closeable
                             @close="uncheckFormFilterItem(item)"></lme-tag>
                </div>
            </div>

            <div class="fi-filter-footer">
                <span class="fi-filter-count">@{{ formFilterSelectedItems.length }}件　選択中</span>
                <div class="fi-filter-actions">
                    <lme-button-flat type="primary" size="lg" @click.native="closeFormFilterModal" style="padding-inline: 0 !important; width: 112px">
                        <span>キャンセル</span>
                    </lme-button-flat>
                    <lme-button-default type="primary" size="lg" @click.native="saveFormFilterModal" style="padding-inline: 0 !important; width: 112px">表示</lme-button-default>
                </div>
            </div>
        </div>
    </lme-modal>

    {{-- プレビュー drawer dùng chung @ partials/action-capture-preview-drawer.blade.php
         đã được include ở index.blade.php — không cần khai báo lại tại đây.
         Trigger: openActionCapturePreview(record.action_at_answer, [record.message_id]) — case 回答時
                  openActionCapturePreview(record.action_at_page_transition) — case ページ遷移時 --}}

    {{-- 回答内容 drawer --}}
    <lme-drawer v-model="formAnswerDrawer.show" width="420px" title="回答内容">
        <div class="form-answer-drawer">
            <div class="form-answer-body lme-scroll-custom">
                <div class="form-answer-group">
                    <div class="form-answer-field" v-for="field in formAnswerMetaFields" :key="field.label">
                        <p class="form-answer-label">@{{ field.label }}</p>
                        <p class="form-answer-value">@{{ field.value }}</p>
                    </div>
                </div>

                <div v-if="formAnswerDrawer.loading" class="form-answer-group">
                    <p style="color: #878A92;">読み込み中...</p>
                </div>
                <div v-if="!formAnswerDrawer.loading && formAnswerDrawer.answers.length > 0" class="form-answer-group">
                    <div class="form-answer-field" v-for="(field, idx) in formAnswerDrawer.answers" :key="idx">
                        {{-- 区切り線 --}}
                        <hr v-if="field.type === 'line'" class="form-answer-divider">

                        {{-- 説明ブロック (designer-defined) --}}
                        <template v-else-if="field.type === 'description'">
                            <p class="form-answer-label">@{{ field.question }}</p>
                            <p class="form-answer-value" style="color: #878A92;">@{{ field.answer }}</p>
                        </template>

                        {{-- カスタムHTML --}}
                        <template v-else-if="field.type === 'custom_html'">
                            <p class="form-answer-label">@{{ field.question }}</p>
                            <p class="form-answer-value" style="white-space: pre-wrap;">@{{ field.answer }}</p>
                        </template>

                        {{-- 住所 --}}
                        <template v-else-if="field.type === 'address' && field.address">
                            <p class="form-answer-label">@{{ field.question }}</p>
                            <div class="form-answer-address">
                                <p class="form-answer-address-key">郵便番号</p>
                                <p class="form-answer-address-val">@{{ field.address.zip_code || '-' }}</p>
                                <p class="form-answer-address-key">都道府県</p>
                                <p class="form-answer-address-val">@{{ field.address.province || '-' }}</p>
                                <p class="form-answer-address-key">市区町村</p>
                                <p class="form-answer-address-val">@{{ field.address.district || '-' }}</p>
                                <p class="form-answer-address-key">町名・番地</p>
                                <p class="form-answer-address-val">@{{ field.address.township || '-' }}</p>
                                <p class="form-answer-address-key">建物名・部屋番号</p>
                                <p class="form-answer-address-val">@{{ field.address.building || '-' }}</p>
                            </div>
                            <p v-if="field.note" class="form-answer-note">@{{ field.note }}</p>
                        </template>

                        {{-- 画像 ブロック --}}
                        <template v-else-if="field.file_type === 'image'">
                            <div class="form-answer-media-card">
                                <p class="form-answer-media-tag">画像</p>
                                <div class="form-answer-media-row">
                                    <a :href="field.file_url" target="_blank" rel="noopener" class="form-answer-media-thumb">
                                        <img :src="field.file_url" alt="">
                                    </a>
                                    <a :href="field.file_url" :download="field.file_name" class="form-answer-download-btn" :title="field.file_name">
                                        <lme-icon file-name="download-outlined" :size="16" color="#FFFFFF"></lme-icon>
                                    </a>
                                </div>
                            </div>
                            <p v-if="field.note" class="form-answer-note">@{{ field.note }}</p>
                        </template>

                        {{-- 動画 ブロック --}}
                        <template v-else-if="field.file_type === 'video'">
                            <div class="form-answer-media-card">
                                <p class="form-answer-media-tag">動画</p>
                                <div class="form-answer-media-row">
                                    <a :href="field.file_url" target="_blank" rel="noopener" class="form-answer-media-thumb form-answer-media-thumb--video">
                                        <video :src="field.file_url" preload="metadata" muted></video>
                                        <span class="form-answer-media-play">
                                            <lme-icon file-name="play-circle-filled" :size="30" color="#FFFFFF"></lme-icon>
                                        </span>
                                    </a>
                                    <a :href="field.file_url" :download="field.file_name" class="form-answer-download-btn" :title="field.file_name">
                                        <lme-icon file-name="download-outlined" :size="16" color="#FFFFFF"></lme-icon>
                                    </a>
                                </div>
                            </div>
                            <p v-if="field.note" class="form-answer-note">@{{ field.note }}</p>
                        </template>

                        {{-- 音声 ブロック --}}
                        <template v-else-if="field.file_type === 'audio'">
                            <div class="form-answer-media-card">
                                <p class="form-answer-media-tag">音声</p>
                                <div class="form-answer-media-row form-answer-media-row--full">
                                    <div class="form-answer-file-row">
                                        <span class="form-answer-file-icon">
                                            <lme-icon file-name="audio-filled" :size="16" color="#FFFFFF"></lme-icon>
                                        </span>
                                        <span class="form-answer-file-name" :title="field.file_name">@{{ field.file_name }}</span>
                                    </div>
                                    <a :href="field.file_url" :download="field.file_name" class="form-answer-download-btn" :title="field.file_name">
                                        <lme-icon file-name="download-outlined" :size="16" color="#FFFFFF"></lme-icon>
                                    </a>
                                </div>
                                <form-audio-player :src="field.file_url"></form-audio-player>
                            </div>
                            <p v-if="field.note" class="form-answer-note">@{{ field.note }}</p>
                        </template>

                        {{-- PDF ブロック --}}
                        <template v-else-if="field.file_type === 'pdf'">
                            <div class="form-answer-media-card">
                                <p class="form-answer-media-tag">PDF</p>
                                <div class="form-answer-media-row form-answer-media-row--full">
                                    <a :href="field.file_url" target="_blank" rel="noopener" class="form-answer-file-row form-answer-file-row--link">
                                        <span class="form-answer-file-icon form-answer-file-icon--pdf">
                                            <lme-icon file-name="file-pdf-filled" :size="16" color="#FFFFFF"></lme-icon>
                                        </span>
                                        <span class="form-answer-file-name" :title="field.file_name">@{{ field.file_name }}</span>
                                    </a>
                                    <a :href="field.file_url" :download="field.file_name" class="form-answer-download-btn" :title="field.file_name">
                                        <lme-icon file-name="download-outlined" :size="16" color="#FFFFFF"></lme-icon>
                                    </a>
                                </div>
                            </div>
                            <p v-if="field.note" class="form-answer-note">@{{ field.note }}</p>
                        </template>

                        {{-- ファイル ブロック (其他) --}}
                        <template v-else-if="field.file_type === 'file'">
                            <div class="form-answer-media-card">
                                <p class="form-answer-media-tag">ファイル</p>
                                <div class="form-answer-media-row form-answer-media-row--full">
                                    <a :href="field.file_url" target="_blank" rel="noopener" class="form-answer-file-row form-answer-file-row--link">
                                        <span class="form-answer-file-icon">
                                            <lme-icon file-name="file-filled" :size="16" color="#FFFFFF"></lme-icon>
                                        </span>
                                        <span class="form-answer-file-name" :title="field.file_name">@{{ field.file_name }}</span>
                                    </a>
                                    <a :href="field.file_url" :download="field.file_name" class="form-answer-download-btn" :title="field.file_name">
                                        <lme-icon file-name="download-outlined" :size="16" color="#FFFFFF"></lme-icon>
                                    </a>
                                </div>
                            </div>
                            <p v-if="field.note" class="form-answer-note">@{{ field.note }}</p>
                        </template>

                        {{-- デフォルト: テキスト系 --}}
                        <template v-else>
                            <p class="form-answer-label">@{{ field.question }}</p>
                            <p class="form-answer-value">@{{ field.answer || '-' }}</p>
                            <p v-if="field.note" class="form-answer-note">@{{ field.note }}</p>
                        </template>
                    </div>
{{--                    <p v-if="!formAnswerDrawer.answers.length" style="color: #878A92;">回答がありません</p>--}}
                </div>
            </div>

            <div class="form-answer-footer">
                <lme-button-flat type="primary" size="lg" @click.native="closeFormAnswer" style="padding-inline: 0 !important; width: 96px">
                    <span>閉じる</span>
                </lme-button-flat>
            </div>
        </div>
    </lme-drawer>
</div>