<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- meta -->
    {PPP INCLUDE:template2_meta_header.php}

    <!-- system header -->
    {PPP INCLUDE:template2_sys_header.php}

    <!-- template resouce -->
    <!-- template resouce -->
    <link rel="stylesheet" href="{PPP SITE_URL}/system_resource/css/recss.css">
    <link rel="stylesheet" href="{PPP THEME_URL}/css/styles.css">
    <link rel="stylesheet" href="{PPP:site_url}/user_resource/user.css">
    <script>
        document.addEventListener('DOMContentLoaded', async () => {
            document.querySelector('#conform_button').addEventListener("click", function() {
                location.replace("{PPP:redirect_url}")
            });

            document.querySelector("#cancel_button").addEventListener("click", function() {
                location.href = "{PPP:return_url}";
            });
        });
    </script>

    <style>
        .article_container {
            max-width: 900px;
            margin: 0 auto;
            border-radius: 15px;
            display: grid;
            place-items: center;
        }

        .section {
            margin-bottom: 1rem;
        }

        .tag {
            font-size: 0.8rem;
        }

        .global-header {
            margin-left: 0.5rem;
        }

        .header {
            margin-left: 0.5rem;
        }

        .control {
            text-align: center;
        }

        h2 {
            margin-bottom: 1em;
            text-align: center;
        }

        .p-contents {
            margin: 0 auto 2em auto;
            width: 30em;
        }

        .p-button {
            margin: 2em;
            width: 20em;
            height: 4em;

        }
    </style>
</head>

<body>
    {PPP:admin_header}
    <div class="global-header">
        <a href="{PPP:site_url}/">
            {PPP:site_title}
        </a>
    </div>
    <div class="header">
        <a href="" data-log-return>
            &lt; 戻る
        </a>
    </div>
    <div class="main-container article_container">
        <div class="main-contents">

            <div class="p-contents">
                <h2>{PPP:title}</h2>
                {PPP:contents}
                <p>
                    {PPP IF:type == 0}
                    このサイトには18歳未満の方に不適切な表現が含まれます<br>
                    {PPP ELSE}
                    この記事には18歳未満の方に不適切な表現が含まれます<br>
                    {/PPP IF}
                </p>
                <p>
                    あなたは18歳以上ですか？
                </p>

                <div id="control">
                    <button id="conform_button" class="p-button p-button-force">18歳以上でNSFWコンテンツの閲覧に同意します</button>
                    <button id="cancel_button" class="p-button p-button-normal">{PPP:cancel_title}</button>
                </div>
            </div>
        </div>
    </div>
    <footer>{PPP:powered_info}</footer>
</body>

</html>