<!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 -->
    <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>
        header {
            padding: 1em;
        }

        .base {
            margin: 0 auto 0 auto;
            min-height: 100vh;
            max-width: 900px;
            background-color: var(--base-back-color, var(--bg-secondary));
            border-radius: 15px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        h1 {
            margin-bottom: 1em;
        }

        .button {
            margin: 2em;
            width: 20em;
            height: 4em;
        }
    </style>
</head>

<body>
    {PPP INCLUDE:template2_admin_header.php}
    <div class="base_wrapper">
        <div class="base">
            <div>
                <h1>{PPP:title}</h1>
                <div id="contents_area">

                </div>
                <div id="control">
                    {PPP IF:use_password}

                    {/PPP IF}
                    <button id="conform_button" class="p-button">入場</button><br>
                    <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>