@extends('component-base.layout')

@section('title')
    E - ステップ
@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="/_assets/commons/css/components/step.css?v={{config("sns-line.version")}}">
    <link rel="stylesheet" href="/css/component-base/layout-demo/layout-e.css?v={{config("sns-line.version")}}">
    <style>
        .ct202602-steps.vertical {
            justify-content: start;
            width: 214px;
        }
        .ct202602-steps.vertical .ct202602-step:not(:last-child) {
            margin-bottom: 45px;
        }
        .ct202602-steps.vertical .ct202602-step:not(:last-child):before {
            top: 38px;
            left: 16px;
            height: 46px;
        }

        .ct202602-steps.vertical .ct202602-step {
            align-items: flex-start;
            padding-bottom: 8px;
        }
        .ct202602-steps.vertical .ct202602-step .ct202602-circle {
            width: 32px;
            height: 32px;
            min-width: 32px;
            font-size: 14px;
            margin-right: 8px;
        }
        .ct202602-steps.vertical .ct202602-step .ct202602-s-label {
            padding: 8px;
            width: calc(100% - 40px);
        }
        .ct202602-steps.vertical .ct202602-step .ct202602-s-label-title {
            font-size: 15px;
            line-height: 22px;
        }
        .ct202602-steps.vertical .ct202602-step .ct202602-s-label-detail {
            top: 35px;
        }
    </style>
@endpush

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

            {{-- Header: Title + Info bar --}}
            <div class="layout-e-header">
                <div class="layout-e-header-left">
                    <div class="layout-e-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-e-info-bar">
                    <div class="layout-e-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-e-info-divider"></div>
                    <div class="layout-e-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-e-info-action">変更する</button>
                </div>
            </div>

            {{-- Body: Steps sidebar + Content --}}
            <div class="layout-e-body">
                {{-- Left sidebar with steps --}}
                <div class="layout-e-sidebar">
                    <steps :steps="steps" :step_active="currentStep" :type_step="2" :is_detail="true"></steps>
                </div>

                {{-- Right content area --}}
                <div class="layout-e-content">
                    <div class="layout-e-content-inner">
                        <div class="layout-e-section-title">セクションタイトル名</div>
                    </div>

                    {{-- Footer buttons --}}
                    <div class="layout-e-footer">
                        <lme-button kind="default" size="lg" type="secondary" @click="saveNext">
                            保存して次へ
                            <svg width="10" height="15" viewBox="0 0 10 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M9.05664 6.91047L0.251953 0.0335191C0.148438 -0.0465591 0 0.0257066 0 0.156566V1.66633C0 1.76203 0.0449219 1.85383 0.119141 1.91243L7.15039 7.40266L0.119141 12.8929C0.0429688 12.9515 0 13.0433 0 13.139V14.6488C0 14.7796 0.150391 14.8519 0.251953 14.7718L9.05664 7.89485C9.37695 7.64485 9.37695 7.16047 9.05664 6.91047Z" fill="currentColor"/>
                            </svg>
                        </lme-button>
                        <lme-button kind="default" size="lg" @click="saveTop">保存してTOPに戻る</lme-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script src="/js/media/vue.min.js"></script>
    <script src="/_assets/commons/js/components/steps.js?v={{config("sns-line.version")}}"></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/layout-demo/layout-e.js?v={{config("sns-line.version")}}"></script>
@endpush