@extends('component-base.layout')

@section('title')
    Tabs
@endsection

@push('css')
    <link rel="stylesheet" href="/css/component-base/tab/tab.css?v={{config("sns-line.version")}}">
    <style>
        .title {
            font-size: 16px;
            font-weight: 400;
            color: #9A9EAD;
            min-width: 120px;
        }
    </style>
@endpush

@section('contents')
    <div id="vue-element" v-cloak>
        <div class="lme-flex lme-flex-col" style="gap: 20px">
            <div class="lme-flex lme-flex-col" style="width: 1000px; padding:20px;background-color: #ffffff;gap: 30px; border-radius: 10px;">
                <div class="lme-flex lme-items-center" style="gap: 50px; width: 100%; min-width: 0;">
                    <div class="title">通常</div>
                    <lme-tab-horizontal
                            v-model="selectedTabId"
                            :tabs="tabs"
                            :max-tab="5"
                            @add="addTab"
                            @remove="removeTab"
                            @select="onSelectTab"
                            size="sm"
                            @select-option="onSelectOption">
                    </lme-tab-horizontal>
                </div>

                <div class="lme-flex lme-items-center" style="gap: 50px; width: 100%; min-width: 0;">
                    <div class="title">タブ追加と削除</div>
                    <lme-tab-horizontal
                            v-model="selectedTabId2"
                            :tabs="tabs2"
                            :max-tab="5"
                            @add="addTab2"
                            @remove="removeTab2"
                            @select="onSelectTab2"
                            size="md"
                            add-new-operation
                            @select-option="onSelectOption2">
                    </lme-tab-horizontal>
                </div>

                <div class="lme-flex lme-items-center" style="gap: 50px; width: 100%; min-width: 0;">
                    <div class="title">ドロップダウン</div>
                    <lme-tab-horizontal
                            v-model="selectedTabId3"
                            :tabs="tabs3"
                            :max-tab="5"
                            @add="addTab3"
                            @remove="removeTab3"
                            @select="onSelectTab3"
                            size="md"
                            @select-option="onSelectOption3">
                    </lme-tab-horizontal>
                </div>
            </div>

            <div class="lme-flex lme-flex-col" style="width:1000px; padding:20px;background-color: #ffffff;gap: 30px; border-radius: 10px">
                <div class="lme-flex lme-items-center" style="gap: 50px; width: 100%; min-width: 0;">
                    <div class="title">通常</div>
                    <lme-tab-horizontal
                            v-model="selectedTabId7"
                            :tabs="tabs7"
                            :max-tab="10"
                            @add="addTab7"
                            @remove="removeTab7"
                            @select="onSelectTab7"
                            size="md"
                            @select-option="onSelectOption7">
                    </lme-tab-horizontal>
                </div>

                <div class="lme-flex lme-items-center" style="gap: 50px; width: 100%; min-width: 0;">
                    <div class="title">タブ追加と削除</div>
                    <lme-tab-horizontal
                            v-model="selectedTabId8"
                            :tabs="tabs8"
                            :max-tab="10"
                            @add="addTab8"
                            @remove="removeTab8"
                            @select="onSelectTab8"
                            size="md"
                            add-new-operation
                            @select-option="onSelectOption8">
                    </lme-tab-horizontal>
                </div>

                <div class="lme-flex lme-items-center" style="gap: 50px; width: 100%; min-width: 0;">
                    <div class="title">ドロップダウン</div>
                    <lme-tab-horizontal
                            v-model="selectedTabId9"
                            :tabs="tabs9"
                            :max-tab="8"
                            @add="addTab9"
                            @remove="removeTab9"
                            @select="onSelectTab9"
                            size="md"
                            @select-option="onSelectOption9">
                    </lme-tab-horizontal>
                </div>
            </div>

            <div class="lme-flex lme-flex-col" style="width: 1000px; padding:20px;background-color: #ffffff;gap: 30px; border-radius: 10px">
                <div class="lme-flex lme-items-center" style="gap: 50px; width: 100%; min-width: 0;">
                    <div class="title">通常</div>
                    <lme-tab-horizontal
                            v-model="selectedTabId4"
                            :tabs="tabs4"
                            :max-tab="5"
                            @add="addTab4"
                            @remove="removeTab4"
                            @select="onSelectTab4"
                            size="sm"
                            @select-option="onSelectOption4">
                    </lme-tab-horizontal>
                </div>

                <div class="lme-flex lme-items-center" style="gap: 50px; width: 100%; min-width: 0;">
                    <div class="title">タブ追加と削除</div>
                    <lme-tab-horizontal
                            v-model="selectedTabId5"
                            :tabs="tabs5"
                            :max-tab="5"
                            @add="addTab5"
                            @remove="removeTab5"
                            @select="onSelectTab5"
                            size="sm"
                            add-new-operation
                            @select-option="onSelectOption5">
                    </lme-tab-horizontal>
                </div>

                <div class="lme-flex lme-items-center" style="gap: 50px; width: 100%; min-width: 0;">
                    <div class="title">ドロップダウン</div>
                    <lme-tab-horizontal
                            v-model="selectedTabId6"
                            :tabs="tabs6"
                            :max-tab="5"
                            @add="addTab6"
                            @remove="removeTab6"
                            @select="onSelectTab6"
                            size="sm"
                            @select-option="onSelectOption6">
                    </lme-tab-horizontal>
                </div>
            </div>

            <div class="lme-flex lme-flex-col" style="width: 1000px; padding:20px;background-color: #ffffff;gap: 30px; border-radius: 10px">
                <div class="lme-flex lme-items-center" style="gap: 50px; width: 100%; min-width: 0;">
                    <div class="title">通常</div>
                    <lme-tab-horizontal
                            v-model="selectedTabId10"
                            :tabs="tabs10"
                            :max-tab="10"
                            @add="addTab10"
                            @remove="removeTab10"
                            @select="onSelectTab10"
                            size="sm"
                            @select-option="onSelectOption10">
                    </lme-tab-horizontal>
                </div>

                <div class="lme-flex lme-items-center" style="gap: 50px; width: 100%; min-width: 0;">
                    <div class="title">タブ追加と削除</div>
                    <lme-tab-horizontal
                            v-model="selectedTabId11"
                            :tabs="tabs11"
                            :max-tab="10"
                            @add="addTab11"
                            @remove="removeTab11"
                            @select="onSelectTab11"
                            size="sm"
                            add-new-operation
                            @select-option="onSelectOption11">
                    </lme-tab-horizontal>
                </div>

                <div class="lme-flex lme-items-center" style="gap: 50px; width: 100%; min-width: 0;">
                    <div class="title">ドロップダウン</div>
                    <lme-tab-horizontal
                            v-model="selectedTabId12"
                            :tabs="tabs12"
                            :max-tab="8"
                            @add="addTab12"
                            @remove="removeTab12"
                            @select="onSelectTab12"
                            size="sm"
                            @select-option="onSelectOption12">
                    </lme-tab-horizontal>
                </div>
            </div>

            <div class="lme-flex" style="max-width:1000px;height: 500px; padding:20px;background-color: #ffffff;gap: 30px; border-radius: 10px">
                <div class="lme-flex lme-flex-col" style="gap: 20px;height: 400px;width:250px;">
                    <div style="font-weight: bold">通常</div>
                    <lme-tab-vertical
                            v-model="selectedVerticalTabId"
                            :tabs="tabs_vertical"
                            :max-tab="5"
                            @add="addTabVertical"
                            @remove="removeTabVertical"
                            @select="onSelectTabVertical"
                            @select-option="onSelectOptionVertical"
                            @toggle="toggleTabVertical">
                    </lme-tab-vertical>
                </div>

                <div class="lme-flex lme-flex-col" style="gap: 20px;height: 400px;width:250px;">
                    <div style="font-weight: bold">タブ追加と削除</div>
                    <lme-tab-vertical
                            v-model="selectedVerticalTabId2"
                            :tabs="tabs_vertical2"
                            :max-tab="10"
                            add-new-operation
                            @add="addTabVertical2"
                            @remove="removeTabVertical2"
                            @select="onSelectTabVertical2"
                            @select-option="onSelectOptionVertical2"
                            @toggle="toggleTabVertical2">
                    </lme-tab-vertical>
                </div>

                <div class="lme-flex lme-flex-col" style="gap: 20px;height: 400px;width:250px;">
                    <div style="font-weight: bold">ドロップダウン</div>
                    <lme-tab-vertical
                            v-model="selectedVerticalTabId3"
                            :tabs="tabs_vertical3"
                            :max-tab="5"
                            @add="addTabVertical3"
                            @remove="removeTabVertical3"
                            @select="onSelectTabVertical3"
                            @select-option="onSelectOptionVertical3"
                            @toggle="toggleTabVertical3">
                    </lme-tab-vertical>
                </div>
            </div>
        </div>

    </div>

@endsection

@push('js')
    <script src="/js/component-base/tab/lme-tab-horizontal.js?v={{config("sns-line.version")}}"></script>
    <script src="/js/component-base/tab/lme-tab-vertical.js?v={{config("sns-line.version")}}"></script>
    <script src="/js/component-base/tab/tab.js?v={{config("sns-line.version")}}"></script>
@endpush