@extends('component-base.layout')

@section('title')
    Radio
@endsection

@push('css')
    <link rel="stylesheet" href="/_assets/commons/css/components/radio2.css?v={{config("sns-line.version")}}" type="text/css">
    <style>
        .large.ct202602-gr-radio .ct202602-radio-item {
            height: 40px !important;
        }
        .medium.ct202602-gr-radio .ct202602-radio-item {
            height: 32px !important;
        }
        .small.ct202602-gr-radio .ct202602-radio-item {
            height: 24px !important;
        }
        #component {
            margin-top: 0;
        }
        #component {
            padding: 30px;
            background: white;
            margin-top: 24px;
        }
    </style>
@endpush

@section('contents')
    <div id="component" v-cloak style="border-radius: 10px">
        <div style="font-weight: bold">Icon</div>
        <div class="ct202602-radio-list" style="background: #fff; padding: 10px 0; border-radius: 10px">
            <div class="ct202602-custom-radio">
                <input class="ct202602-radio-box" type="radio" value="0" name="radio3" id="radio011">
            </div>
            <div class="ct202602-custom-radio">
                <input class="ct202602-radio-box" type="radio" value="1" name="radio3" id="radio021">
            </div>
            <div class="ct202602-custom-radio">
                <input class="ct202602-radio-box" type="radio" value="2" name="radio3" id="radio031" checked>
            </div>
            <div class="ct202602-custom-radio">
                <input class="ct202602-radio-box" type="radio" value="3" name="radio6" id="radio041" disabled>
            </div>
            <div>
                <div class="ct202602-custom-radio large">
                    <input class="ct202602-radio-box" type="radio" value="4" name="radio6" id="radio051" checked disabled>
                </div>
            </div>
        </div>

        <div style="font-weight: bold; margin-top: 30px; margin-bottom: 15px">Background</div>
        <div class="ct202602-radio-list with-bg" style="background: #f1ecec; padding: 15px; border-radius: 10px; margin-bottom: 15px">
            <div class="ct202602-custom-radio">
                <input class="ct202602-radio-box" type="radio" value="0" name="radio" id="radio01" checked>
                <label class="ct202602-radio-label" for="radio01">
                    選択なし
                </label>
            </div>
            <div class="ct202602-custom-radio">
                <input class="ct202602-radio-box" type="radio" value="1" name="radio" id="radio02">
                <label class="ct202602-radio-label" for="radio02">
                    選択なし
                </label>
            </div>
            <div class="ct202602-custom-radio">
                <input class="ct202602-radio-box" type="radio" value="1" name="radio" id="radio03">
                <label class="ct202602-radio-label" for="radio03">
                    選択中
                </label>
            </div>
            <div class="ct202602-custom-radio">
                <input class="ct202602-radio-box" type="radio" value="1" name="radio8" id="radio08" disabled>
                <label class="ct202602-radio-label" for="radio08">
                    選択なし
                </label>
            </div>
            <div class="ct202602-custom-radio">
                <input class="ct202602-radio-box" type="radio" value="1" name="radio8" id="radio09" checked disabled>
                <label class="ct202602-radio-label" for="radio09">
                    選択中
                </label>
            </div>
        </div>

        <div style="font-weight: bold; margin-top: 50px; margin-bottom: 10px">Simple</div>
        <div class="ct202602-radio-list" style="background: #fff; padding: 10px 0; border-radius: 10px">
            <div class="ct202602-custom-radio">
                <input class="ct202602-radio-box" type="radio" value="0" name="radio2" id="radio111">
                <label class="ct202602-radio-label" for="radio111">
                    選択なし
                </label>
            </div>
            <div class="ct202602-custom-radio">
                <input class="ct202602-radio-box" type="radio" value="1" name="radio2" id="radio121">
                <label class="ct202602-radio-label" for="radio121">
                    選択なし
                </label>
            </div>
            <div class="ct202602-custom-radio">
                <input class="ct202602-radio-box" type="radio" value="1" name="radio2" id="radio131" checked>
                <label class="ct202602-radio-label" for="radio131">
                    選択中
                </label>
            </div>
            <div class="ct202602-custom-radio">
                <input class="ct202602-radio-box" type="radio" value="1" name="radio9" id="radio161" disabled>
                <label class="ct202602-radio-label" for="radio161">
                    選択なし
                </label>
            </div>
            <div>
                <div class="ct202602-custom-radio large">
                    <input class="ct202602-radio-box" type="radio" value="1" name="radio9" id="radio171" checked disabled>
                    <label class="ct202602-radio-label" for="radio171">
                        選択中
                    </label>
                </div>
            </div>
        </div>

        <div style="font-weight: bold; margin-top: 40px; margin-bottom: 10px">Button</div>
        <div style="margin-top: 10px; background: #fff; border-radius: 10px; padding: 15px">
            <div class="ct202602-gr-radio large" style="margin-bottom: 30px">
                <div class="ct202602-radio-item" :class="{ 'active': selected == item.value }" v-for="item in items" @click="setSelected(item.value)">@{{ item.text }}</div>
            </div>
            <div class="ct202602-gr-radio medium" style="margin-bottom: 30px">
                <div class="ct202602-radio-item" :class="{ 'active': selected == item.value }" v-for="item in items" @click="setSelected(item.value)">@{{ item.text }}</div>
            </div>
            <div class="ct202602-gr-radio small">
                <div class="ct202602-radio-item" :class="{ 'active': selected == item.value }" v-for="item in items" @click="setSelected(item.value)">@{{ item.text }}</div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script>
        var vueE = new Vue({
            el: '#component',
            data: {
                selected: 1,
                items: [
                    { value: 1, text: '選択状態' },
                    { value: 2, text: '選択なし' },
                    { value: 3, text: '選択なし' },
                    { value: 4, text: '選択なし' },
                    { value: 5, text: 'ホバー状態' }
                ],
            },
            watch: {
            },
            created() {
            },
            mounted() {
            },
            methods: {
                setSelected(value) {
                    this.selected = value
                }
            }
        })
    </script>
@endpush