{{-- [#38867] CR-01: tiêu đề cảnh báo + icon「i」đỏ · CR-03: restyle khung modal 800x450
     [#40442] Design MỚI chỉ áp khi modal TỰ MỞ sau khi lưu ở STEP④ (isGuideNewDesign = true).
     Mở thủ công bằng nút 「表示方法を確認」 → giữ NGUYÊN design cũ (750px, tiêu đề cũ, không checkbox). --}}
<div class="modal modal-confirm fade" id="modalGuideSetting" role="dialog" data-backdrop="static" data-keyboard="false"
     :class="{'guide-new-design': isGuideNewDesign}">
    <div class="modal-dialog" role="document"
         :style="{height: '100%', width: isGuideNewDesign ? '800px' : '750px', display: 'flex', alignItems: 'center', margin: 'auto'}">
        <div class="modal-content" style="width: 100%">
            <div class="modal-header" style="border-bottom: none">
                <button class="close" data-dismiss="modal" aria-hidden="true" @click="closeModalGuideSetting()"
                        style="opacity: 1;font-size: 27px; border-radius: 5px;">
                    <i class="far fa-times" style="position: relative; bottom: 0px;"></i>
                </button>
                <h2 class="modal-title font-s20 font-w-bold">
                    <template v-if="isGuideNewDesign">
                        <span class="guide-icon-info">i</span>
                        <span class="guide-title-text">リッチメニューを保存しただけでは、友だちには表示されません。</span>
                    </template>
                    <template v-else>リッチメニューの表示方法</template>
                </h2>
            </div>
            <div class="modal-body">
                <div style="margin-left: 20px">
                    <div class="b-item">
                        <div class="b-title">エルメ上に表示されている友だちに表示する設定</div>
                        <div class="b-detail">
                            <span>→ </span>
                            <a href="https://lme.jp/manual/rich_menu/#display" target="_blank" class="underline font-w-bold">リッチメニューTOPページの「表示・停止する」↗</a>
{{--                            <svg style="margin-left: 5px" xmlns="http://www.w3.org/2000/svg" width="12.5" height="12.5" viewBox="0 0 12.5 12.5">--}}
{{--                                <path id="形状" d="M12,12.5H.5A.5.5,0,0,1,0,12V.5A.5.5,0,0,1,.5,0H6.125A.125.125,0,0,1,6.25.125V1a.125.125,0,0,1-.124.125h-5v10.25h10.25v-5A.125.125,0,0,1,11.5,6.25h.875a.127.127,0,0,1,.125.125V12a.5.5,0,0,1-.5.5ZM7.044,6.241A.123.123,0,0,1,6.956,6.2l-.662-.662a.126.126,0,0,1,0-.177l4-4L9.479.545A.125.125,0,0,1,9.553.333l2.8-.328h.015a.124.124,0,0,1,.123.142l-.328,2.8a.126.126,0,0,1-.126.11.123.123,0,0,1-.088-.037l-.813-.82-4,4a.126.126,0,0,1-.092.041Z" fill="#5799db"/>--}}
{{--                            </svg>--}}
                            <span style="font-weight: 400">から表示操作を行ってください。</span>
                        </div>
                    </div>
                    <div class="b-item">
                        <div class="b-title">友だち追加時に自動でリッチメニューを表示する設定</div>
                        <div class="b-detail">
                            <span>→ </span>
                            <a href="https://lme.jp/manual/friend-add-richmenu/" target="_blank" class="underline font-w-bold">あいさつメッセージ↗</a>
{{--                            <svg style="margin-left: 5px" xmlns="http://www.w3.org/2000/svg" width="12.5" height="12.5" viewBox="0 0 12.5 12.5">--}}
{{--                                <path id="形状" d="M12,12.5H.5A.5.5,0,0,1,0,12V.5A.5.5,0,0,1,.5,0H6.125A.125.125,0,0,1,6.25.125V1a.125.125,0,0,1-.124.125h-5v10.25h10.25v-5A.125.125,0,0,1,11.5,6.25h.875a.127.127,0,0,1,.125.125V12a.5.5,0,0,1-.5.5ZM7.044,6.241A.123.123,0,0,1,6.956,6.2l-.662-.662a.126.126,0,0,1,0-.177l4-4L9.479.545A.125.125,0,0,1,9.553.333l2.8-.328h.015a.124.124,0,0,1,.123.142l-.328,2.8a.126.126,0,0,1-.126.11.123.123,0,0,1-.088-.037l-.813-.82-4,4a.126.126,0,0,1-.092.041Z" fill="#5799db"/>--}}
{{--                            </svg>--}}
                            <span>/</span>
                            <a href="https://lme.jp/manual/inflow_route/" target="_blank" class="underline font-w-bold"> QRコードアクション↗</a>
{{--                            <svg style="margin-left: 5px" xmlns="http://www.w3.org/2000/svg" width="12.5" height="12.5" viewBox="0 0 12.5 12.5">--}}
{{--                                <path id="形状" d="M12,12.5H.5A.5.5,0,0,1,0,12V.5A.5.5,0,0,1,.5,0H6.125A.125.125,0,0,1,6.25.125V1a.125.125,0,0,1-.124.125h-5v10.25h10.25v-5A.125.125,0,0,1,11.5,6.25h.875a.127.127,0,0,1,.125.125V12a.5.5,0,0,1-.5.5ZM7.044,6.241A.123.123,0,0,1,6.956,6.2l-.662-.662a.126.126,0,0,1,0-.177l4-4L9.479.545A.125.125,0,0,1,9.553.333l2.8-.328h.015a.124.124,0,0,1,.123.142l-.328,2.8a.126.126,0,0,1-.126.11.123.123,0,0,1-.088-.037l-.813-.82-4,4a.126.126,0,0,1-.092.041Z" fill="#5799db"/>--}}
{{--                            </svg>--}}
                            <span style="font-weight: 400">でリッチメニュー表示アクションを設定してください。</span>
                        </div>
                    </div>
                    <div class="b-item" style="margin-left: -20px">
                        <div class="font-s14 font-w-normal color-text mb-2">※ エルメで設定したリッチメニューは、エルメ上に表示されていない友だちには表示されません。</div>
                        <div class="font-s14 font-w-normal color-text">
                            エルメ上に友だちを反映させる方法は
                            <a href="https://lme.jp/manual/add_existing_friends/" class="underline" :style="isGuideNewDesign ? {} : {fontWeight: '300'}" target="_blank">こちら↗</a>
{{--                            <svg xmlns="http://www.w3.org/2000/svg" width="12.5" height="12.5" viewBox="0 0 12.5 12.5">--}}
{{--                                <path id="形状" d="M12,12.5H.5A.5.5,0,0,1,0,12V.5A.5.5,0,0,1,.5,0H6.125A.125.125,0,0,1,6.25.125V1a.125.125,0,0,1-.124.125h-5v10.25h10.25v-5A.125.125,0,0,1,11.5,6.25h.875a.127.127,0,0,1,.125.125V12a.5.5,0,0,1-.5.5ZM7.044,6.241A.123.123,0,0,1,6.956,6.2l-.662-.662a.126.126,0,0,1,0-.177l4-4L9.479.545A.125.125,0,0,1,9.553.333l2.8-.328h.015a.124.124,0,0,1,.123.142l-.328,2.8a.126.126,0,0,1-.126.11.123.123,0,0,1-.088-.037l-.813-.82-4,4a.126.126,0,0,1-.092.041Z" fill="#5799db"/>--}}
{{--                            </svg>--}}
                        </div>
                    </div>
                </div>
            </div>
            {{-- [#38867] CR-03: footer xếp dọc, căn giữa, gap 12 · CR-02: checkbox ẩn hướng dẫn 180 ngày
                 [#40442] Checkbox + style nút mới CHỈ có ở design mới (luồng tự mở sau khi lưu). --}}
            <div class="modal-footer" style="padding-top: unset">
                <div class="modal-action" style="display: flex; justify-content: center">
                    <label class="guide-hide-check" v-if="isGuideNewDesign">
                        <input type="checkbox" v-model="hideGuideChecked">
                        <span>この案内を一定期間表示しない</span>
                    </label>
                    <button class="button button04 hover" :class="{'btn-close-guide': isGuideNewDesign}"
                            :style="isGuideNewDesign ? {} : {fontWeight: '400'}" @click="closeModalGuideSetting()">閉じる</button>
                </div>
            </div>
        </div>
    </div>
</div>