@extends('component-base.layout')

@section('title')
List
@endsection

@push('css')
<link rel="stylesheet" href="/css/component-base/toast/toast.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/list/list.css?v={{config("sns-line.version")}}">
<style>
    .wrapper-sample {
        width: 100%;
        padding: 10px 20px 0 20px;
    }
    .demo-list {
        max-width: 320px;
    }
    h2 {
        font-size: 16px;
        font-weight: 600;
        margin: 20px 0 8px 20px;
        color: #1F1F1F;
    }
    h3 {
        font-size: 14px;
        font-weight: 500;
        margin: 12px 0 4px 20px;
        color: #555;
    }
</style>
@endpush

@section('contents')
<div id="vue-element" v-cloak>
    <div class="lme-flex lme-flex-col" style="gap: 20px">

        <div class="lme-card">
            <div class="wrapper-sample">
                <div class="demo-list">
                    <lme-list size="small" type="fill">
                        <lme-list-item v-for="item in arrowItems"
                            :key="item.id"
                            :label="item.name"
                            size="small"
                            type="fill"
                            mode="redirect"
                            :selected="selectedArrow === item.id"
                            @click="selectedArrow = item.id">
                        </lme-list-item>
                    </lme-list>
                </div>
            </div>
            <div class="wrapper-sample">
                <div class="demo-list">
                    <lme-list size="medium" type="fill">
                        <lme-list-item v-for="item in arrowItems2"
                            :key="item.id"
                            :label="item.name"
                            size="medium"
                            type="fill"
                            mode="redirect"
                            :selected="selectedArrow2 === item.id"
                            @click="selectedArrow2 = item.id">
                        </lme-list-item>
                    </lme-list>
                </div>
            </div>

            <div class="wrapper-sample">
                <div class="demo-list">
                    <lme-list size="small" type="line">
                        <lme-list-item v-for="item in arrowItems3"
                            :key="item.id"
                            :label="item.name"
                            size="small"
                            type="line"
                            mode="redirect"
                            :selected="selectedArrow3 === item.id"
                            @click="selectedArrow3 = item.id">
                        </lme-list-item>
                    </lme-list>
                </div>
            </div>
            <div class="wrapper-sample">
                <div class="demo-list">
                    <lme-list size="medium" type="line">
                        <lme-list-item v-for="item in arrowItems4"
                            :key="item.id"
                            :label="item.name"
                            size="medium"
                            type="line"
                            mode="redirect"
                            :selected="selectedArrow4 === item.id"
                            @click="selectedArrow4 = item.id">
                        </lme-list-item>
                    </lme-list>
                </div>
            </div>
        </div>

        <div class="lme-card lme-flex lme-flex-col" style="gap: 10px">
            <div class="wrapper-sample">
                <div class="demo-list">
                    <lme-list size="small" type="fill">
                        <lme-list-item v-for="item in editItems"
                            :key="item.id"
                            :label="item.name"
                            :size="item.size"
                            type="fill"
                            mode="inline"
                            :selected="selectedEdit === item.id"
                            show-edit
                            show-more
                            @click="selectedEdit = item.id"
                            @edit-save="onEditSave(item, $event)"
                            @more="onMore(item)">
                        </lme-list-item>
                    </lme-list>
                </div>
            </div>
        </div>

        <div class="lme-card lme-flex lme-flex-col" style="gap: 10px">
            <div class="wrapper-sample">
                <div class="demo-list">
                    <lme-list size="small" type="fill">
                        <lme-list-item v-for="item in editItems2"
                            :key="item.id"
                            :label="item.name"
                            :size="item.size"
                            type="fill"
                            mode="inline"
                            :selected="selectedEdit2 === item.id"
                            show-edit
                            show-copy
                            show-more
                            @click="selectedEdit2 = item.id"
                            @edit-save="onEditSave(item, $event)"
                            @copy="onCopy(item)"
                            @more="onMore(item)">
                        </lme-list-item>
                    </lme-list>
                </div>
            </div>
        </div>

        <div class="lme-card lme-flex lme-flex-col" style="gap: 10px">
            <div class="wrapper-sample">
                <div class="demo-list">
                    <lme-list size="small" type="fill">
                        <lme-list-item v-for="item in editItems3"
                            :key="item.id"
                            :label="item.name"
                            :size="item.size"
                            type="fill"
                            mode="inline"
                            :selected="selectedEdit3 === item.id"
                            show-edit
                            show-move-up
                            show-move-down
                            show-more
                            @click="selectedEdit3 = item.id"
                            @edit-save="onEditSave(item, $event)"
                            @move-up="onMoveUp(editItems3, item)"
                            @move-down="onMoveDown(editItems3, item)"
                            @more="onMore(item)">
                        </lme-list-item>
                    </lme-list>
                </div>
            </div>
        </div>

        <div class="lme-card lme-flex lme-flex-col" style="gap: 10px">
            <div class="wrapper-sample">
                <div class="demo-list">
                    <lme-list size="medium" type="line">
                        <lme-list-item v-for="item in editItems4"
                            :key="item.id"
                            :label="item.name"
                            :size="item.size"
                            type="line"
                            mode="inline"
                            :selected="selectedEdit4 === item.id"
                            show-edit
                            show-move-up
                            show-move-down
                            show-more
                            @click="selectedEdit4 = item.id"
                            @edit-save="onEditSave(item, $event)"
                            @move-up="onMoveUp(editItems4, item)"
                            @move-down="onMoveDown(editItems4, item)"
                            @copy="onCopy(item)"
                            @more="onMore(item)">
                        </lme-list-item>
                    </lme-list>
                </div>
            </div>
        </div>

    </div>
</div>
@endsection

@push('js')
<script src="/js/component-base/toast/lme-toast.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/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/list/list.js?v={{config("sns-line.version")}}"></script>
@endpush