@extends('component-base.layout')

@section('title')
    Empty View
@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/empty-view/empty-view.css?v={{config("sns-line.version")}}">
    <style>
        .demo-section {
            padding: 20px;
            background: white;
            border-radius: 10px;
        }
        .demo-section + .demo-section {
            margin-top: 20px;
        }
        .demo-label {
            font-weight: bold;
            margin-bottom: 15px;
            font-size: 14px;
            color: #1F1F1F;
        }
        .demo-row {
            display: flex;
            flex-direction: column;
            align-items: start;
            gap: 50px;
            flex-wrap: wrap;
        }
        .demo-item {
            display: flex;
            flex-direction: column;
            gap: 10px;
            min-width: 280px;
        }
        .demo-controls {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 20px;
        }
        .demo-controls label {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 14px;
            cursor: pointer;
        }
    </style>
@endpush

@section('contents')
    <div id="vue-element" v-cloak>
        {{-- All 5 types --}}
        <div class="demo-section">
            <div class="demo-controls" v-if="false">
                <label>
                    <input type="checkbox" v-model="showDescription" />
                    Description
                </label>
                <label>
                    <input type="checkbox" v-model="showButton" />
                    Button
                </label>
            </div>
            <div class="demo-row">
                <div class="demo-item">
                    <div style="font-weight: bold;margin-bottom: 20px">データがありません</div>
                    <lme-empty-view
                        type="empty"
                        :show-description="showDescription"
                        :show-button="showButton"
                        @click="onClick"></lme-empty-view>
                </div>
                <div class="demo-item">
                    <div style="font-weight: bold;margin-bottom: 20px">未接続・未連携</div>
                    <lme-empty-view
                        type="disconnected"
                        :show-description="showDescription"
                        :show-button="showButton"
                        @click="onClick"></lme-empty-view>
                </div>
                <div class="demo-item">
                    <div style="font-weight: bold;margin-bottom: 20px">データエラー</div>
                    <lme-empty-view
                        type="error"
                        :show-description="showDescription"
                        :show-button="showButton"
                        @click="onClick"></lme-empty-view>
                </div>
                <div class="demo-item">
                    <div style="font-weight: bold;margin-bottom: 20px">ネットワークエラー</div>
                    <lme-empty-view
                        type="network-error"
                        :show-description="showDescription"
                        :show-button="showButton"
                        @click="onClick()"></lme-empty-view>
                </div>
                <div class="demo-item">
                    <div style="font-weight: bold;margin-bottom: 20px">検索無し</div>
                    <lme-empty-view
                        type="no-results"
                        :show-description="showDescription"
                        :show-button="showButton"
                        @click="onClick"></lme-empty-view>
                </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/empty-view/lme-empty-view.js?v={{config("sns-line.version")}}"></script>
    <script src="/js/component-base/empty-view/empty-view.js?v={{config("sns-line.version")}}"></script>
@endpush