<html>

<head>

    <link rel="apple-touch-icon" sizes="180x180" href="/static/favicons/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/static/favicons/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/static/favicons/favicon-16x16.png">
    <link rel="manifest" href="/static/favicons/site.webmanifest">
    <link rel="mask-icon" href="/static/favicons/safari-pinned-tab.svg" color="#5bbad5">
    <meta name="msapplication-TileColor" content="#b91d47">
    <meta name="theme-color" content="#ffffff">

    <title>VEL Connect</title>

    <link rel="stylesheet" type="text/css" href="/static/css/spectre.min.css">
    <link rel="stylesheet" type="text/css" href="/static/css/spectre-exp.min.css">
    <link rel="stylesheet" type="text/css" href="/static/css/spectre-icons.min.css">
    <link rel="stylesheet" type="text/css" href="/static/css/coloris.min.css">
    <script type="application/javascript" src="/static/js/util.js"></script>
    <style>
        .container {
            max-width: 30em;
        }

        .card {
            margin: 1em;
            box-shadow: 0 0 2em #0003;
        }

        input.btn {
            cursor: auto;
            user-select: auto;
        }

        .centered {
            margin: auto;
        }

        hr {
            color: #0004;
        }
    </style>
</head>

<body>
<div class="container">

    <div id="loading"><br><br>
        <div class="loading loading-lg"></div>
    </div>
    <div id="failure" style="display: none;"><br><br><br>☹️</div>


    <div id="headset_details" style="display: none;">
        <div class="panel card">
            <div class="card-image">
                <img id="cover_image" class="img-responsive" src="/static/img/cover_default.png">
            </div>
            <div class="panel-header text-center">
                <figure class="avatar avatar-lg" style="background: none;"><img
                        src="/static/favicons/android-chrome-192x192.png" alt="Avatar"></figure>
                <div class="panel-title h5 mt-10">Headset ID:</div>
                <code class="panel-subtitle hw_id">---</code>
                <br>
                <br>
                <div class="container">
                    <div class="columns">
                        <div class="col-6">
                            <div class="panel-title h5 mt-10">Pairing Code:</div>
                            <code class="panel-subtitle pairing_code">---</code>
                        </div>
                        <div class="col-6">
                            <a href="/pair">
                                <button class="btn btn-primary btn-lg tooltip tooltip-right" id="pair_new"
                                        data-tooltip="Clear this headset and pair a new headset">Pair New
                                </button>
                            </a>
                        </div>
                    </div>
                </div>
                <hr>
            </div>


            <div class="panel-body">
                <div class="container">
                    <div class="columns">
                        <div class="tile tile-centered col-6">
                            <div class="tile-content">
                                <div class="tile-title text-bold">First Seen</div>
                                <div class="tile-subtitle date_created">---</div>
                            </div>
                        </div>
                        <div class="tile tile-centered col-6">
                            <div class="tile-content">
                                <div class="tile-title text-bold">Last Modified</div>
                                <div class="tile-subtitle last_modified">---</div>
                            </div>
                        </div>
                    </div>
                </div>

                <br>

                <div class="divider text-center" data-content="Join Link"></div>

                <div style="display: none;" class="text-center" id="join_success">
                    <h2>Success!</h2>

                    <p>Your device will now join the room <strong>{{ link }}</strong> when you launch {{ app_id }}.</p>
                </div>
                <div style="display: none;" class="text-center" id="join_failure">
                    <h2>FAIL!</h2>

                    <p>Something went wrong sending the join request to your device.</p>
                </div>
                <br>
            </div>
        </div>
    </div>

    <script type="application/javascript" src="/static/js/coloris.min.js"></script>
    <script type="application/javascript" src="/static/js/device_details.js"></script>
    <script type="application/javascript" src="/static/js/velconnect_util.js"></script>
    <script>

        let submit_button = document.getElementById('submit_pairing_code');
        let pair_code_input = document.getElementById('pair_code');
        let loading = document.getElementById('loading');
        let enter_pairing_id = document.getElementById('enter_pairing_id');
        let headset_details = document.getElementById('headset_details');
        let hw_id_field = document.getElementById('hw_id');
        let failure = document.getElementById('failure');
        let current_app = document.getElementById('current_app');
        let current_room = document.getElementById('current_room');
        let set_room_id = document.getElementById('set_room_id');
        let set_user_color = document.getElementById('set_user_color');
        let user_color = document.getElementById('user_color');
        let carpet_color = document.getElementById('carpet_color');
        let set_user_name = document.getElementById('set_user_name');
        let set_tv_url = document.getElementById('set_tv_url');
        let set_carpet_color = document.getElementById('set_carpet_color');
        let set_avatar_url = document.getElementById('set_avatar_url');


        // check cookie
        let hw_id = getCookie('hw_id');

        if (hw_id !== "" && hw_id !== undefined && hw_id !== "undefined") {

            document.getElementById('cover_image').src = `/static/img/cover_{{app_id}}.png`

            setDeviceData({
                "join_room_request_{{app_id}}": "{{link}}"
            }, () => {
                document.getElementById("join_success").style.display = "block";
            }, () => {
                document.getElementById("join_failure").style.display = "block";
            });

        } else {
            window.location.href = "/pair";
        }


    </script>
</div>
</body>

</html>