@extends('component-base.layout')

@section('title')
    K - ドロワー
@endsection

@push('css')
    <link rel="stylesheet" href="/css/component-base/breadcrumb/breadcrumb.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/drawer/drawer.css?v={{config("sns-line.version")}}">
    <link rel="stylesheet" href="/css/component-base/layout-demo/layout-k.css?v={{config("sns-line.version")}}">
    <style>
        .header-actions {
            gap: 0;
        }
        .link-hover:hover {
            transition: all 0.1s ease-in-out;
            opacity: 0.7;
        }
    </style>
@endpush

@section('contents')
    <div id="vue-element" v-cloak>
        <div class="layout-k">
            {{-- Breadcrumb --}}
            <lme-breadcrumb :items="breadcrumbs"></lme-breadcrumb>

            {{-- Header: Title + Info bar --}}
            <div class="layout-k-header">
                <div class="layout-k-header-left">
                    <div class="layout-k-title">ページタイトル名</div>
                    <lme-button-flat style="width: 146px" size="md" :icon="true">
                        <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M8.9982 15.1806C8.97355 15.1806 8.94729 15.1725 8.92226 15.1573L8.14264 14.6551C7.41586 14.1868 6.57453 13.9392 5.7096 13.9392H1.68795C1.37754 13.9392 1.125 13.6871 1.125 13.3773V3.39303C1.125 3.08262 1.37754 2.83008 1.68795 2.83008H5.7096C6.57555 2.83008 7.41688 3.07761 8.14264 3.54592L9.00022 4.0957L9.85781 3.54592C10.5846 3.07761 11.4259 2.83008 12.2909 2.83008H16.3125C16.6229 2.83008 16.8755 3.08262 16.8755 3.39303V13.3773C16.8755 13.6871 16.6229 13.9392 16.3125 13.9392H12.2909C11.4249 13.9392 10.5826 14.1868 9.85477 14.6551L9.07414 15.1573C9.05224 15.1725 9.02596 15.1806 8.9982 15.1806ZM12.2909 4.0957C11.6682 4.0957 11.0632 4.27322 10.5412 4.60904L9.68366 5.15883L9.56216 5.2378V13.3591C10.3981 12.9103 11.3422 12.6736 12.2909 12.6736H15.6098V4.0957H12.2909ZM2.39062 4.0957V12.6736H5.7096C6.65982 12.6736 7.60303 12.9106 8.43727 13.3591V5.2378L8.31576 5.15883L7.45819 4.60904C6.93725 4.27322 6.33259 4.0957 5.7096 4.0957H2.39062ZM14.2875 9.86088H11.0232C10.9545 9.86088 10.8987 9.80183 10.8987 9.72925V8.93849C10.8987 8.86592 10.9545 8.80687 11.0232 8.80687H14.2895C14.3216 8.80687 14.3521 8.82005 14.3753 8.84398C14.3996 8.86899 14.413 8.90344 14.412 8.93849V9.72925C14.412 9.80183 14.3562 9.86088 14.2875 9.86088ZM6.97522 9.86088H3.71092C3.64226 9.86088 3.58639 9.80183 3.58639 9.72925V8.93849C3.58639 8.86592 3.64226 8.80687 3.71092 8.80687H6.97725C7.0093 8.80687 7.03978 8.82005 7.06305 8.84398C7.08737 8.86899 7.10075 8.90344 7.09976 8.93849V9.72925C7.09976 9.8006 7.04274 9.86088 6.97522 9.86088ZM14.2875 7.4005H11.0232C10.9545 7.4005 10.8987 7.34145 10.8987 7.26888V6.4771C10.8987 6.40453 10.9545 6.34548 11.0232 6.34548H14.2875C14.3562 6.34548 14.412 6.40453 14.412 6.4771V7.26888C14.412 7.34145 14.3562 7.4005 14.2875 7.4005ZM6.97522 7.4005H3.71092C3.64226 7.4005 3.58639 7.34145 3.58639 7.26888V6.4771C3.58639 6.40453 3.64226 6.34548 3.71092 6.34548H6.97725C7.0093 6.34548 7.03978 6.35866 7.06305 6.38259C7.08737 6.4076 7.10075 6.44205 7.09976 6.4771V7.26888C7.09976 7.34023 7.04274 7.4005 6.97522 7.4005Z"
                                  fill="currentColor" />
                        </svg>
                        <span style="margin-left: 8px;">使い方を見る</span>
                    </lme-button-flat>
                </div>

                <div class="layout-k-info-bar">
                    <div class="layout-k-info-item">
                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M4.54997 14.2538C4.51642 14.2538 4.48355 14.2399 4.45981 14.2157L1.80751 11.5643C1.75933 11.5152 1.75732 11.4381 1.80301 11.3924L6.38131 6.81413C6.01535 5.43667 6.41342 3.95513 7.41991 2.94863C8.17803 2.19206 9.18437 1.77539 10.2536 1.77539C10.9695 1.77539 11.6717 1.96666 12.2844 2.32853C12.3306 2.35554 12.3633 2.39868 12.3765 2.45C12.3898 2.5014 12.382 2.55511 12.3546 2.60123C12.3454 2.616 12.3354 2.62857 12.3231 2.64083L9.62941 5.33453L10.6905 6.39563L13.3824 3.70283C13.4203 3.6654 13.4706 3.64478 13.5242 3.64478C13.5777 3.64478 13.6281 3.6654 13.6659 3.70283C13.6781 3.71326 13.689 3.72734 13.6965 3.74243C14.6236 5.31208 14.3686 7.31209 13.0764 8.60603C12.3198 9.36266 11.314 9.77938 10.2443 9.77942C9.89429 9.77944 9.5457 9.73379 9.20821 9.64373L4.63171 14.2202C4.61047 14.2419 4.58144 14.2538 4.54997 14.2538ZM6.86679 7.91998L6.86508 7.92048L3.27001 11.5157L4.50751 12.7532L8.78881 8.47013L8.92832 8.33422C9.33276 8.54267 9.78807 8.65294 10.2462 8.65294C11.0149 8.65294 11.7378 8.35341 12.2817 7.80953C12.8733 7.21882 13.1784 6.39938 13.1187 5.56133L11.0442 7.63583C10.9498 7.73028 10.824 7.7823 10.6901 7.7823C10.5561 7.7823 10.4304 7.73028 10.3359 7.63583L8.39101 5.69093C8.19574 5.49565 8.19574 5.17791 8.39101 4.98263L10.4673 2.90813C10.4021 2.90347 10.3327 2.90038 10.2555 2.90038C9.48473 2.90038 8.76089 3.19974 8.21731 3.74333C7.32805 4.63259 7.11719 5.98022 7.69261 7.09673L6.86731 7.92203L6.86679 7.91998Z" fill="#1677FF"/>
                        </svg>
                        <span>管理名テキスト</span>
                    </div>
                    <div class="layout-k-info-divider"></div>
                    <div class="layout-k-info-item">
                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M13.7497 13.1251H2.2504C1.97448 13.1251 1.75 12.9006 1.75 12.6247V3.3754C1.75 3.09948 1.97448 2.875 2.2504 2.875H6.2221C6.25289 2.875 6.28405 2.88746 6.3076 2.9092L8.1409 4.6624H13.7497C14.0256 4.6624 14.2501 4.88688 14.2501 5.1628V12.6247C14.2501 12.9006 14.0256 13.1251 13.7497 13.1251ZM2.875 4V12.0001H13.1251V5.7874H7.6891L5.8207 4H2.875Z" fill="#1677FF"/>
                        </svg>
                        <span>未分類</span>
                    </div>
                    <button class="layout-k-info-action">変更する</button>
                </div>
            </div>

            {{-- Content area --}}
            <div class="layout-k-content">
                <div class="layout-k-content-inner">
                    <div class="layout-k-section-title">セクションタイトル名</div>
                    <div class="lme-flex lme-flex-col" style="gap: 20px">
                        <lme-button kind="default" size="md" type="secondary" @click="openDrawer" style="width: 150px;padding: 0 !important;">ドロワー｜小</lme-button>
                        <lme-button kind="default" size="md" type="secondary" @click="openDrawerLg" style="width: 150px;padding: 0 !important;">ドロワー｜大</lme-button>
                    </div>
                </div>
            </div>
        </div>

        {{-- Drawer --}}
        <lme-drawer v-model="showDrawer" :width="drawerWidth" title="タイトル">
            <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 style="padding: 16px; border-bottom: 1px solid #D1D1D1;">
                    <p style="font-size: 14px; color: #1F1F1F; margin: 0;">コンテンツ（区切り線あり）</p>
                </div>
                <div style="padding: 16px;">
                    <p style="font-size: 14px; color: #1F1F1F; margin: 0;">コンテンツ（区切り線なし）</p>
                </div>
                <div style="padding: 16px; border-bottom: 1px solid #D1D1D1;">
                    <p style="font-size: 14px; color: #1F1F1F; margin: 0;">※コンテンツの編集はインスタンスの切り離しを行なってください。</p>
                    <p style="font-size: 14px; color: #1F1F1F; margin: 0;">※コンテンツの横幅は「コンテナに合わせて拡大」を推奨</p>
                </div>
                <div style="padding: 16px;">
                    <a class="link-hover" href="#" style="font-size: 14px; color: #1677FF; text-decoration: underline;">使用例を見る（ファイルへのリンク）</a>
                </div>
            </template>
        </lme-drawer>
    </div>
@endsection

@push('js')
    <script src="/js/media/vue.min.js"></script>
    <script src="/js/component-base/breadcrumb/lme-breadcrumb.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-flat.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/drawer/lme-drawer.js?v={{config("sns-line.version")}}"></script>
    <script>
        new Vue({
            el: '#vue-element',
            data: {
                breadcrumbs: [
                    { label: '階層1', href: '#' },
                    { label: '階層2', href: '#' },
                    { label: '現在の画面' }
                ],
                showDrawer: false,
                drawerWidth: "300px",
            },
            methods: {
                openDrawer(){
                    this.drawerWidth = "300px";
                    this.showDrawer = true;
                },
                openDrawerLg(){
                    this.drawerWidth = "480px";
                    this.showDrawer = true;
                },
                saveTop(){

                }
            }
        });
    </script>
@endpush