<!DOCTYPE html>
<html lang="en" class="uk-height-1-1">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Comitup</title>
    <link rel="icon" href="img/favicon.ico">
    <!-- CSS FILES -->
    <link rel="stylesheet" type="text/css" href="css/uikit.css">
    <script src="js/blink.js"></script>
</head>
<body class="uk-height-1-1">
<div class="uk-flex uk-flex-center uk-flex-middle">
    <div class="uk-position-bottom-center uk-position-small">
        <span class="uk-text-small uk-text-muted">Comitup - Built with <a href="https://github.com/davesteele/comitup" title="Comitup" target="_blank" data-uk-tooltip>ComitUp</a></span>
    </div>
    <div class="uk-width-large uk-padding-small">
        <div class="uk-width-1-1 uk-text-center">
            <span class="" uk-icon="icon: world; ratio: 5"></span>
            <p class="uk-text-large">Connect to Wifi</p>
        </div>

        <div class="uk-margin">
            <div class="uk-width-1-1">
                <p>
                    Press the Connect button to connect this device to {{ ssid }}. <br><br>

                    {% if mode == 'single' %}
                    This will terminate the current hotspot. Connect to {{ ssid }}.local for access.<br><br>

                    If the connection fails, this hotspot will be re-created.<br><br>
                    {% else %}
                    The hotspot will remain, but this web service will be terminated.<br><br>

                    If the connection fails, the web service will be restored.<br><br>
                    {% endif %}
                </p>
            </div>
        </div>
        <form action="/connect" method="POST">
            <div class="uk-grid uk-grid-small">
                <div class="uk-width-2-3">
                    <input type="hidden" name="ssid" value="{{ ssid_encoded }}">
                    <input class="uk-input" placeholder="Password (if required)" type="password" name="password">
                </div>
                <div class="uk-width-1-3">
                    <button type="submit" value="Connect" class="uk-button uk-button-primary uk-width-expand">Connect</button>
                </div>
            </div>
        </form>
            <div class="uk-margin">
            <div class="uk-flex uk-flex-center">
		{% if can_blink %}
		    <div>
                        <img src="img/ledoff.gif" id="ledimg">
		    </div>
		    <div>
                        <button onclick="blink()" class="uk-button uk-margin-left">Locate</button>
		    </div>
		{% endif %}
            </div>
	    </div>
    </div>
</div>

<!-- JS FILES -->
<script src="js/uikit"></script>
<script src="js/uikit-icons"></script>
