@push('css')
<style>
    .cl-switch-lv2 {
        transform: rotate(180deg);
    }

    .cl-switch-lv2>span::before {
        width: 43px;
    }

    .cl-toggle-switch-lv2 {
        margin: 0;
    }
</style>
@endpush

<div class="content">
    <div class="w-4/5">
        <label class="mb-[8px] text-[20px] font-semibold block text-[#222222]">利用規約の設定</label>
        <span class="text-[#222222] text-[14px]">利用規約を予約確認ページに表示して、チェックを入れないと予約ボタンを押せないように設定できます。</span>

        <div class="text-[#222222] mt-4 !font-[600] text-[16px]">
            利用規約の表示
            <div class="flex mt-[9px]">
                <div class="flex items-center justify-center grid grid-cols-3 gap-1">
                    <span class="text-[16px] leading-normal font-light text-[#222222]" :style="showContentPolicy ? ' ' : 'font-weight: 600;'">表示しない</span>
                    <div class="cl-toggle-switch cl-toggle-switch-lv2 flex items-center justify-center">
                        <label class="cl-switch cl-switch-lv2 !cursor-pointer"><input type="checkbox" v-model="showContentPolicy" :value="showContentPolicy ? 1 : 0"><span></span></label>
                    </div>
                    <span class="text-[16px] leading-normal font-light" :class="showContentPolicy ? 'text-[#08BF5A] !font-[600]' : 'text-[#888888]'">表示する</span>
                </div>
            </div>
        </div>
        <div class="min-h-[43vh]">
            <div class="text-[#222222] mt-4 font-bold text-[16px]" v-show="showContentPolicy">
                <div class="flex justify-between !w-[600px]">
                    <span class="!font-[600]">利用規約を入力してください</span>
                    <span class="!text-[#888888] !mr-[5px] !text-[14px]">@{{ calendarPolicy.content_policy ? numberWithCommas(calendarPolicy.content_policy.length) : 0 }}/10,000</span>
                </div>
                <div class="mt-2">
                    <textarea id="txtarea_content_policy" class="form-control font-normal !w-[600px] !h-[300px] !rounded-[3px] !border-[#E0E0E0]" v-model="calendarPolicy.content_policy"></textarea>
                </div>
            </div>
        </div>
        <div>
            <button @click="savePolicy()" class="relative mt-5 w-[200px] h-[40px] border border-solid border-[#08BF5A] text-[#08BF5A] font-semibold rounded-[3px] hover:text-white hover:!bg-[#08BF5A] !text-[16px] !font-[300]"> 保存</button>
        </div>
    </div>
</div>