@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">
                <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]">@{{ calendarPolicy.content_policy ? calendarPolicy.content_policy.length : 0 }}/10,000</span>
                </div>
                <div class="mt-2">
                    <textarea class="form-control font-normal !w-[600px] !h-[300px] !rounded-[3px] !border-[#E0E0E0] "
{{--                              :class="{'!border-[#a94442] !border-[2px]': !calendarPolicy.content_policy || ( calendarPolicy.content_policy && calendarPolicy.content_policy.length == 0 )}"--}}
                              v-model="calendarPolicy.content_policy"></textarea>
                </div>
            </div>
        </div>
        <div>
            <button @click="savePolicy()" class="relative mt-5 w-[200px] h-[40px] text-[16px] border border-solid border-[#08BF5A] text-[#08BF5A] rounded-[3px] hover:text-white hover:!bg-[#08BF5A]">保存</button>
        </div>
    </div>
</div>