@extends('layout.basic.main')
@push('css')
    <link rel="stylesheet" href="/_assets/commons/css/test_component.css?v={{config("sns-line.version")}}" type="text/css">
@endpush
@section('content')
    <div class="detail" id="component" v-cloak>
        <div style="border-bottom: 1px solid var(--line-color); margin-bottom: 30px">
            <h1>Pagination</h1>
            <pagination :pagination="pagination" @change_page="changePage" @change_limit="changeLimit"></pagination>
        </div>
        <div style="border-bottom: 1px solid var(--line-color); padding-bottom: 100px">
            <h1 style="margin-bottom: 30px">Steps</h1>
            <steps :steps="steps"></steps>
            <div style="margin-top: 100px;"></div>
            <steps :steps="steps" :class_name="'horizontal'"></steps>
        </div>

        <div style="margin: 30px 0; border-bottom: 1px solid var(--line-color)">
            <h1 style="margin-bottom: 30px">Checkbox</h1>
            <label class="ct202602-custom-checkbox">
                <input type="checkbox">
                <span class="ct202602-checkbox-box"></span>
                <span class="ct202602-checkbox-label">選択中</span>
            </label>
            <label class="ct202602-custom-checkbox">
                <input type="checkbox" checked>
                <span class="ct202602-checkbox-box"></span>
                <span class="ct202602-checkbox-label">選択中</span>
            </label>
            <label class="ct202602-custom-checkbox part">
                <input type="checkbox" checked>
                <span class="ct202602-checkbox-box"></span>
                <span class="ct202602-checkbox-label">部分選択</span>
            </label>
            <label class="ct202602-custom-checkbox part">
                <input type="checkbox" disabled checked>
                <span class="ct202602-checkbox-box"></span>
                <span class="ct202602-checkbox-label">部分選択</span>
            </label>
            <label class="ct202602-custom-checkbox">
                <input type="checkbox" disabled checked>
                <span class="ct202602-checkbox-box"></span>
                <span class="ct202602-checkbox-label">選択中</span>
            </label>
            <label class="ct202602-custom-checkbox">
                <input type="checkbox" disabled>
                <span class="ct202602-checkbox-box"></span>
                <span class="ct202602-checkbox-label">選択なし</span>
            </label>
        </div>

        <div style="">
            <h1 style="margin-bottom: 20px">Radio</h1>
            <div class="radio-list with-bg" style="background: #f1ecec; padding: 20px">
                <div class="custom-radio">
                    <input class="radio-box" type="radio" value="0" name="radio" id="radio01">
                    <label class="radio-label" for="radio01">
                        選択なし
                    </label>
                </div>
                <div class="custom-radio">
                    <input class="radio-box" type="radio" value="1" name="radio" id="radio02">
                    <label class="radio-label" for="radio02">
                        選択なし
                    </label>
                </div>
                <div class="custom-radio">
                    <input class="radio-box" type="radio" value="1" name="radio" id="radio03" checked>
                    <label class="radio-label" for="radio03">
                        選択中
                    </label>
                </div>
                <div class="custom-radio">
                    <input class="radio-box" type="radio" value="1" name="radio" id="radio04" disabled>
                    <label class="radio-label" for="radio04">
                        選択なし
                    </label>
                </div>
                <div class="custom-radio">
                    <input class="radio-box" type="radio" value="1" name="radio" id="radio05" checked disabled>
                    <label class="radio-label" for="radio05">
                        選択中
                    </label>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('js')
    {{--    Pagination  --}}
    <script src="/_assets/commons/js/pagination.js?v={{config("sns-line.version")}}"></script>
    {{--    End Pagination  --}}
    {{--    Step  --}}
    <script src="/_assets/commons/js/components/steps.js?v={{config("sns-line.version")}}"></script>
    {{--    End Step  --}}
    <script src="/_assets/commons/js/test_component.js?v={{config("sns-line.version")}}"></script>
@endpush