<!DOCTYPE html>
<html>
    <head>
        <title>{appname}</title>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="spectre.min.css" />
        <script src="jquery-1.12.3.min.js"></script>
        <style>
            html, body {
                 font-size: 12px;
                 margin: 0;
                 padding: 0;
                 width: 100%;
                 height: 100%;
            }
            div.page {
                display: none;
            }
            .bg-grey {
                background-color: #efefef;
                padding: 1rem;
                border-radius: .3rem;
            }
            div.hint {
                background-color: #efefef;
                padding: 2rem;
                margin: 20px 0;
                border-left: 2px solid blue;
            }
        </style>
        <script>

            $(function() {

                var timer = null;

                $("form").submit(function(event) {
                    button = $(":submit", this);
                    button.addClass("loading");
                    $.ajax({
                        'method': 'POST',
                        'url': '/save',
                        'dataType': 'json',
                        'data': $(this).serializeArray()
                    }).done(function(data) {
                        button.removeClass("loading");
                    }).fail(function() {
                        button.removeClass("loading");
                    });
                    event.preventDefault();
                    setTimeout(update, 200);
                });

                function update() {
                    $.ajax({
                        'method': 'GET',
                        'url': '/status',
                        'dataType': 'json'
                    }).done(function(data) {
                        $("#device").val(data.device);
                        $("#network").val(data.network.toUpperCase());
                        $("#ip").val(data.ip);
                        $("#mqtt").val(data.mqtt ? "CONNECTED" : "NOT CONNECTED");
                        if (data.relay) {
                            $("#relay").addClass('btn-primary').html("ON");
                            $("#status").val(1);
                        } else {
                            $("#relay").removeClass('btn-primary').html("OFF");
                            $("#status").val(0);
                        }
                    });
                }

                $("#btn-admin").click(function() {
                    $("#panel-admin").show();
                    $("#panel-status").hide();
                    $("#btn-admin").addClass('btn-primary');
                    $("#btn-status").removeClass('btn-primary');
                });

                $("#btn-status").click(function() {
                    $("#panel-admin").hide();
                    $("#panel-status").show();
                    $("#btn-admin").removeClass('btn-primary');
                    $("#btn-status").addClass('btn-primary');
                });

                $("#relay").click(function(event) {
                    var status = parseInt($("#status").val());
                    if (status == 1) {
                        $.ajax({'method': 'GET', 'url': '/relay/off'});
                    } else {
                        $.ajax({'method': 'GET', 'url': '/relay/on'});
                    }
                    setTimeout(update, 200);
                    event.preventDefault();
                })

                function init() {
                    update();
                    timer = setInterval(update, {updateInterval});
                    $("[name='rfDevice']").val({rfDevice});
                }

                init();

            });

        </script>
    </head>
    <body>

        <div class="container">

            <header class="navbar bg-grey">
                <section class="navbar-section">
                    <a href="#" class="navbar-brand">{appname}</a>
                </section>
                <section class="navbar-section">
                    <button class="btn" id="btn-admin">Administration</button>
                    <button class="btn btn-primary" id="btn-status">Status</button>
                </section>
            </header>

            <div class="page" id="panel-status" style="display: block;">

                <div class="columns">
                    <div class="column col-12">
                        <form class="form-horizontal">
                            <div class="form-group">
                                <div class="col-xs-3">
                                    <label class="form-label" for="device">Device</label>
                                </div>
                                <div class="col-xs-9">
                                    <input type="text" class="form-input" id="device" disabled>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-xs-3">
                                    <label class="form-label" for="network">Network</label>
                                </div>
                                <div class="col-xs-9">
                                    <input type="text" class="form-input" id="network" disabled>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-xs-3">
                                    <label class="form-label" for="ip">IP</label>
                                </div>
                                <div class="col-xs-9">
                                    <input type="text" class="form-input" id="ip" disabled>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-xs-3">
                                    <label class="form-label" for="mqtt">MQTT Status</label>
                                </div>
                                <div class="col-xs-9">
                                    <input type="text" class="form-input" id="mqtt" disabled>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-xs-3">
                                    <label class="form-label" for="relay">Relay Status</label>
                                </div>
                                <div class="col-xs-6">
                                    <input type="hidden" class="form-input" name="status" id="status" value="0" />
                                    <a class="btn" data="0" id="relay">OFF</a>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <div class="page" id="panel-admin">

                <form action="/" method="post">

                    <div class="hint">
                        You can configure up to 3 different WiFi networks. The device will try to connect to any of them starting with the first one.
                    </div>

                    <div class="columns">

                        <div class="column col-4">
                            <h5>Network 1</h5>
                            <div class="form-group">
                                <label class="form-label" for="ssid0">Network SSID</label>
                                <input name="ssid0" type="text" class="form-input" value="{ssid0}" size="8" tabindex="1" placeholder="Network SSID">
                            </div>
                            <div>
                                <label class="form-label" for="pass0">Network Password</label>
                                <input name="pass0" type="text" class="form-input" value="{pass0}" maxlength="255" tabindex="2" placeholder="Network password">
                            </div>
                        </div>
                        <div class="column col-4">
                            <h5>Network 2</h5>
                            <div class="form-group">
                                <label class="form-label" for="ssid1">Network SSID</label>
                                <input name="ssid1" type="text" class="form-input" value="{ssid1}" size="8" tabindex="3" placeholder="Network SSID">
                            </div>
                            <div>
                                <label class="form-label" for="pass1">Network Password</label>
                                <input name="pass1" type="text" class="form-input" value="{pass1}" maxlength="255" tabindex="4" placeholder="Network password">
                            </div>
                        </div>
                        <div class="column col-4">
                            <h5>Network 3</h5>
                            <div class="form-group">
                                <label class="form-label" for="ssid2">Network SSID</label>
                                <input name="ssid2" type="text" class="form-input" value="{ssid2}" size="8" tabindex="5" placeholder="Network SSID">
                            </div>
                            <div>
                                <label class="form-label" for="pass2">Network Password</label>
                                <input name="pass2" type="text" class="form-input" value="{pass2}" maxlength="255" tabindex="6" placeholder="Network password">
                            </div>
                        </div>

                    </div>

                    <div class="clearfix"></div>

                    <div class="hint">
                        Configure an <strong>MQTT broker</strong> in your network and you will be able to change the switch status via an MQTT message. Just send a 0 or a 1 as a payload to the provided topic below.
                        The switch will also report its current open/close status to the same topic and its IP address to the topic you define plus "<code>/ip</code>". Leave the server field empty to disable MQTT.
                    </div>

                    <div class="columns">
                        <div class="column col-4">
                            <div class="form-group">
                                <label class="form-label" for="mqttServer">MQTT Server</label>
                                <input name="mqttServer" type="text" class="form-input" value="{mqttServer}" size="8" tabindex="8" placeholder="MQTT Server">
                            </div>
                        </div>
                        <div class="column col-2">
                            <div class="form-group">
                                <label class="form-label" for="mqttPort">MQTT Port</label>
                                <input name="mqttPort" type="text" class="form-input" value="{mqttPort}" size="8" tabindex="9" placeholder="1883">
                            </div>
                        </div>
                    </div>
                    <div class="columns">
                        <div class="column col-4">
                            <div class="form-group">
                                <label class="form-label" for="mqttUser">MQTT User</label>
                                <input name="mqttUser" type="text" class="form-input" value="{mqttUser}" size="8" tabindex="10" placeholder="Leave blank if no user/pass">
                            </div>
                        </div>
                        <div class="column col-4">
                            <div class="form-group">
                                <label class="form-label" for="mqttPassword">MQTT Password</label>
                                <input name="mqttPassword" type="text" class="form-input" value="{mqttPassword}" size="8" tabindex="11" placeholder="Leave blank if no user/pass">
                            </div>
                        </div>
                    </div>
                    <div class="columns">
                        <div class="column col-4">
                            <div class="form-group">
                                <label class="form-label" for="mqttTopic">MQTT Topic</label>
                                <input name="mqttTopic" type="text" class="form-input" value="{mqttTopic}" size="8" tabindex="12" placeholder="MQTT Topic">
                            </div>
                        </div>
                    </div>

                    <div class="clearfix"></div>

                    <div class="hint">
                        If your device supports RF switching you can configure here the channel and device ID.
                    </div>

                    <div class="columns">
                        <div class="column col-2">
                            <div class="form-group">
                                <label class="form-label" for="rfChannel">RF Channel</label>
                                <input name="rfChannel" type="number" min="0" max="31" step="1" class="form-input" value="{rfChannel}" tabindex="13"/>
                            </div>
                        </div>
                        <div class="column col-2">
                            <div class="form-group">
                                <label class="form-label" for="rfDevice">RF Device</label>
                                <select name="rfDevice" class="form-input" tabindex="14">
                                    <option value="0">A</a>
                                    <option value="1">B</a>
                                    <option value="2">C</a>
                                    <option value="3">D</a>
                                    <option value="4">E</a>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div>
                        <div>
                            <button class="btn btn-primary float-right">Update</button>
                        </div>
                    </div>

                </form>
            </div>

        </div>
    </body>
</html>