@extends('component-base.layout')

@section('title')
    Modal
@endsection

@push('css')
    <link rel="stylesheet" href="/_assets/commons/css/components/radio2.css?v={{config("sns-line.version")}}" type="text/css">
    <link rel="stylesheet" href="/_assets/commons/css/components/checkbox.css?v={{config("sns-line.version")}}">
    <link rel="stylesheet" href="/css/component-base/button/button.css?v={{config("sns-line.version")}}">
    <link rel="stylesheet" href="/css/component-base/input/input.css?v={{config("sns-line.version")}}">
    <link rel="stylesheet" href="/css/component-base/input/select.css?v={{config("sns-line.version")}}">
    <link rel="stylesheet" href="/css/component-base/modal/modal.css?v={{config("sns-line.version")}}">
    <style>
        .item-scroll {
            width: 300px;
            border-radius: 8px;
            border: 1px solid #E7E7E7;
            height: 36px;
            display: flex;
            align-items: center;
            gap: 10px;
            padding-inline: 10px;
            flex-shrink: 0;
            background-color: #FFFFFF;
        }
        .item-scroll:hover {
            border: 1px solid #1677FF;
        }
        .scroll-section {
            max-height: 377px;
            overflow-y: auto;
            overflow-x: hidden;
            min-height: 0;
            flex: 0 0 auto;
            padding-inline: 10px;
        }
        .ct202602-radio-box::before {
            width: 6px !important;
            height: 6px !important;
        }
        .drag-dragging {
            background-color: #E6F4FF !important;
            border: 1px solid #1677FF !important;
            box-shadow: 0 4px 12px rgba(22, 119, 255, 0.2);
            opacity: 1 !important;
        }
        .drag-chosen {
            background-color: #E6F4FF;
            border: 1px solid #1677FF;
        }
        .drag-ghost {
            background-color: #F5F5F5 !important;
            border: 1px dashed #BFBFBF !important;
            color: transparent;
        }
        .drag-ghost * {
            opacity: 0;
        }
        .sortable-chosen {
            transition: none !important;
        }
        body.dragging {
            user-select: none;
        }
        body.dragging .item-scroll:hover {
            border: 1px solid #E7E7E7 !important;
        }
    </style>
@endpush

