@extends('component-base.layout')

@section('title')
    Popover
@endsection

@push('css')
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-rqn26AG5Pj86AF4SO72RK5fyefcQ/x32DNQfChxWvbXIyXFePlEktwD18fEz+kQU" crossorigin="anonymous">
    <link rel="stylesheet" href="/_assets/commons/css/components/popover.css?v={{config("sns-line.version")}}" type="text/css">
    <style>
        #component {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .ct202602-popover-container {
            margin-right: 20px;
        }
        #component {
            padding: 30px;
            background: white;
            margin-top: 24px;
        }
        .section-title {
            font-size: 16px;
            font-weight: 600;
            color: #1F1F1F;
            width: 100%;
            padding: 16px 0 8px;
            border-bottom: 1px solid #E7E7E7;
            margin-bottom: 20px;
        }
        .popover-row {
            display: flex;
            justify-content: center;
            width: 100%;
            gap: 30px;
            margin-bottom: 30px;
        }
        .popover-row--spread {
            justify-content: space-between;
        }
    </style>
@endpush

@section('contents')
    <div id="component" v-cloak>
        {{-- ===== Original popover (text only) ===== --}}
        <div class="section-title">本文のみ</div>
        <div style="display: flex; justify-content: center; width: 100%; margin-bottom: 60px">
            <popover :type_popover="TYPE_POPOVER.BOTTOM_RIGHT" title="上/右に表示（本文のみ）" content="テキストテキストテキストテキストテキスト"></popover>
            <popover :type_popover="TYPE_POPOVER.BOTTOM_CENTER" title="上/中央に表示（本文のみ）" content="テキストテキストテキストテキストテキスト"></popover>
            <popover :type_popover="TYPE_POPOVER.BOTTOM_LEFT" title="上/左に表示（本文のみ）" content="テキストテキストテキストテキストテキスト"></popover>
        </div>
        <div style="display: flex; justify-content: space-between; width: 100%; margin-bottom: 60px">
            <popover :type_popover="TYPE_POPOVER.RIGHT_BOTTOM" title="左/上に表示（本文のみ）" content="テキストテキストテキストテキストテキスト"></popover>
            <popover :type_popover="TYPE_POPOVER.LEFT_BOTTOM" title="右/上に表示（本文のみ）" content="テキストテキストテキストテキストテキスト"></popover>
        </div>
        <div style="display: flex; justify-content: space-between; width: 100%; margin-bottom: 60px">
            <popover :type_popover="TYPE_POPOVER.RIGHT_CENTER" title="左/中央に表示（本文のみ）" content="テキストテキストテキストテキストテキスト"></popover>
            <popover :type_popover="TYPE_POPOVER.LEFT_CENTER" title="右/中央に表示（本文のみ）" content="テキストテキストテキストテキストテキスト"></popover>
        </div>
        <div style="display: flex; justify-content: space-between; width: 100%; margin-bottom: 60px">
            <popover :type_popover="TYPE_POPOVER.RIGHT_TOP" title="左/下に表示（本文のみ）" content="テキストテキストテキストテキストテキスト"></popover>
            <popover :type_popover="TYPE_POPOVER.LEFT_TOP" title="右/下に表示（本文のみ）" content="テキストテキストテキストテキストテキスト"></popover>
        </div>
        <div style="display: flex; justify-content: center; width: 100%; margin-bottom: 150px">
            <popover :type_popover="TYPE_POPOVER.TOP_RIGHT" title="下/右に表示（本文のみ）" content="テキストテキストテキストテキストテキスト"></popover>
            <popover :type_popover="TYPE_POPOVER.TOP_CENTER" title="下/中央に表示（本文のみ）" content="テキストテキストテキストテキストテキスト"></popover>
            <popover :type_popover="TYPE_POPOVER.TOP_LEFT" title="下/左に表示（本文のみ）" content="テキストテキストテキストテキストテキスト"></popover>
        </div>

        {{-- ===== Popover Container (title + content + buttons) ===== --}}
        <div class="section-title">タイトルあり</div>
        <div class="popover-row">
            <popover-container :type_popover="TYPE_POPOVER.BOTTOM_RIGHT" title="上/左に表示（タイトルあり）" content="テキストテキストテキストテキスト<br>テキスト" :show-buttons="true"></popover-container>
            <popover-container :type_popover="TYPE_POPOVER.BOTTOM_CENTER" title="上/中央に表示（タイトルあり）" content="テキストテキストテキストテキスト<br>テキスト" :show-buttons="true"></popover-container>
            <popover-container :type_popover="TYPE_POPOVER.BOTTOM_LEFT" title="上/右に表示（タイトルあり）" content="テキストテキストテキストテキスト<br>テキスト" :show-buttons="true"></popover-container>
        </div>
        <div class="popover-row popover-row--spread">
            <popover-container :type_popover="TYPE_POPOVER.RIGHT_BOTTOM" title="左/上に表示（タイトルあり）" content="テキストテキストテキストテキスト<br>テキスト" :show-buttons="true"></popover-container>
            <popover-container :type_popover="TYPE_POPOVER.LEFT_BOTTOM" title="右/上に表示（タイトルあり）" content="テキストテキストテキストテキスト<br>テキスト" :show-buttons="true"></popover-container>
        </div>
        <div class="popover-row popover-row--spread">
            <popover-container :type_popover="TYPE_POPOVER.RIGHT_CENTER" title="左/中央に表示（タイトルあり）" content="テキストテキストテキストテキスト<br>テキスト" :show-buttons="true"></popover-container>
            <popover-container :type_popover="TYPE_POPOVER.LEFT_CENTER" title="右/中央に表示（タイトルあり）" content="テキストテキストテキストテキスト<br>テキスト" :show-buttons="true"></popover-container>
        </div>
        <div class="popover-row popover-row--spread">
            <popover-container :type_popover="TYPE_POPOVER.RIGHT_TOP" title="左/下に表示（タイトルあり）" content="テキストテキストテキストテキスト<br>テキスト" :show-buttons="true"></popover-container>
            <popover-container :type_popover="TYPE_POPOVER.LEFT_TOP" title="右/下に表示（タイトルあり）" content="テキストテキストテキストテキスト<br>テキスト" :show-buttons="true"></popover-container>
        </div>
        <div class="popover-row">
            <popover-container :type_popover="TYPE_POPOVER.TOP_RIGHT" title="下/右に表示（タイトルあり）" content="テキストテキストテキストテキスト<br>テキスト" :show-buttons="true"></popover-container>
            <popover-container :type_popover="TYPE_POPOVER.TOP_CENTER" title="下/中央に表示（タイトルあり）" content="テキストテキストテキストテキスト<br>テキスト" :show-buttons="true"></popover-container>
            <popover-container :type_popover="TYPE_POPOVER.TOP_LEFT" title="下/左に表示（タイトルあり）" content="テキストテキストテキストテキスト<br>テキスト" :show-buttons="true"></popover-container>
        </div>
    </div>
@endsection

@push('js')
    <script src="/_assets/commons/js/components/popover.js?v={{config("sns-line.version")}}"></script>
    <script>
        var vueE = new Vue({
            el: '#component',
            data: {
                TYPE_POPOVER
            },
            watch: {
            },
            created() {
            },
            mounted() {

            },
            methods: {
            }
        })
    </script>
@endpush