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

<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 | Pair</title>


    <link rel="stylesheet" href="/static/css/spectre.min.css">
    <script src="/static/js/util.js"></script>
    <style>
        :root {
            --primary-color: #bc1f2d;
        }

        #pair_code {
            max-width: 4em;
        }

        .container {
            max-width: 30em;
        }

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

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

        #submit_pairing_code {
            cursor: pointer;
            user-select: unset;
        }

        .centered {
            margin: auto;
        }
    </style>
</head>

<body>
<div class="container">
    <!-- <div class="hero bg-gray">
        <div class="hero-body">
            <h1>Pair your headset.</h1>
        </div>
    </div> -->

    <div class="card">
        <div class="card-image">
            <img src="/static/img/pair_code_screenshot.png" class="img-responsive" alt="Pairing code location">
        </div>
        <div class="card-header">
            <div class="card-title h5">Enter Pairing Code</div>
            <div class="card-subtitle text-gray"></div>
        </div>
        <div class="card-body">
            You can find the code in the bottom left of your menu tablet in conVRged.
        </div>
        <div class="card-footer centered">
            <form id="pair_form">
                <label for="pair_code"></label><input class="btn" type="text" id="pair_code" placeholder="0000">
                <input class="btn btn-primary" id="submit_pairing_code" type="submit" value="Submit"/>
            </form>
        </div>
    </div>
</div>

<script>

    const pair_code_input = document.getElementById('pair_code');

    document.getElementById('pair_form').addEventListener('submit', submitCode, true);

    function submitCode(event) {
        fetch('/api/get_device_by_pairing_code/' + pair_code_input.value)
            .then(resp => resp.json())
            .then(resp => {
                if (resp.length === 2 && resp[1] === 400) {
                    window.location.href = "/failure?code=1";
                    console.error(resp);
                } else {
                    if (resp['hw_id'] !== '') {
                        setCookie('hw_id', resp['hw_id'], 60);
                        window.location.href = "/";
                    }
                }
            }).catch(e => {
            window.location.href = "/failure";
            console.error(e);
        });
        event.preventDefault();
        return false;
    }
</script>
</body>

</html>