@section('contents')
    <div id="vue-element" v-cloak>
        <div class="lme-flex lme-flex-col" style="padding: 20px;gap: 20px;">
            <button class="lme-btn" style="width: 350px" @click="open_modal_1 = true">モーダルタイトル</button>
            <button class="lme-btn" style="width: 350px" @click="open_modal_2 = true">データを「削除したデータ」に移動します</button>
            <button class="lme-btn" style="width: 350px" @click="open_modal_3 = true">データを削除します</button>
            <button class="lme-btn" style="width: 350px" @click="open_modal_4 = true">変更した内容は保存されていません</button>
            <button class="lme-btn" style="width: 350px" @click="open_modal_5 = true">〇〇が完了しました</button>
            <button class="lme-btn" style="width: 350px" @click="open_modal_6 = true">〇〇エラー</button>
            <button class="lme-btn" style="width: 350px" @click="open_modal_7 = true">新規作成</button>
            <button class="lme-btn" style="width: 350px" @click="open_modal_8 = true">フォルダ新規作成</button>
            <button class="lme-btn" style="width: 350px" @click="open_modal_9 = true">フォルダ新規作成</button>
            <button class="lme-btn" style="width: 350px" @click="open_modal_10 = true">フォルダの並び替え</button>

            <lme-modal v-model="open_modal_1" :header="false" :mask-closable="true" :width="520">
                <div class="lme-flex lme-flex-col" style="font-size: 14px;font-weight: 400;color: #1F1F1F;line-height: 22px;gap: 20px">
                    <div class="lme-flex lme-items-center lme-justify-between">
                        <div class="lme-flex lme-items-center lme-justify-between" style="gap: 10px">
                            <span style="font-size: 20px;font-weight: 700;color: #1F1F1F">モーダルタイトル</span>
                        </div>
                        <div>
                            <button class="lme-modal-close" @click="open_modal_1 = false">
                                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M16.0583 3.41929C16.0587 3.41942 16.0591 3.41963 16.0599 3.42041L17.1581 4.51864C17.1589 4.51943 17.1591 4.51979 17.1592 4.52024C17.1594 4.52067 17.1594 4.52113 17.1592 4.52156C17.1591 4.522 17.1589 4.52236 17.1581 4.52314L11.6812 10.0001L17.1581 15.477C17.1589 15.4778 17.1591 15.4782 17.1592 15.4786C17.1594 15.479 17.1594 15.4795 17.1592 15.4799C17.1591 15.4803 17.1589 15.4807 17.1581 15.4815L16.0599 16.5797C16.0591 16.5805 16.0587 16.5807 16.0583 16.5809C16.0578 16.581 16.0574 16.581 16.057 16.5809C16.0565 16.5807 16.0562 16.5805 16.0554 16.5797L10.5784 11.1028L5.10151 16.5797C5.10075 16.5805 5.10036 16.5807 5.09993 16.5809C5.09949 16.581 5.09903 16.581 5.09859 16.5809C5.09818 16.5807 5.09779 16.5805 5.09701 16.5797L3.99878 15.4815C3.998 15.4807 3.99779 15.4804 3.99766 15.4799C3.99753 15.4795 3.99753 15.479 3.99766 15.4786C3.99779 15.4782 3.998 15.4778 3.99878 15.477L9.4757 10.0001L3.99878 4.52314C3.998 4.52238 3.99779 4.522 3.99766 4.52156C3.99752 4.52112 3.99752 4.52066 3.99766 4.52023C3.99779 4.51981 3.998 4.51943 3.99878 4.51864L5.09701 3.42041C5.09779 3.41963 5.09816 3.41942 5.09861 3.41929C5.09904 3.41916 5.0995 3.41916 5.09993 3.41929C5.10036 3.41942 5.10073 3.41963 5.10151 3.42041L10.5784 8.89733L16.0554 3.42041C16.0561 3.41963 16.0565 3.41942 16.057 3.41929C16.0574 3.41916 16.0578 3.41916 16.0583 3.41929Z"
                                          fill="currentColor"/>
                                </svg>
                            </button>
                        </div>
                    </div>

                    <div>
                        <p>説明などのテキスト説明などのテキスト説明などのテキスト説明などのテ</p>
                        <p>キスト説明などのテキスト説明などのテキスト説明などのテキスト</p>
                    </div>

                    <div class="lme-flex lme-flex-col" style="padding: 10px 10px;gap: 10px">
                        <p>コンテンツ</p>
                        <p>コンテンツ</p>
                        <p>コンテンツ</p>
                    </div>

                    <div class="lme-flex lme-justify-end" style="gap: 8px">
                        <lme-button-flat size="lg" @click="open_modal_1 = false" style="width: 112px;padding-inline: 0 !important;">キャンセル</lme-button-flat>
                        <lme-button-default size="lg" @click="open_modal_1 = false" style="width: 76px;padding-inline: 0 !important;">実行</lme-button-default>
                    </div>
                </div>
            </lme-modal>

            <lme-modal v-model="open_modal_2"
                       :header="false"
                       :width="480">
                <div class="lme-flex lme-flex-col" style="font-size: 14px;font-weight: 400;color: #1F1F1F;gap: 20px;padding-inline: 8px">
                    <div class="lme-flex lme-items-center lme-justify-between">
                        <div class="lme-flex lme-items-center lme-justify-between" style="gap: 10px">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M12.0003 22.4997C6.21041 22.4997 1.5 17.7897 1.5 12.0003C1.5 6.21041 6.21041 1.5 12.0003 1.5C17.7897 1.5 22.4997 6.21041 22.4997 12.0003C22.4997 17.7897 17.7897 22.4997 12.0003 22.4997ZM12.0003 15C11.38 15 10.8753 15.5047 10.8753 16.125C10.8753 16.7453 11.38 17.25 12.0003 17.25C12.6206 17.25 13.1253 16.7453 13.1253 16.125C13.1253 15.5047 12.6206 15 12.0003 15ZM11.4378 6.7497C11.3341 6.7497 11.2497 6.83408 11.2497 6.9378V13.3125C11.2497 13.4157 11.3341 13.4997 11.4378 13.4997H12.5628C12.666 13.4997 12.75 13.4157 12.75 13.3125V6.9378C12.75 6.83408 12.666 6.7497 12.5628 6.7497H11.4378Z" fill="black"/>
                            </svg>
                            <span style="font-size: 16px;font-weight: 700;color: #1F1F1F">データを「削除したデータ」に移動します</span>
                        </div>
                        <div>
                            <button class="lme-modal-close" @click="open_modal_2 = false">✕</button>
                        </div>
                    </div>

                    <div style="line-height: 22px">
                        <span style="font-size: 14px;font-weight: 400;color: #1F1F1F">削除したデータは「削除したデータ」に移動し、90日後に完全に削除されます。よろしいですか？</span>
                    </div>

                    <div class="lme-flex lme-items-center lme-justify-between">
                        <div class="lme-flex lme-items-center" style="gap: 5px">
                            <label class="ct202602-custom-checkbox">
                                <input type="checkbox">
                                <span class="ct202602-checkbox-box"></span>
                                <span style="font-size: 14px;font-weight: 400;color: #1F1F1F;line-height: 22px">次から表示しない</span>
                            </label>
                        </div>
                        <div class="lme-flex lme-justify-end" style="gap: 8px">
                            <lme-button-flat @click="open_modal_2 = false" style="width: 102px;padding-inline: 0 !important;">キャンセル</lme-button-flat>
                            <lme-button-risk @click="open_modal_2 = false" style="width: 88px;padding-inline: 0 !important;">削除する</lme-button-risk>
                        </div>
                    </div>
                </div>
            </lme-modal>

            <lme-modal v-model="open_modal_3"
                       :header="false"
                       :width="480">
                <div class="lme-flex lme-flex-col" style="font-size: 14px;font-weight: 400;color: #1F1F1F;gap: 20px;padding-inline: 8px">
                    <div class="lme-flex lme-items-center lme-justify-between">
                        <div class="lme-flex lme-items-center lme-justify-between" style="gap: 10px">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M12.0003 22.4997C6.21041 22.4997 1.5 17.7897 1.5 12.0003C1.5 6.21041 6.21041 1.5 12.0003 1.5C17.7897 1.5 22.4997 6.21041 22.4997 12.0003C22.4997 17.7897 17.7897 22.4997 12.0003 22.4997ZM12.0003 15C11.38 15 10.8753 15.5047 10.8753 16.125C10.8753 16.7453 11.38 17.25 12.0003 17.25C12.6206 17.25 13.1253 16.7453 13.1253 16.125C13.1253 15.5047 12.6206 15 12.0003 15ZM11.4378 6.7497C11.3341 6.7497 11.2497 6.83408 11.2497 6.9378V13.3125C11.2497 13.4157 11.3341 13.4997 11.4378 13.4997H12.5628C12.666 13.4997 12.75 13.4157 12.75 13.3125V6.9378C12.75 6.83408 12.666 6.7497 12.5628 6.7497H11.4378Z" fill="black"/>
                            </svg>
                            <span style="font-size: 16px;font-weight: 700;color: #1F1F1F">データを削除します</span>
                        </div>
                        <div>
                            <button class="lme-modal-close" @click="open_modal_3 = false">✕</button>
                        </div>
                    </div>

                    <div style="line-height: 22px">
                        <span style="font-size: 14px;font-weight: 400;color: #1F1F1F">削除されたデータは復元できません。データを削除してもよろしいですか？</span>
                    </div>

                    <div class="lme-flex lme-items-center lme-justify-between">
                        <div class="lme-flex lme-items-center" style="gap: 5px">
                            <label class="ct202602-custom-checkbox">
                                <input type="checkbox">
                                <span class="ct202602-checkbox-box"></span>
                                <span style="font-size: 14px;font-weight: 400;color: #1F1F1F;line-height: 22px">次から表示しない</span>
                            </label>
                        </div>
                        <div class="lme-flex lme-justify-end" style="gap: 8px">
                            <lme-button-flat @click="open_modal_3 = false" style="width: 102px;padding-inline: 0 !important;">キャンセル</lme-button-flat>
                            <lme-button-risk @click="open_modal_3 = false" style="width: 88px;padding-inline: 0 !important;">削除する</lme-button-risk>
                        </div>
                    </div>
                </div>
            </lme-modal>

            <lme-modal v-model="open_modal_4"
                       :header="false"
                       :width="560">
                <div class="lme-flex lme-flex-col" style="font-size: 14px;font-weight: 400;color: #1F1F1F;gap: 20px;padding-inline: 8px">
                    <div class="lme-flex lme-items-center lme-justify-between">
                        <div class="lme-flex lme-items-center lme-justify-between" style="gap: 10px">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M12.0003 22.5006C6.21042 22.5006 1.5 17.7902 1.5 12.0003C1.5 6.21042 6.21042 1.5 12.0003 1.5C17.7902 1.5 22.5006 6.21042 22.5006 12.0003C22.5006 17.7902 17.7902 22.5006 12.0003 22.5006ZM12.0003 3.28065C7.19228 3.28065 3.28065 7.19228 3.28065 12.0003C3.28065 16.8076 7.19228 20.7186 12.0003 20.7186C16.8076 20.7186 20.7186 16.8076 20.7186 12.0003C20.7186 7.19228 16.8076 3.28065 12.0003 3.28065Z" fill="#1F1F1F"/>
                                <path d="M11.9995 17.2503C11.3795 17.2503 10.875 16.7452 10.875 16.1244C10.875 15.5043 11.3795 14.9999 11.9995 14.9999C12.6204 14.9999 13.1255 15.5043 13.1255 16.1244C13.1255 16.7452 12.6204 17.2503 11.9995 17.2503ZM12.5625 13.5H11.438C11.3345 13.5 11.2503 13.4158 11.2503 13.3124V6.93765C11.2503 6.83418 11.3345 6.75 11.438 6.75H12.5625C12.666 6.75 12.7501 6.83418 12.7501 6.93765V13.3124C12.7501 13.4141 12.6642 13.5 12.5625 13.5Z" fill="#1F1F1F"/>
                            </svg>
                            <span style="font-size: 16px;font-weight: 700;color: #1F1F1F">変更した内容は保存されていません</span>
                        </div>
                        <div>
                            <button class="lme-modal-close" @click="open_modal_4 = false">✕</button>
                        </div>
                    </div>

                    <div style="line-height: 22px">
                        <span style="font-size: 14px;font-weight: 400;color: #1F1F1F">保存されていない内容は破棄されます。保存せずにページを移動してもよろしいですか？</span>
                    </div>

                    <div class="lme-flex lme-items-center lme-justify-between">
                        <div class="lme-flex lme-items-center" style="gap: 5px">
                            <label class="ct202602-custom-checkbox">
                                <input type="checkbox">
                                <span class="ct202602-checkbox-box"></span>
                                <span style="font-size: 14px;font-weight: 400;color: #1F1F1F;line-height: 22px">次から表示しない</span>
                            </label>
                        </div>
                        <div class="lme-flex lme-justify-end" style="gap: 8px">
                            <lme-button-flat @click="open_modal_4 = false" style="width: 130px;padding-inline: 0 !important;font-weight: 400">編集画面に戻る</lme-button-flat>
                            <lme-button-default @click="open_modal_4 = false" style="width: 168px;padding-inline: 0 !important;font-weight: 400">移動する(変更を破棄)</lme-button-default>
                        </div>
                    </div>
                </div>
            </lme-modal>

            <lme-modal v-model="open_modal_5"
                       :header="false"
                       :width="480">
                <div class="lme-flex lme-flex-col" style="font-size: 14px;font-weight: 400;color: #1F1F1F;gap: 20px;padding-inline: 8px">
                    <div class="lme-flex lme-items-center lme-justify-between">
                        <div class="lme-flex lme-items-center lme-justify-between" style="gap: 10px">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M12.0003 22.5006C6.21042 22.5006 1.5 17.7902 1.5 12.0003C1.5 6.21042 6.21042 1.5 12.0003 1.5C17.7902 1.5 22.5006 6.21042 22.5006 12.0003C22.5006 17.7902 17.7902 22.5006 12.0003 22.5006ZM7.61685 11.0674C7.54512 11.0674 7.48269 11.1056 7.44988 11.1695C7.41713 11.2333 7.42252 11.3062 7.4643 11.3644L10.387 15.4145C10.5293 15.6126 10.7502 15.7263 10.9932 15.7263C11.2362 15.7263 11.4571 15.6126 11.5993 15.4145L16.535 8.5713C16.5769 8.51287 16.5822 8.4396 16.5492 8.37529C16.5163 8.31121 16.4539 8.27295 16.3824 8.27295H15.2835C15.0455 8.27295 14.8184 8.38953 14.676 8.5848L10.9918 13.6946L9.32325 11.3793C9.18415 11.184 8.95705 11.0674 8.71575 11.0674H7.61685Z" fill="#52C41A"/>
                            </svg>
                            <span style="font-size: 16px;font-weight: 700;color: #1F1F1F;line-height: 22px;">〇〇が完了しました</span>
                        </div>
                        <div>
                            <button class="lme-modal-close" @click="open_modal_5 = false">✕</button>
                        </div>
                    </div>

                    <div style="line-height: 22px">
                        <span style="font-size: 14px;font-weight: 400;color: #1F1F1F">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</span>
                    </div>

                    <div class="lme-flex lme-justify-end" style="gap: 5px">
                        <button class="lme-btn lme-btn-primary" style="font-size: 14px;font-weight: 500;height: 32px;min-width: 120px" @click="open_modal_5 = false">OK</button>
                    </div>
                </div>
            </lme-modal>

            <lme-modal v-model="open_modal_6"
                       :header="false"
                       :width="480">
                <div class="lme-flex lme-flex-col" style="font-size: 14px;font-weight: 400;color: #1F1F1F;gap: 20px;padding-inline: 8px">
                    <div class="lme-flex lme-items-center lme-justify-between">
                        <div class="lme-flex lme-items-center lme-justify-between" style="gap: 10px">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M12.0003 22.5006C6.21042 22.5006 1.5 17.7902 1.5 12.0003C1.5 6.21042 6.21042 1.5 12.0003 1.5C17.7902 1.5 22.5006 6.21042 22.5006 12.0003C22.5006 17.7902 17.7902 22.5006 12.0003 22.5006ZM12.0003 13.0601L14.9973 16.0571L16.0571 15.0027L13.0601 12.0003L16.0571 9.0033L15.0027 7.9422L12.0003 10.9392L9.0033 7.9422L7.9422 8.9979L10.9392 12.0003L7.9422 14.9973L8.9979 16.0571L12.0003 13.0601Z" fill="#FF4D4F"/>
                            </svg>
                            <span style="font-size: 16px;font-weight: 700;color: #1F1F1F;line-height: 22px;">〇〇エラー</span>
                        </div>
                        <div>
                            <button class="lme-modal-close" @click="open_modal_6 = false">✕</button>
                        </div>
                    </div>

                    <div style="line-height: 22px">
                        <span style="font-size: 14px;font-weight: 400;color: #1F1F1F">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</span>
                    </div>

                    <div class="lme-flex lme-justify-end" style="gap: 5px">
                        <button class="lme-btn lme-btn-outline-none" style="font-size: 14px;font-weight: 500;height: 32px;min-width: 86px" @click="open_modal_6 = false">閉じる</button>
                        <button class="lme-btn lme-btn-primary" style="font-size: 14px;font-weight: 500;height: 32px;min-width: 100px" @click="open_modal_6 = false">〇〇に戻る</button>
                    </div>
                </div>
            </lme-modal>

            <lme-modal v-model="open_modal_7" :header="false" :width="520">
                <div class="lme-flex lme-flex-col" style="gap: 20px;font-size: 14px;font-weight: 400;color: #1F1F1F;line-height: 22px">
                    <div class="lme-flex lme-items-center lme-justify-between">
                        <div class="lme-flex lme-items-center lme-justify-between" style="gap: 10px">
                            <span style="font-size: 20px;font-weight: 700;color: #1F1F1F;">新規作成</span>
                        </div>
                        <div>
                            <button class="lme-modal-close" @click="open_modal_7 = false">
                                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M16.0583 3.41929C16.0587 3.41942 16.0591 3.41963 16.0599 3.42041L17.1581 4.51864C17.1589 4.51943 17.1591 4.51979 17.1592 4.52024C17.1594 4.52067 17.1594 4.52113 17.1592 4.52156C17.1591 4.522 17.1589 4.52236 17.1581 4.52314L11.6812 10.0001L17.1581 15.477C17.1589 15.4778 17.1591 15.4782 17.1592 15.4786C17.1594 15.479 17.1594 15.4795 17.1592 15.4799C17.1591 15.4803 17.1589 15.4807 17.1581 15.4815L16.0599 16.5797C16.0591 16.5805 16.0587 16.5807 16.0583 16.5809C16.0578 16.581 16.0574 16.581 16.057 16.5809C16.0565 16.5807 16.0562 16.5805 16.0554 16.5797L10.5784 11.1028L5.10151 16.5797C5.10075 16.5805 5.10036 16.5807 5.09993 16.5809C5.09949 16.581 5.09903 16.581 5.09859 16.5809C5.09818 16.5807 5.09779 16.5805 5.09701 16.5797L3.99878 15.4815C3.998 15.4807 3.99779 15.4804 3.99766 15.4799C3.99753 15.4795 3.99753 15.479 3.99766 15.4786C3.99779 15.4782 3.998 15.4778 3.99878 15.477L9.4757 10.0001L3.99878 4.52314C3.998 4.52238 3.99779 4.522 3.99766 4.52156C3.99752 4.52112 3.99752 4.52066 3.99766 4.52023C3.99779 4.51981 3.998 4.51943 3.99878 4.51864L5.09701 3.42041C5.09779 3.41963 5.09816 3.41942 5.09861 3.41929C5.09904 3.41916 5.0995 3.41916 5.09993 3.41929C5.10036 3.41942 5.10073 3.41963 5.10151 3.42041L10.5784 8.89733L16.0554 3.42041C16.0561 3.41963 16.0565 3.41942 16.057 3.41929C16.0574 3.41916 16.0578 3.41916 16.0583 3.41929Z"
                                          fill="currentColor"/>
                                </svg>
                            </button>
                        </div>
                    </div>

                    <div>
                        <p>入力内容は後から変更可能です。</p>
                    </div>

                    <div class="lme-flex lme-flex-col" style="padding: 10px 10px;gap: 20px">
                        <div class="lme-flex lme-flex-col" style="gap: 5px">
                            <div class="lme-flex lme-items-center" style="font-weight: 400;gap: 10px">
                                <span style="color: #1F1F1F;font-size: 14px;">管理名</span>
                                <span style="color: #FF4D4F;font-size: 12px;">非表示</span>
                            </div>

                            <lme-input v-model="username"
                                       type="text"
                                       placeholder="プレースホルダー"
                                       :max-count="50"
                                       size="lg"
                                       width="400px">
                            </lme-input>
                        </div>

                        <div class="lme-flex lme-flex-col" style="gap: 5px">
                            <div class="lme-flex lme-items-center" style="font-size: 14px;font-weight: 400;gap: 10px">
                                <span style="color: #1F1F1F">保存先のフォルダを選択</span>
                            </div>

                            <lme-select
                                    direction="vertical"
                                    v-model="categories.selected"
                                    :options="categories"
                                    width="440px"
                                    height="40px"
                                    @change="onChange"
                                    placeholder="プレースホルダー"
                                    category>
                            </lme-select>

                            <div class="lme-flex lme-items-center" style="gap: 5px">
                                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M10.875 7.5H8.5V5.125C8.5 5.05625 8.44375 5 8.375 5H7.625C7.55625 5 7.5 5.05625 7.5 5.125V7.5H5.125C5.05625 7.5 5 7.55625 5 7.625V8.375C5 8.44375 5.05625 8.5 5.125 8.5H7.5V10.875C7.5 10.9437 7.55625 11 7.625 11H8.375C8.44375 11 8.5 10.9437 8.5 10.875V8.5H10.875C10.9437 8.5 11 8.44375 11 8.375V7.625C11 7.55625 10.9437 7.5 10.875 7.5Z" fill="#1677FF"/>
                                    <path d="M8.0002 15.0004C4.14028 15.0004 1 11.8601 1 8.0002C1 4.14028 4.14028 1 8.0002 1C11.8601 1 15.0004 4.14028 15.0004 8.0002C15.0004 11.8601 11.8601 15.0004 8.0002 15.0004ZM8.0002 2.1871C4.79485 2.1871 2.1871 4.79485 2.1871 8.0002C2.1871 11.2051 4.79485 13.8124 8.0002 13.8124C11.2051 13.8124 13.8124 11.2051 13.8124 8.0002C13.8124 4.79485 11.2051 2.1871 8.0002 2.1871Z" fill="#1677FF"/>
                                </svg>
                                <span style="font-size: 12px;font-weight: 400;color: #1677FF;line-height: 22px">フォルダを新規作成</span>
                            </div>
                        </div>
                    </div>

                    <div class="lme-flex lme-justify-end" style="gap: 8px">
                        <button class="lme-btn" @click="open_modal_7 = false">キャンセル</button>
                        <button class="lme-btn lme-btn-primary" @click="open_modal_7 = false">新規作成</button>
                    </div>
                </div>
            </lme-modal>

            <lme-modal v-model="open_modal_8" :header="false" :width="520">
                <div class="lme-flex lme-flex-col" style="gap: 20px;font-size: 14px;font-weight: 400;color: #1F1F1F;line-height: 22px">
                    <div class="lme-flex lme-items-center lme-justify-between">
                        <div class="lme-flex lme-items-center lme-justify-between" style="gap: 10px">
                            <span style="font-size: 20px;font-weight: 700;color: #1F1F1F;">フォルダ新規作成</span>
                        </div>
                        <div>
                            <button class="lme-modal-close" @click="open_modal_8 = false">
                                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M16.0583 3.41929C16.0587 3.41942 16.0591 3.41963 16.0599 3.42041L17.1581 4.51864C17.1589 4.51943 17.1591 4.51979 17.1592 4.52024C17.1594 4.52067 17.1594 4.52113 17.1592 4.52156C17.1591 4.522 17.1589 4.52236 17.1581 4.52314L11.6812 10.0001L17.1581 15.477C17.1589 15.4778 17.1591 15.4782 17.1592 15.4786C17.1594 15.479 17.1594 15.4795 17.1592 15.4799C17.1591 15.4803 17.1589 15.4807 17.1581 15.4815L16.0599 16.5797C16.0591 16.5805 16.0587 16.5807 16.0583 16.5809C16.0578 16.581 16.0574 16.581 16.057 16.5809C16.0565 16.5807 16.0562 16.5805 16.0554 16.5797L10.5784 11.1028L5.10151 16.5797C5.10075 16.5805 5.10036 16.5807 5.09993 16.5809C5.09949 16.581 5.09903 16.581 5.09859 16.5809C5.09818 16.5807 5.09779 16.5805 5.09701 16.5797L3.99878 15.4815C3.998 15.4807 3.99779 15.4804 3.99766 15.4799C3.99753 15.4795 3.99753 15.479 3.99766 15.4786C3.99779 15.4782 3.998 15.4778 3.99878 15.477L9.4757 10.0001L3.99878 4.52314C3.998 4.52238 3.99779 4.522 3.99766 4.52156C3.99752 4.52112 3.99752 4.52066 3.99766 4.52023C3.99779 4.51981 3.998 4.51943 3.99878 4.51864L5.09701 3.42041C5.09779 3.41963 5.09816 3.41942 5.09861 3.41929C5.09904 3.41916 5.0995 3.41916 5.09993 3.41929C5.10036 3.41942 5.10073 3.41963 5.10151 3.42041L10.5784 8.89733L16.0554 3.42041C16.0561 3.41963 16.0565 3.41942 16.057 3.41929C16.0574 3.41916 16.0578 3.41916 16.0583 3.41929Z"
                                          fill="currentColor"/>
                                </svg>
                            </button>
                        </div>
                    </div>

                    <div class="lme-flex lme-flex-col" style="padding-inline: 20px;gap: 10px">
                        <div class="ct202602-radio-list with-bg lme-flex-col" style="gap: 0">
                            <div class="ct202602-custom-radio" style="width: 192px;height: 36px">
                                <input class="ct202602-radio-box" type="radio" value="0" name="radio" id="radio01" checked style="margin: 0;min-width: 16px;max-width: 16px;height: 16px;">
                                <label class="ct202602-radio-label" for="radio01" style="margin-left: 5px">
                                    メインフォルダを作成
                                </label>
                            </div>
                            <div class="ct202602-custom-radio" style="width: 192px;height: 36px">
                                <input class="ct202602-radio-box" type="radio" value="1" name="radio" id="radio02" style="margin: 0;min-width: 16px;max-width: 16px;height: 16px;">
                                <label class="ct202602-radio-label" for="radio02" style="margin-left: 7px">
                                    サブフォルダを作成
                                </label>
                            </div>
                        </div>
                    </div>

                    <div class="lme-flex lme-flex-col" style="padding: 10px 10px;gap: 20px">
                        <div class="lme-flex lme-justify-end" style="gap: 5px">
                            <lme-input v-model="username"
                                       label="メインフォルダ名"
                                       :vertical="false"
                                       type="text"
                                       placeholder="フォルダ名を入力"
                                       :max-count="20"
                                       width="300px"
                                       size="lg">
                            </lme-input>
                        </div>

                        <div class="lme-flex lme-justify-end" style="gap: 5px">
                            <lme-input v-model="username2"
                                       label="サブフォルダ名"
                                       :vertical="false"
                                       type="text"
                                       placeholder="フォルダ名を入力"
                                       :max-count="20"
                                       width="300px"
                                       size="lg">
                            </lme-input>
                        </div>
                    </div>

                    <div class="lme-flex lme-justify-end" style="gap: 8px">
                        <button class="lme-btn" @click="open_modal_8 = false">キャンセル</button>
                        <button class="lme-btn lme-btn-primary" @click="open_modal_8 = false">フォルダを作成</button>
                    </div>
                </div>
            </lme-modal>

            <lme-modal v-model="open_modal_9" :header="false" :width="520">
                <div class="lme-flex lme-flex-col" style="gap: 20px;font-size: 14px;font-weight: 400;color: #1F1F1F;line-height: 22px">
                    <div class="lme-flex lme-items-center lme-justify-between">
                        <div class="lme-flex lme-items-center lme-justify-between" style="gap: 10px">
                            <span style="font-size: 20px;font-weight: 700;color: #1F1F1F;">フォルダ新規作成</span>
                        </div>
                        <div>
                            <button class="lme-modal-close" @click="open_modal_9 = false">
                                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M16.0583 3.41929C16.0587 3.41942 16.0591 3.41963 16.0599 3.42041L17.1581 4.51864C17.1589 4.51943 17.1591 4.51979 17.1592 4.52024C17.1594 4.52067 17.1594 4.52113 17.1592 4.52156C17.1591 4.522 17.1589 4.52236 17.1581 4.52314L11.6812 10.0001L17.1581 15.477C17.1589 15.4778 17.1591 15.4782 17.1592 15.4786C17.1594 15.479 17.1594 15.4795 17.1592 15.4799C17.1591 15.4803 17.1589 15.4807 17.1581 15.4815L16.0599 16.5797C16.0591 16.5805 16.0587 16.5807 16.0583 16.5809C16.0578 16.581 16.0574 16.581 16.057 16.5809C16.0565 16.5807 16.0562 16.5805 16.0554 16.5797L10.5784 11.1028L5.10151 16.5797C5.10075 16.5805 5.10036 16.5807 5.09993 16.5809C5.09949 16.581 5.09903 16.581 5.09859 16.5809C5.09818 16.5807 5.09779 16.5805 5.09701 16.5797L3.99878 15.4815C3.998 15.4807 3.99779 15.4804 3.99766 15.4799C3.99753 15.4795 3.99753 15.479 3.99766 15.4786C3.99779 15.4782 3.998 15.4778 3.99878 15.477L9.4757 10.0001L3.99878 4.52314C3.998 4.52238 3.99779 4.522 3.99766 4.52156C3.99752 4.52112 3.99752 4.52066 3.99766 4.52023C3.99779 4.51981 3.998 4.51943 3.99878 4.51864L5.09701 3.42041C5.09779 3.41963 5.09816 3.41942 5.09861 3.41929C5.09904 3.41916 5.0995 3.41916 5.09993 3.41929C5.10036 3.41942 5.10073 3.41963 5.10151 3.42041L10.5784 8.89733L16.0554 3.42041C16.0561 3.41963 16.0565 3.41942 16.057 3.41929C16.0574 3.41916 16.0578 3.41916 16.0583 3.41929Z"
                                          fill="currentColor"/>
                                </svg>
                            </button>
                        </div>
                    </div>

                    <div class="lme-flex lme-flex-col" style="padding-inline: 20px;gap: 10px">
                        <div class="ct202602-radio-list with-bg lme-flex-col" style="gap: 0">
                            <div class="ct202602-custom-radio" style="width: 192px;height: 36px">
                                <input class="ct202602-radio-box" type="radio" value="0" name="choice" id="radio03" style="margin: 0;min-width: 16px;max-width: 16px;height: 16px;">
                                <label class="ct202602-radio-label" for="radio03" style="margin-left: 5px">
                                    メインフォルダを作成
                                </label>
                            </div>
                            <div class="ct202602-custom-radio" style="width: 192px;height: 36px">
                                <input class="ct202602-radio-box" type="radio" value="1" name="choice" id="radio04" checked style="margin: 0;min-width: 16px;max-width: 16px;height: 16px;">
                                <label class="ct202602-radio-label" for="radio04" style="margin-left: 7px">
                                    サブフォルダを作成
                                </label>
                            </div>
                        </div>
                    </div>

                    <div class="lme-flex lme-flex-col" style="padding: 10px 10px;gap: 20px">
                        <div class="lme-flex lme-items-center" style="gap: 5px">
                            <div style="padding-left: 36px">
                                <span style="font-size: 14px;font-weight: 400;color: #1F1F1F">メインフォルダ選択</span>
                            </div>
                            <lme-select
                                    v-model="categories.selected"
                                    :options="categories"
                                    width="292px"
                                    height="40px"
                                    @change="onChange"
                                    placeholder="プレースホルダー"
                                    category>
                            </lme-select>
                        </div>

                        <div class="lme-flex lme-justify-end" style="gap: 5px">
                            <lme-input v-model="username"
                                       label="サブフォルダ名"
                                       :vertical="false"
                                       type="text"
                                       placeholder="フォルダ名を入力"
                                       :max-count="20"
                                       width="263px"
                                       size="lg">
                            </lme-input>
                        </div>
                    </div>

                    <div class="lme-flex lme-justify-end" style="gap: 8px">
                        <button class="lme-btn" @click="open_modal_9 = false">キャンセル</button>
                        <button class="lme-btn lme-btn-primary" @click="open_modal_9 = false">フォルダを作成</button>
                    </div>
                </div>
            </lme-modal>

            <lme-modal v-model="open_modal_10" :header="false" :width="722">
                <div class="lme-flex lme-flex-col" style="gap: 20px;font-size: 14px;font-weight: 400;color: #1F1F1F;line-height: 22px;min-height: 0;">
                    <div class="lme-flex lme-items-center lme-justify-between">
                        <div class="lme-flex lme-items-center lme-justify-between" style="gap: 10px">
                            <span style="font-size: 20px;font-weight: 700;color: #1F1F1F;">フォルダの並び替え</span>
                        </div>
                        <div>
                            <button class="lme-modal-close" @click="open_modal_10 = false">
                                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M16.0583 3.41929C16.0587 3.41942 16.0591 3.41963 16.0599 3.42041L17.1581 4.51864C17.1589 4.51943 17.1591 4.51979 17.1592 4.52024C17.1594 4.52067 17.1594 4.52113 17.1592 4.52156C17.1591 4.522 17.1589 4.52236 17.1581 4.52314L11.6812 10.0001L17.1581 15.477C17.1589 15.4778 17.1591 15.4782 17.1592 15.4786C17.1594 15.479 17.1594 15.4795 17.1592 15.4799C17.1591 15.4803 17.1589 15.4807 17.1581 15.4815L16.0599 16.5797C16.0591 16.5805 16.0587 16.5807 16.0583 16.5809C16.0578 16.581 16.0574 16.581 16.057 16.5809C16.0565 16.5807 16.0562 16.5805 16.0554 16.5797L10.5784 11.1028L5.10151 16.5797C5.10075 16.5805 5.10036 16.5807 5.09993 16.5809C5.09949 16.581 5.09903 16.581 5.09859 16.5809C5.09818 16.5807 5.09779 16.5805 5.09701 16.5797L3.99878 15.4815C3.998 15.4807 3.99779 15.4804 3.99766 15.4799C3.99753 15.4795 3.99753 15.479 3.99766 15.4786C3.99779 15.4782 3.998 15.4778 3.99878 15.477L9.4757 10.0001L3.99878 4.52314C3.998 4.52238 3.99779 4.522 3.99766 4.52156C3.99752 4.52112 3.99752 4.52066 3.99766 4.52023C3.99779 4.51981 3.998 4.51943 3.99878 4.51864L5.09701 3.42041C5.09779 3.41963 5.09816 3.41942 5.09861 3.41929C5.09904 3.41916 5.0995 3.41916 5.09993 3.41929C5.10036 3.41942 5.10073 3.41963 5.10151 3.42041L10.5784 8.89733L16.0554 3.42041C16.0561 3.41963 16.0565 3.41942 16.057 3.41929C16.0574 3.41916 16.0578 3.41916 16.0583 3.41929Z"
                                          fill="currentColor"/>
                                </svg>
                            </button>
                        </div>
                    </div>

                    <div class="lme-flex lme-flex-col">
                        <span style="font-size: 14px;font-weight: 400;color: #1F1F1F">ドラッグ＆ドロップで表示順の並び替え、サブフォルダの移動が可能です。</span>
                    </div>

                    <div class="lme-flex lme-justify-between" style="padding: 10px;min-height: 0">
                        <div class="lme-left-side lme-flex lme-flex-col" style="gap: 10px;min-height: 0">
                            <div style="font-size: 16px;font-weight: 600;color: #1F1F1F;padding-inline: 10px;">メインフォルダ</div>
                            <div class="">
                                <draggable v-model="list_sort_1"
                                           class="scroll-custom scroll-section lme-flex lme-flex-col"
                                           style="gap: 5px"
                                           @start="onStart"
                                           @end="onEnd"
                                        :options="{
                                            animation: 150,
                                            handle: '.drag-handle',
                                            chosenClass: 'drag-chosen',
                                            ghostClass: 'drag-ghost',
                                            dragClass: 'drag-dragging'
                                        }">
                                    <div v-for="item in list_sort_1" :key="item.id" class="item-scroll">
                                        <svg class="drag-handle" style="min-width: 8px;cursor: move;" width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M1.09443 10.9373C1.69818 10.9373 2.18793 11.427 2.18793 12.0315C2.18793 12.6353 1.69818 13.125 1.09443 13.125C0.489927 13.125 0.000176907 12.6353 0.000176907 12.0315C0.000176907 11.427 0.489927 10.9373 1.09443 10.9373ZM1.09443 5.469C1.69818 5.469 2.18793 5.95875 2.18793 6.5625C2.18793 7.16625 1.69818 7.656 1.09443 7.656C0.489927 7.656 0.000176907 7.16625 0.000176907 6.5625C0.000176907 5.95875 0.489927 5.469 1.09443 5.469ZM0.147177 0.54675C0.342177 0.2085 0.703677 0 1.09443 0C1.48518 0 1.84593 0.2085 2.04168 0.54675C2.23668 0.885 2.23668 1.302 2.04168 1.64025C1.84593 1.97925 1.48518 2.18775 1.09443 2.18775C0.703677 2.18775 0.342177 1.97925 0.147177 1.64025C0.0493021 1.47113 0.00036478 1.28231 0.00036478 1.0935C0.00036478 0.904688 0.0493021 0.715875 0.147177 0.54675Z" fill="#9A9EAD"/>
                                            <path d="M6.28242 10.9373C6.88617 10.9373 7.37592 11.427 7.37592 12.0315C7.37592 12.6353 6.88617 13.125 6.28242 13.125C5.67792 13.125 5.18817 12.6353 5.18817 12.0315C5.18817 11.427 5.67792 10.9373 6.28242 10.9373ZM6.28242 5.469C6.88617 5.469 7.37592 5.95875 7.37592 6.5625C7.37592 7.16625 6.88617 7.656 6.28242 7.656C5.67792 7.656 5.18817 7.16625 5.18817 6.5625C5.18817 5.95875 5.67792 5.469 6.28242 5.469ZM5.33517 0.54675C5.53017 0.2085 5.89167 0 6.28242 0C6.67317 0 7.03392 0.2085 7.22967 0.54675C7.42467 0.885 7.42467 1.302 7.22967 1.64025C7.03392 1.97925 6.67317 2.18775 6.28242 2.18775C5.89167 2.18775 5.53017 1.97925 5.33517 1.64025C5.23729 1.47113 5.18835 1.28231 5.18835 1.0935C5.18835 0.904688 5.23729 0.715875 5.33517 0.54675Z" fill="#9A9EAD"/>
                                        </svg>
                                        <span class="lme-line-clamp-1">@{{ item.name }}</span>
                                    </div>
                                </draggable>

