@extends('component-base.layout')

@section('title')
    Drawer
@endsection

@push('css')
    <link rel="stylesheet" href="/css/component-base/list/list.css?v={{config("sns-line.version")}}">
    <link rel="stylesheet" href="/css/component-base/drawer/drawer.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/switch/switch.css?v={{config("sns-line.version")}}">
    <link rel="stylesheet" href="/css/component-base/tab/tab.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/button/button.css?v={{config("sns-line.version")}}">
    <link rel="stylesheet" href="/css/component-base/hyperlink/hyperlink.css?v={{config("sns-line.version")}}">
    <style>
        #vue-element {
            padding: 20px;
            background: #fff;
            border-radius: 10px;
            overflow: hidden;
        }
        .wrap-sample {
            margin: 20px 20px 0 20px;
        }

        button {
            cursor: pointer;
        }

        .lme-tabs-wrapper {
            width: 100%;
        }
    </style>
@endpush

@section('contents')
    <div id="vue-element" v-cloak>
        <div style="font-weight: bold;">Drawer</div>
        <div class="wrap-sample">
            <button class="lme-btn" @click="showDrawer = true">Drawer</button>

            <lme-drawer v-model="showDrawer" width="300px">
                <template slot="head-icons">
                    <lme-button-ghost type="secondary" size="sm" icon>
                        <svg width="13" height="11" viewBox="0 0 13 11" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M0.87514 10.6247C0.72169 10.6247 0.57032 10.5841 0.4374 10.5073C0.1676 10.3522 0 10.0618 0 9.74947C0 9.438 0.1676 9.14763 0.4374 8.99167C0.57031 8.91527 0.72168 8.87489 0.87514 8.87489C1.02861 8.87489 1.17974 8.91527 1.3122 8.99167C1.582 9.14763 1.7496 9.438 1.7496 9.74947C1.7496 10.0618 1.582 10.3522 1.3122 10.5073C1.17972 10.5841 1.02858 10.6247 0.87514 10.6247ZM12.6252 10.312H3.5001C3.43112 10.312 3.375 10.2558 3.375 10.1869V9.31207C3.375 9.24426 3.43229 9.18697 3.5001 9.18697H12.6252C12.693 9.18697 12.7503 9.24426 12.7503 9.31207V10.1869C12.7503 10.2558 12.6942 10.312 12.6252 10.312ZM0.87514 6.18704C0.72167 6.18704 0.57031 6.14666 0.4374 6.07027C0.1676 5.91431 0 5.62394 0 5.31247C0 5.0001 0.1676 4.70973 0.4374 4.55467C0.57032 4.47784 0.72169 4.43722 0.87514 4.43722C1.02858 4.43722 1.17972 4.47784 1.3122 4.55467C1.582 4.70973 1.7496 5.0001 1.7496 5.31247C1.7496 5.62394 1.582 5.91431 1.3122 6.07027C1.17973 6.14666 1.0286 6.18704 0.87514 6.18704ZM12.6252 5.87497H3.5001C3.43229 5.87497 3.375 5.81768 3.375 5.74987V4.87506C3.375 4.80609 3.43112 4.74997 3.5001 4.74997H12.6252C12.6942 4.74997 12.7503 4.80609 12.7503 4.87506V5.74987C12.7503 5.81768 12.693 5.87497 12.6252 5.87497ZM0.87514 1.74982C0.72169 1.74982 0.57032 1.7092 0.4374 1.63237C0.1676 1.4773 0 1.18693 0 0.87457C0 0.5631 0.1676 0.27273 0.4374 0.11677C0.57032 0.04038 0.72168 0 0.87514 0C1.0286 0 1.17973 0.04038 1.3122 0.11677C1.582 0.27273 1.7496 0.5631 1.7496 0.87457C1.7496 1.18693 1.582 1.4773 1.3122 1.63237C1.17972 1.7092 1.02858 1.74982 0.87514 1.74982ZM12.6252 1.43707H3.5001C3.43112 1.43707 3.375 1.38095 3.375 1.31197V0.43716C3.375 0.36819 3.43112 0.31207 3.5001 0.31207H12.6252C12.6942 0.31207 12.7503 0.36819 12.7503 0.43716V1.31197C12.7503 1.38095 12.6942 1.43707 12.6252 1.43707Z" fill="#1F1F1F"/>
                        </svg>
                    </lme-button-ghost>

                    <lme-button-ghost type="secondary" size="sm" icon>
                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <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="#1F1F1F"/>
                            <path d="M6.46825 11.6089C6.34826 11.6089 6.21875 11.5135 6.21875 11.3594V4.64086C6.21875 4.48626 6.3477 4.39056 6.46717 4.39056C6.51938 4.39056 6.5701 4.4074 6.61385 4.43926L11.2408 7.79896C11.3064 7.84657 11.344 7.91989 11.344 8.00011C11.344 8.08033 11.3064 8.15365 11.2408 8.20126L6.61385 11.561C6.57063 11.5923 6.52029 11.6089 6.46825 11.6089ZM7.21595 6.10786V9.89236L9.82055 7.99966L7.21595 6.10786Z" fill="#1F1F1F"/>
                        </svg>
                    </lme-button-ghost>
                </template>
                <template>
                    <div class="drawer-content">
                        <div>コンテンツ（区切り線あり）</div>
                    </div>
                    <hr>
                    <div class="drawer-content">
                        <div>コンテンツ（区切り線あり）</div>
                        <br><br>
                        <div>※コンテンツの編集はインスタンスの切り離しを行なってください。<br>
                            ※コンテンツの横幅は「コンテナに合わせて拡大」を推奨</div>
                    </div>
                    <hr>
                    <div class="drawer-content">
                        <lme-hyperlink href="#" :underline="true">使用例を見る（ファイルへのリンク）</lme-hyperlink>
                    </div>
                </template>
            </lme-drawer>
        </div>

        <div class="wrap-sample">
            <button class="lme-btn" @click="showDrawerEx1 = true">Drawer Sample 1</button>

            <lme-drawer v-model="showDrawerEx1" width="300px">
                <template slot="head-icons">
                    <lme-button-ghost type="secondary" size="sm" icon>
                        <svg width="13" height="11" viewBox="0 0 13 11" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M0.87514 10.6247C0.72169 10.6247 0.57032 10.5841 0.4374 10.5073C0.1676 10.3522 0 10.0618 0 9.74947C0 9.438 0.1676 9.14763 0.4374 8.99167C0.57031 8.91527 0.72168 8.87489 0.87514 8.87489C1.02861 8.87489 1.17974 8.91527 1.3122 8.99167C1.582 9.14763 1.7496 9.438 1.7496 9.74947C1.7496 10.0618 1.582 10.3522 1.3122 10.5073C1.17972 10.5841 1.02858 10.6247 0.87514 10.6247ZM12.6252 10.312H3.5001C3.43112 10.312 3.375 10.2558 3.375 10.1869V9.31207C3.375 9.24426 3.43229 9.18697 3.5001 9.18697H12.6252C12.693 9.18697 12.7503 9.24426 12.7503 9.31207V10.1869C12.7503 10.2558 12.6942 10.312 12.6252 10.312ZM0.87514 6.18704C0.72167 6.18704 0.57031 6.14666 0.4374 6.07027C0.1676 5.91431 0 5.62394 0 5.31247C0 5.0001 0.1676 4.70973 0.4374 4.55467C0.57032 4.47784 0.72169 4.43722 0.87514 4.43722C1.02858 4.43722 1.17972 4.47784 1.3122 4.55467C1.582 4.70973 1.7496 5.0001 1.7496 5.31247C1.7496 5.62394 1.582 5.91431 1.3122 6.07027C1.17973 6.14666 1.0286 6.18704 0.87514 6.18704ZM12.6252 5.87497H3.5001C3.43229 5.87497 3.375 5.81768 3.375 5.74987V4.87506C3.375 4.80609 3.43112 4.74997 3.5001 4.74997H12.6252C12.6942 4.74997 12.7503 4.80609 12.7503 4.87506V5.74987C12.7503 5.81768 12.693 5.87497 12.6252 5.87497ZM0.87514 1.74982C0.72169 1.74982 0.57032 1.7092 0.4374 1.63237C0.1676 1.4773 0 1.18693 0 0.87457C0 0.5631 0.1676 0.27273 0.4374 0.11677C0.57032 0.04038 0.72168 0 0.87514 0C1.0286 0 1.17973 0.04038 1.3122 0.11677C1.582 0.27273 1.7496 0.5631 1.7496 0.87457C1.7496 1.18693 1.582 1.4773 1.3122 1.63237C1.17972 1.7092 1.02858 1.74982 0.87514 1.74982ZM12.6252 1.43707H3.5001C3.43112 1.43707 3.375 1.38095 3.375 1.31197V0.43716C3.375 0.36819 3.43112 0.31207 3.5001 0.31207H12.6252C12.6942 0.31207 12.7503 0.36819 12.7503 0.43716V1.31197C12.7503 1.38095 12.6942 1.43707 12.6252 1.43707Z" fill="#1F1F1F"/>
                        </svg>
                    </lme-button-ghost>

                    <lme-button-ghost type="secondary" size="sm" icon>
                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <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="#1F1F1F"/>
                            <path d="M6.46825 11.6089C6.34826 11.6089 6.21875 11.5135 6.21875 11.3594V4.64086C6.21875 4.48626 6.3477 4.39056 6.46717 4.39056C6.51938 4.39056 6.5701 4.4074 6.61385 4.43926L11.2408 7.79896C11.3064 7.84657 11.344 7.91989 11.344 8.00011C11.344 8.08033 11.3064 8.15365 11.2408 8.20126L6.61385 11.561C6.57063 11.5923 6.52029 11.6089 6.46825 11.6089ZM7.21595 6.10786V9.89236L9.82055 7.99966L7.21595 6.10786Z" fill="#1F1F1F"/>
                        </svg>
                    </lme-button-ghost>
                </template>
                <template>
                    <div class="drawer-content">
                        <lme-input v-model="row_21"
                                   label="タイトル"
                                   placeholder="プレースホルダー"
                                   width="268px"
                                   size="md">
                        </lme-input>
                        <br>
                        <lme-textarea
                                label="ラベル"
                                placeholder="プレースホルダー"
                                width="268px"
                                height="80px"
                                v-model="content"
                                :max-count="1000">
                        </lme-textarea>
                    </div>
                    <hr>
                    <div class="drawer-content">
                        <lme-select
                                label="ラベル"
                                direction="vertical"
                                v-model="selected2"
                                :options="options"
                                width="268px"
                                height="32px"
                                placeholder="プレースホルダー">
                        </lme-select>
                    </div>
                    <hr>
                    <div class="drawer-content" style="position: relative">
                        <lme-hyperlink href="#" :underline="false" style="position: absolute; right: 16px;z-index: 99;">設定</lme-hyperlink>
                        <lme-select
                                label="ラベル"
                                direction="vertical"
                                v-model="selected2"
                                :options="options"
                                width="268px"
                                height="32px"
                                placeholder="プレースホルダー">
                        </lme-select>
                    </div>
                    <hr>
                    <div class="drawer-content">
                        <div class="lme-flex lme-items-center lme-justify-between">
                            <label>ラベル</label>
                            <lme-switch v-model="form.notify" color="#38EA3B"></lme-switch>
                        </div>
                        <br>
                        <div class="lme-flex lme-items-center lme-justify-between">
                            <label>ラベル</label>
                            <lme-switch v-model="form.notify1" color="#38EA3B"></lme-switch>
                        </div>
                        <br>
                        <div class="lme-flex lme-items-center lme-justify-between">
                            <label>ラベル</label>
                            <lme-switch v-model="form.notify2" color="#38EA3B"></lme-switch>
                        </div>
                        <br>
                        <div class="lme-flex lme-items-center lme-justify-between">
                            <label>ラベル</label>
                            <lme-switch v-model="form.notify3" color="#38EA3B"></lme-switch>
                        </div>
                        <br>
                        <div class="lme-flex lme-items-center lme-justify-between">
                            <label>ラベル</label>
                            <lme-switch v-model="form.notify4" color="#38EA3B"></lme-switch>
                        </div>
                    </div>
                    <hr>
                </template>
            </lme-drawer>
        </div>


        <div class="wrap-sample">
            <button class="lme-btn" @click="showDrawerEx2 = true">Drawer Sample 2</button>

            <lme-drawer v-model="showDrawerEx2" width="300px">
                <template slot="head-icons">
                    <lme-button-ghost type="secondary" size="sm" icon>
                        <svg width="13" height="11" viewBox="0 0 13 11" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M0.87514 10.6247C0.72169 10.6247 0.57032 10.5841 0.4374 10.5073C0.1676 10.3522 0 10.0618 0 9.74947C0 9.438 0.1676 9.14763 0.4374 8.99167C0.57031 8.91527 0.72168 8.87489 0.87514 8.87489C1.02861 8.87489 1.17974 8.91527 1.3122 8.99167C1.582 9.14763 1.7496 9.438 1.7496 9.74947C1.7496 10.0618 1.582 10.3522 1.3122 10.5073C1.17972 10.5841 1.02858 10.6247 0.87514 10.6247ZM12.6252 10.312H3.5001C3.43112 10.312 3.375 10.2558 3.375 10.1869V9.31207C3.375 9.24426 3.43229 9.18697 3.5001 9.18697H12.6252C12.693 9.18697 12.7503 9.24426 12.7503 9.31207V10.1869C12.7503 10.2558 12.6942 10.312 12.6252 10.312ZM0.87514 6.18704C0.72167 6.18704 0.57031 6.14666 0.4374 6.07027C0.1676 5.91431 0 5.62394 0 5.31247C0 5.0001 0.1676 4.70973 0.4374 4.55467C0.57032 4.47784 0.72169 4.43722 0.87514 4.43722C1.02858 4.43722 1.17972 4.47784 1.3122 4.55467C1.582 4.70973 1.7496 5.0001 1.7496 5.31247C1.7496 5.62394 1.582 5.91431 1.3122 6.07027C1.17973 6.14666 1.0286 6.18704 0.87514 6.18704ZM12.6252 5.87497H3.5001C3.43229 5.87497 3.375 5.81768 3.375 5.74987V4.87506C3.375 4.80609 3.43112 4.74997 3.5001 4.74997H12.6252C12.6942 4.74997 12.7503 4.80609 12.7503 4.87506V5.74987C12.7503 5.81768 12.693 5.87497 12.6252 5.87497ZM0.87514 1.74982C0.72169 1.74982 0.57032 1.7092 0.4374 1.63237C0.1676 1.4773 0 1.18693 0 0.87457C0 0.5631 0.1676 0.27273 0.4374 0.11677C0.57032 0.04038 0.72168 0 0.87514 0C1.0286 0 1.17973 0.04038 1.3122 0.11677C1.582 0.27273 1.7496 0.5631 1.7496 0.87457C1.7496 1.18693 1.582 1.4773 1.3122 1.63237C1.17972 1.7092 1.02858 1.74982 0.87514 1.74982ZM12.6252 1.43707H3.5001C3.43112 1.43707 3.375 1.38095 3.375 1.31197V0.43716C3.375 0.36819 3.43112 0.31207 3.5001 0.31207H12.6252C12.6942 0.31207 12.7503 0.36819 12.7503 0.43716V1.31197C12.7503 1.38095 12.6942 1.43707 12.6252 1.43707Z" fill="#1F1F1F"/>
                        </svg>
                    </lme-button-ghost>

                    <lme-button-ghost type="secondary" size="sm" icon>
                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <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="#1F1F1F"/>
                            <path d="M6.46825 11.6089C6.34826 11.6089 6.21875 11.5135 6.21875 11.3594V4.64086C6.21875 4.48626 6.3477 4.39056 6.46717 4.39056C6.51938 4.39056 6.5701 4.4074 6.61385 4.43926L11.2408 7.79896C11.3064 7.84657 11.344 7.91989 11.344 8.00011C11.344 8.08033 11.3064 8.15365 11.2408 8.20126L6.61385 11.561C6.57063 11.5923 6.52029 11.6089 6.46825 11.6089ZM7.21595 6.10786V9.89236L9.82055 7.99966L7.21595 6.10786Z" fill="#1F1F1F"/>
                        </svg>
                    </lme-button-ghost>
                </template>
                <template>
                    <hr>
                    <br>
                    <lme-tab-horizontal
                            v-model="selectedTabId"
                            :tabs="tabs"
                            :max-tab="3"
                            size="sm">
                    </lme-tab-horizontal>
                    <div class="drawer-content">
                        <lme-list size="small" type="fill">
                            <lme-list-item v-for="item in arrowItems"
                                           :key="item.id"
                                           :label="item.name"
                                           size="medium"
                                           type="fill"
                                           mode="redirect"
                                           :selected="selectedArrow === item.id"
                                           @click="selectedArrow = item.id">
                            </lme-list-item>
                        </lme-list>
                    </div>
                    <hr>
                    <div class="drawer-content">
                        <lme-select
                                label="ラベル"
                                direction="vertical"
                                v-model="selected2"
                                :options="options"
                                width="268px"
                                height="32px"
                                placeholder="プレースホルダー">
                        </lme-select>
                    </div>
                    <hr>
                </template>
            </lme-drawer>
        </div>
    </div>
@endsection

@push('js')
    <script src="/js/component-base/list/lme-list.js?v={{config("sns-line.version")}}"></script>
    <script src="/js/component-base/list/lme-list-item.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/button/lme-button.js?v={{config("sns-line.version")}}"></script>
    <script src="/js/component-base/button/lme-button-ghost.js?v={{config("sns-line.version")}}"></script>
    <script src="/js/component-base/input/lme-textarea.js?v={{config("sns-line.version")}}"></script>
    <script src="/js/component-base/switch/lme-switch.js?v={{config("sns-line.version")}}"></script>
    <script src="/js/component-base/tab/lme-tab-horizontal.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/drawer/lme-drawer.js?v={{config("sns-line.version")}}"></script>
    <script src="/js/component-base/drawer/drawer.js?v={{config("sns-line.version")}}"></script>
    <script src="/js/component-base/hyperlink/lme-hyperlink.js?v={{config("sns-line.version")}}"></script>
@endpush