{{--
    wiz Step2 サブヘルプ画面 (topbar + トラブルシューティング content + 右サイドバー) — SCR-19 (404) と
    「プロバイダー不一致」ヘルプ (Task #36412) で共通利用. Figma: 404=旧SCR-19, プロバイダー=6412:6320.
    右サイドバー (操作マニュアル) は全呼び出し元で同一 params のため本 partial 内に固定 include.
    依存 (bot_add_v5.blade.php @push 済): lme-icon.js / lme-button-ghost.js / lme-button-default.js / openUrl().
    Params:
      $topbarStep    : int          — 既定 2 (「Step {n}/5」表示)
      $title         : ?string      — 見出し (h2). null で非表示 (プロバイダー版は caution box 内のみ)
      $subtitle      : ?string      — h2 直下の説明文. $title が null なら無視
      $alertTitle    : string       — caution box 内の赤字タイトル
      $causesHeading : string       — 既定「考えられる原因」
      $causes        : string[]     — 箇条書きの原因リスト
      $videoMode     : string       — 'player' (YouTube iframe 埋め込み) | 'thumb' (静的サムネイル)
      $videoId       : ?string      — 'player' モード時に埋め込む YouTube 動画 ID (youtu.be/{id})
      $videoTitle    : string       — 動画セクションの見出し
      $videoLabel    : ?string      — thumb モード時、左下に出すラベル
      $videoDuration : ?string      — thumb モード時、右下に出す再生時間
      $backLabel     : string       — 左フッターボタン (lme-button-ghost, left-outlined)
      $backHandler   : string       — 左フッターボタンの @click ハンドラ名
      $primaryLabel  : string       — 右フッターボタン (lme-button-default, check-outlined)
      $primaryHandler: string       — 右フッターボタンの @click ハンドラ名
--}}
@php
    $topbarStep    = $topbarStep ?? 2;
    $title         = $title ?? null;
    $subtitle      = $subtitle ?? null;
    $causesHeading = $causesHeading ?? '考えられる原因';
    $causes        = $causes ?? [];
    $videoMode     = $videoMode ?? 'player';
    $videoId       = $videoId ?? null;
    $videoLabel    = $videoLabel ?? null;
    $videoDuration = $videoDuration ?? null;
@endphp
<div class="wiz-main">
    <div class="wiz-topbar">
{{--        <span>--}}
{{--            <lme-icon size="14">--}}
{{--                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">--}}
{{--                    <g clip-path="url(#clip0_6075_5982)">--}}
{{--                    <path d="M5.83301 18.334H14.1663" stroke="#1F1F1F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>--}}
{{--                    <path d="M1.6665 14.167V3.33366C1.6665 2.89163 1.8421 2.46771 2.15466 2.15515C2.46722 1.84259 2.89114 1.66699 3.33317 1.66699H16.6665C17.1085 1.66699 17.5325 1.84259 17.845 2.15515C18.1576 2.46771 18.3332 2.89163 18.3332 3.33366V14.167C18.3332 14.609 18.1576 15.0329 17.845 15.3455C17.5325 15.6581 17.1085 15.8337 16.6665 15.8337H3.33317C2.89114 15.8337 2.46722 15.6581 2.15466 15.3455C1.8421 15.0329 1.6665 14.609 1.6665 14.167Z" stroke="#1F1F1F" stroke-width="1.5"/>--}}
{{--                    </g>--}}
{{--                    <defs>--}}
{{--                    <clipPath id="clip0_6075_5982">--}}
{{--                    <rect width="20" height="20" fill="white"/>--}}
{{--                    </clipPath>--}}
{{--                    </defs>--}}
{{--                </svg>--}}
{{--            </lme-icon>--}}
{{--            PC接続ウィザード--}}
{{--        </span>--}}
        <span class="wiz-topbar-progress">Step {{ $topbarStep }}/<span style="font-size: 12px; color: #878A92; font-weight: 400">5</span></span>
    </div>
    <div class="wiz-content">
        @if($title)
        <h2 class="wiz-h2">{{ $title }}</h2>
        @endif
        @if($subtitle)
        <p class="wiz-sub">{{ $subtitle }}</p>
        @endif
        <div class="wiz-caution-box">
            <div class="wiz-caution-title"><lme-icon file_name="warning-circle-outlined" size="24" color="#FF4D4F"></lme-icon> {{ $alertTitle }}</div>
            <div class="wiz-caution-sub">{{ $causesHeading }}</div>
            <ul class="wiz-causes-list">
                @foreach($causes as $cause)
                <li>{{ $cause }}</li>
                @endforeach
            </ul>
        </div>
        <div class="wiz-form-card">
            <div class="wiz-form-card-title"><lme-icon file_name="play-circle-outlined" color="#1677FF" size="20"></lme-icon>{{ $videoTitle }}</div>
            @if($videoMode === 'thumb')
            <div class="wiz-video-thumb wiz-video-thumb-lg" @click="openVideoPanel('{{ $videoLabel ?? $videoTitle }}')">
                <lme-icon file_name="play-circle-filled" size="80" color="#ffffff"></lme-icon>
                @if($videoLabel)
                <span class="wiz-video-label"><lme-icon file_name="play-circle-filled" size="12" color="#ffffff"></lme-icon>{{ $videoLabel }}</span>
                @endif
                @if($videoDuration)
                <span class="wiz-video-duration">{{ $videoDuration }}</span>
                @endif
            </div>
            @else
            <div class="wiz-video-wrap">
                <iframe src="https://player.vimeo.com/video/{{ $videoId }}?share=copy&fl=sv&fe=ci"
                    title="{{ $videoTitle }}"
                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                    allowfullscreen
                    style="position:absolute;top:0;left:0;width:100%;height:100%;border:none;"></iframe>
            </div>
            @endif
        </div>
        {{-- Info box LINE Official Account Manager (nội dung chung cho mọi topic sub-help) --}}
        <div class="wiz-info-box">
            <div class="wiz-info-box-body">
                <div class="wiz-info-title">
                    <lme-icon size="20px" color="#1677FF">
                        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M10.0002 18.7505C5.17535 18.7505 1.25 14.8251 1.25 10.0002C1.25 5.17535 5.17535 1.25 10.0002 1.25C14.8251 1.25 18.7505 5.17535 18.7505 10.0002C18.7505 14.8251 14.8251 18.7505 10.0002 18.7505ZM10.0002 2.73387C5.99356 2.73387 2.73387 5.99356 2.73387 10.0002C2.73387 14.0063 5.99356 17.2655 10.0002 17.2655C14.0063 17.2655 17.2655 14.0063 17.2655 10.0002C17.2655 5.99356 14.0063 2.73387 10.0002 2.73387Z" fill="#1677FF"/>
                            <path d="M9.99963 14.3752C9.48289 14.3752 9.0625 13.9543 9.0625 13.437C9.0625 12.9203 9.48289 12.4999 9.99963 12.4999C10.517 12.4999 10.9379 12.9203 10.9379 13.437C10.9379 13.9543 10.517 14.3752 9.99963 14.3752ZM10.4688 11.25H9.53162C9.4454 11.25 9.37525 11.1798 9.37525 11.0936V5.78137C9.37525 5.69515 9.4454 5.625 9.53162 5.625H10.4688C10.555 5.625 10.6251 5.69515 10.6251 5.78137V11.0936C10.6251 11.1784 10.5535 11.25 10.4688 11.25Z" fill="#1677FF"/>
                        </svg>
                    </lme-icon>
                    LINE Official Account Manager</div>
                <div style="font-size: 14px; color: #1F1F1F; font-weight: 400">
                    <span class="notfound-loa-btn">設定</span>
                    <lme-icon>
                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M11.9641 7.6065L4.92031 2.10494C4.8375 2.04088 4.71875 2.09869 4.71875 2.20338V3.41119C4.71875 3.48775 4.75469 3.56119 4.81406 3.60807L10.4391 8.00025L4.81406 12.3924C4.75313 12.4393 4.71875 12.5128 4.71875 12.5893V13.7971C4.71875 13.9018 4.83906 13.9596 4.92031 13.8956L11.9641 8.394C12.2203 8.194 12.2203 7.8065 11.9641 7.6065Z" fill="#1F1F1F"/>
                        </svg>
                    </lme-icon>
                    <span class="notfound-loa-btn">登録情報</span>
                    <lme-icon>
                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M11.9641 7.6065L4.92031 2.10494C4.8375 2.04088 4.71875 2.09869 4.71875 2.20338V3.41119C4.71875 3.48775 4.75469 3.56119 4.81406 3.60807L10.4391 8.00025L4.81406 12.3924C4.75313 12.4393 4.71875 12.5128 4.71875 12.5893V13.7971C4.71875 13.9018 4.83906 13.9596 4.92031 13.8956L11.9641 8.394C12.2203 8.194 12.2203 7.8065 11.9641 7.6065Z" fill="#1F1F1F"/>
                        </svg>
                    </lme-icon>
                    <span class="notfound-loa-btn">管理者情報</span>
                    <span>
                         に表示されているメールアドレスが正しいログイン情報となります。正しいログイン情報でLINE Developersに再ログインしてください。
                    </span>
                </div>
                <div style="margin-top: 12px; color: #878A92; font-size: 12px; font-weight: 400">
                    <lme-icon color="#878A92" size="14">
                        <svg width="9" height="9" viewBox="0 0 9 9" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M4.32031 1.79988C4.07231 1.79988 3.86031 1.71188 3.68431 1.53588C3.50831 1.35988 3.42031 1.14788 3.42031 0.899883C3.42031 0.651882 3.50831 0.439882 3.68431 0.263882C3.86031 0.0878825 4.07231 -0.000117302 4.32031 -0.000117302C4.56831 -0.000117302 4.78031 0.0878825 4.95631 0.263882C5.13231 0.439882 5.22031 0.651882 5.22031 0.899883C5.22031 1.14788 5.13231 1.35988 4.95631 1.53588C4.78031 1.71188 4.56831 1.79988 4.32031 1.79988ZM4.32031 3.97188L8.28031 0.0118825L8.62831 0.359882L4.66831 4.31988L8.62831 8.27988L8.28031 8.62788L4.32031 4.66788L0.348313 8.63988L0.000312507 8.29188L3.97231 4.31988L0.0123125 0.359882L0.360313 0.0118825L4.32031 3.97188ZM1.80031 4.31988C1.80031 4.56788 1.71231 4.77988 1.53631 4.95588C1.36031 5.13188 1.14831 5.21988 0.900313 5.21988C0.652313 5.21988 0.440313 5.13188 0.264313 4.95588C0.0883125 4.77988 0.000312507 4.56788 0.000312507 4.31988C0.000312507 4.07188 0.0883125 3.85988 0.264313 3.68388C0.440313 3.50788 0.652313 3.41988 0.900313 3.41988C1.14831 3.41988 1.36031 3.50788 1.53631 3.68388C1.71231 3.85988 1.80031 4.07188 1.80031 4.31988ZM6.84031 4.31988C6.84031 4.07188 6.92831 3.85988 7.10431 3.68388C7.28031 3.50788 7.49231 3.41988 7.74031 3.41988C7.98831 3.41988 8.20031 3.50788 8.37631 3.68388C8.55231 3.85988 8.64031 4.07188 8.64031 4.31988C8.64031 4.56788 8.55231 4.77988 8.37631 4.95588C8.20031 5.13188 7.98831 5.21988 7.74031 5.21988C7.49231 5.21988 7.28031 5.13188 7.10431 4.95588C6.92831 4.77988 6.84031 4.56788 6.84031 4.31988ZM4.32031 6.83988C4.56831 6.83988 4.78031 6.92788 4.95631 7.10388C5.13231 7.27988 5.22031 7.49188 5.22031 7.73988C5.22031 7.98788 5.13231 8.19988 4.95631 8.37588C4.78031 8.55188 4.56831 8.63988 4.32031 8.63988C4.07231 8.63988 3.86031 8.55188 3.68431 8.37588C3.50831 8.19988 3.42031 7.98788 3.42031 7.73988C3.42031 7.49188 3.50831 7.27988 3.68431 7.10388C3.86031 6.92788 4.07231 6.83988 4.32031 6.83988Z" fill="#878A92"/>
                        </svg>
                    </lme-icon>
                    <span>正しいログイン情報はLINEヤフー株式会社が管理しているため、L Messageのサポートでログイン情報をお調べすることはできません。</span>
                </div>
                <a style="margin-top: 20px" href="https://manager.line.biz/" target="_blank" class="wiz-info-btn">
                    LINE Official Account Managerを開く <lme-icon file_name="export-outlined" class="lme-icon-em"></lme-icon>
                </a>
            </div>
        </div>
        <div class="wiz-footer">
            <lme-button-ghost type="primary" size="md" @click="{{ $backHandler }}">
                <lme-icon file_name="left-outlined" class="lme-icon-em"></lme-icon> {{ $backLabel }}
            </lme-button-ghost>
            <lme-button-default type="primary" size="md" @click="{{ $primaryHandler }}">
                <lme-icon file_name="check-outlined" class="lme-icon-em"></lme-icon> {{ $primaryLabel }}
            </lme-button-default>
        </div>
    </div>
</div>
@include('admin.bots.bot_add_component.wiz-manual-card', ['video' => true, 'docUrl' => 'https://developers.line.biz/console/', 'mobile' => true, 'draft' => true])