{{--
    [#39388] Panel phải「操作マニュアル」của wizard PC接続 (C-15, E-042).

    Mỗi bước MỘT video riêng (QA-spec-021 = (A)) — nguồn tra theo `connectStep` trong
    `config('sns-line.change_bot_wizard_manual.videos')`.

    Bước 1–4 đã có video (dev bổ sung 2026-09-04); bước 5「接続チェック」CHƯA có.
    Bước nào chưa có `video_url` thì ẨN khối video + nút「スマホで見る」(TD §10: không phát
    video sai bước), nhưng VẪN giữ 3 nút còn lại vì「途中保存」/「テキストマニュアルを見る」/
    「新規接続に関する問い合わせ」không phụ thuộc video.
--}}
<div class="cbv2-wiz__side cbv2-wiz-manual" key="side-manual">
    <div class="cbv2-wiz-manual__head">
        <lme-icon file_name="play-circle-outlined" size="20"></lme-icon>
        <span class="cbv2-wiz-manual__title">操作マニュアル</span>
    </div>

    {{-- Khối video — chỉ hiện khi bước hiện tại đã có nội dung.
         Style `.cbv2-video-*` nằm trong change_new_v2.css (bản riêng của change-bot, giá trị
         copy từ add-bot để nhìn y hệt — KHÔNG dùng chung file với add-bot). --}}
    <div class="cbv2-video-thumb cbv2-wiz-manual__video" v-if="currentStepVideo" @click="openFloatingPlayer">
        <img class="cbv2-wiz-manual__thumb" v-if="currentStepVideo.thumbnail_url" :src="currentStepVideo.thumbnail_url" alt="">
        <lme-icon file_name="play-circle-filled" size="40" color="#ffffff"></lme-icon>
        <span class="cbv2-video-label">
            <lme-icon file_name="play-circle-filled" size="12" color="#ffffff"></lme-icon>操作動画を見る
        </span>
        <span class="cbv2-video-duration" v-if="currentStepVideo.duration">@{{ currentStepVideo.duration }}</span>
    </div>

    <div class="cbv2-wiz-manual__actions">
        <lme-button-flat size="md" v-if="currentStepVideo" @click="openVideoQrModal">
            <lme-icon file_name="mobile-outlined"></lme-icon> スマホで見る
        </lme-button-flat>
        <lme-button-flat size="md" @click="openTextManual">
            <lme-icon file_name="file-text-outlined"></lme-icon> テキストマニュアルを見る
        </lme-button-flat>
        <span style="width: 100%; height: 1px; background: #dddddd; margin: 8px 0"></span>
        <lme-button-flat size="md" @click="saveWizardProgress">
            <lme-icon file_name="save-outlined"></lme-icon> 途中保存
        </lme-button-flat>
        <lme-button-flat size="md" @click="openSupportForm">
            <lme-icon file_name="question-circle-outlined"></lme-icon> 新規接続に関する問い合わせ
        </lme-button-flat>
    </div>
</div>