{{--                                <div v-for="item in list_sort_1" :key="item.id" class="item-scroll">--}}
{{--                                    <svg style="min-width: 8px;cursor: move;" width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">--}}
{{--                                        <path d="M1.09443 10.9373C1.69818 10.9373 2.18793 11.427 2.18793 12.0315C2.18793 12.6353 1.69818 13.125 1.09443 13.125C0.489927 13.125 0.000176907 12.6353 0.000176907 12.0315C0.000176907 11.427 0.489927 10.9373 1.09443 10.9373ZM1.09443 5.469C1.69818 5.469 2.18793 5.95875 2.18793 6.5625C2.18793 7.16625 1.69818 7.656 1.09443 7.656C0.489927 7.656 0.000176907 7.16625 0.000176907 6.5625C0.000176907 5.95875 0.489927 5.469 1.09443 5.469ZM0.147177 0.54675C0.342177 0.2085 0.703677 0 1.09443 0C1.48518 0 1.84593 0.2085 2.04168 0.54675C2.23668 0.885 2.23668 1.302 2.04168 1.64025C1.84593 1.97925 1.48518 2.18775 1.09443 2.18775C0.703677 2.18775 0.342177 1.97925 0.147177 1.64025C0.0493021 1.47113 0.00036478 1.28231 0.00036478 1.0935C0.00036478 0.904688 0.0493021 0.715875 0.147177 0.54675Z" fill="#9A9EAD"/>--}}
{{--                                        <path d="M6.28242 10.9373C6.88617 10.9373 7.37592 11.427 7.37592 12.0315C7.37592 12.6353 6.88617 13.125 6.28242 13.125C5.67792 13.125 5.18817 12.6353 5.18817 12.0315C5.18817 11.427 5.67792 10.9373 6.28242 10.9373ZM6.28242 5.469C6.88617 5.469 7.37592 5.95875 7.37592 6.5625C7.37592 7.16625 6.88617 7.656 6.28242 7.656C5.67792 7.656 5.18817 7.16625 5.18817 6.5625C5.18817 5.95875 5.67792 5.469 6.28242 5.469ZM5.33517 0.54675C5.53017 0.2085 5.89167 0 6.28242 0C6.67317 0 7.03392 0.2085 7.22967 0.54675C7.42467 0.885 7.42467 1.302 7.22967 1.64025C7.03392 1.97925 6.67317 2.18775 6.28242 2.18775C5.89167 2.18775 5.53017 1.97925 5.33517 1.64025C5.23729 1.47113 5.18835 1.28231 5.18835 1.0935C5.18835 0.904688 5.23729 0.715875 5.33517 0.54675Z" fill="#9A9EAD"/>--}}
{{--                                    </svg>--}}
{{--                                    <span class="lme-line-clamp-1" style="font-size: 14px;font-weight: 400;color: #1F1F1F">@{{ item.name }}</span>--}}
{{--                                </div>--}}
                            </div>
                        </div>

                        <div class="lme-right-side lme-flex lme-flex-col" style="gap: 10px;min-height: 0">
                            <div style="font-size: 16px;font-weight: 600;color: #1F1F1F">サブフォルダ</div>
                            <div class="" style="background-color: #F7F7F7">
                                <draggable v-model="list_sort_2"
                                           class="scroll-custom scroll-section lme-flex lme-flex-col"
                                           style="gap: 5px"
                                           @start="onStart"
                                           @end="onEnd"
                                        :options="{
                                            animation: 150,
                                            handle: '.drag-handle',
                                            chosenClass: 'drag-chosen',
                                            ghostClass: 'drag-ghost',
                                            dragClass: 'drag-dragging'
                                        }">
                                    <div v-for="item in list_sort_2" :key="item.id" class="item-scroll">
                                        <svg class="drag-handle" style="min-width: 8px;cursor: move;" width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M1.09443 10.9373C1.69818 10.9373 2.18793 11.427 2.18793 12.0315C2.18793 12.6353 1.69818 13.125 1.09443 13.125C0.489927 13.125 0.000176907 12.6353 0.000176907 12.0315C0.000176907 11.427 0.489927 10.9373 1.09443 10.9373ZM1.09443 5.469C1.69818 5.469 2.18793 5.95875 2.18793 6.5625C2.18793 7.16625 1.69818 7.656 1.09443 7.656C0.489927 7.656 0.000176907 7.16625 0.000176907 6.5625C0.000176907 5.95875 0.489927 5.469 1.09443 5.469ZM0.147177 0.54675C0.342177 0.2085 0.703677 0 1.09443 0C1.48518 0 1.84593 0.2085 2.04168 0.54675C2.23668 0.885 2.23668 1.302 2.04168 1.64025C1.84593 1.97925 1.48518 2.18775 1.09443 2.18775C0.703677 2.18775 0.342177 1.97925 0.147177 1.64025C0.0493021 1.47113 0.00036478 1.28231 0.00036478 1.0935C0.00036478 0.904688 0.0493021 0.715875 0.147177 0.54675Z" fill="#9A9EAD"/>
                                            <path d="M6.28242 10.9373C6.88617 10.9373 7.37592 11.427 7.37592 12.0315C7.37592 12.6353 6.88617 13.125 6.28242 13.125C5.67792 13.125 5.18817 12.6353 5.18817 12.0315C5.18817 11.427 5.67792 10.9373 6.28242 10.9373ZM6.28242 5.469C6.88617 5.469 7.37592 5.95875 7.37592 6.5625C7.37592 7.16625 6.88617 7.656 6.28242 7.656C5.67792 7.656 5.18817 7.16625 5.18817 6.5625C5.18817 5.95875 5.67792 5.469 6.28242 5.469ZM5.33517 0.54675C5.53017 0.2085 5.89167 0 6.28242 0C6.67317 0 7.03392 0.2085 7.22967 0.54675C7.42467 0.885 7.42467 1.302 7.22967 1.64025C7.03392 1.97925 6.67317 2.18775 6.28242 2.18775C5.89167 2.18775 5.53017 1.97925 5.33517 1.64025C5.23729 1.47113 5.18835 1.28231 5.18835 1.0935C5.18835 0.904688 5.23729 0.715875 5.33517 0.54675Z" fill="#9A9EAD"/>
                                        </svg>
                                        <span class="lme-line-clamp-1">@{{ item.name }}</span>
                                    </div>
                                </draggable>

{{--                                <div v-for="item in list_sort_2" :key="item.id" class="item-scroll">--}}
{{--                                    <svg style="min-width: 8px;cursor: move;" width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">--}}
{{--                                        <path d="M1.09443 10.9373C1.69818 10.9373 2.18793 11.427 2.18793 12.0315C2.18793 12.6353 1.69818 13.125 1.09443 13.125C0.489927 13.125 0.000176907 12.6353 0.000176907 12.0315C0.000176907 11.427 0.489927 10.9373 1.09443 10.9373ZM1.09443 5.469C1.69818 5.469 2.18793 5.95875 2.18793 6.5625C2.18793 7.16625 1.69818 7.656 1.09443 7.656C0.489927 7.656 0.000176907 7.16625 0.000176907 6.5625C0.000176907 5.95875 0.489927 5.469 1.09443 5.469ZM0.147177 0.54675C0.342177 0.2085 0.703677 0 1.09443 0C1.48518 0 1.84593 0.2085 2.04168 0.54675C2.23668 0.885 2.23668 1.302 2.04168 1.64025C1.84593 1.97925 1.48518 2.18775 1.09443 2.18775C0.703677 2.18775 0.342177 1.97925 0.147177 1.64025C0.0493021 1.47113 0.00036478 1.28231 0.00036478 1.0935C0.00036478 0.904688 0.0493021 0.715875 0.147177 0.54675Z" fill="#9A9EAD"/>--}}
{{--                                        <path d="M6.28242 10.9373C6.88617 10.9373 7.37592 11.427 7.37592 12.0315C7.37592 12.6353 6.88617 13.125 6.28242 13.125C5.67792 13.125 5.18817 12.6353 5.18817 12.0315C5.18817 11.427 5.67792 10.9373 6.28242 10.9373ZM6.28242 5.469C6.88617 5.469 7.37592 5.95875 7.37592 6.5625C7.37592 7.16625 6.88617 7.656 6.28242 7.656C5.67792 7.656 5.18817 7.16625 5.18817 6.5625C5.18817 5.95875 5.67792 5.469 6.28242 5.469ZM5.33517 0.54675C5.53017 0.2085 5.89167 0 6.28242 0C6.67317 0 7.03392 0.2085 7.22967 0.54675C7.42467 0.885 7.42467 1.302 7.22967 1.64025C7.03392 1.97925 6.67317 2.18775 6.28242 2.18775C5.89167 2.18775 5.53017 1.97925 5.33517 1.64025C5.23729 1.47113 5.18835 1.28231 5.18835 1.0935C5.18835 0.904688 5.23729 0.715875 5.33517 0.54675Z" fill="#9A9EAD"/>--}}
{{--                                    </svg>--}}
{{--                                    <span class="lme-line-clamp-1" style="font-size: 14px;font-weight: 400;color: #1F1F1F">@{{ item.name }}</span>--}}
{{--                                </div>--}}
                            </div>
                        </div>
                    </div>

                    <div class="lme-flex lme-justify-end" style="gap: 10px">
                        <button class="lme-btn" @click="open_modal_10 = false">キャンセル</button>
                        <button class="lme-btn lme-btn-primary" @click="open_modal_10 = false">新規作成</button>
                    </div>
                </div>
            </lme-modal>
        </div>
    </div>
@endsection

@push('js')
    <script src="/js/component-base/button/lme-button.js?v={{config("sns-line.version")}}"></script>
    <script src="/js/component-base/button/lme-button-default.js?v={{config("sns-line.version")}}"></script>
    <script src="/js/component-base/button/lme-button-flat.js?v={{config("sns-line.version")}}"></script>
    <script src="/js/component-base/button/lme-button-risk.js?v={{config("sns-line.version")}}"></script>
    <script src="/js/component-base/input/lme-input.js?v={{config("sns-line.version")}}"></script>
    <script src="/js/component-base/input/lme-select.js?v={{config("sns-line.version")}}"></script>
    <script src="/js/component-base/modal/lme.modal.js?v={{config("sns-line.version")}}"></script>

    <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vuedraggable@2.24.3/dist/vuedraggable.umd.min.js"></script>

    <script src="/js/component-base/modal/modal.js?v={{config("sns-line.version")}}"></script>
@endpush