<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=0.9">
    <link rel="stylesheet" href="style.css">
    <script type="text/javascript" src="function.js"></script>
    <title>ESP-NOW Switch</title>
</head>

<body onload="load();">
    <form class="box">
        <h1>ESP-NOW Switch </h1>
        <div class="wrapper">
            <p class="text">Firmware:</p>
            <p class="text" id="version"></p>
            <input id="firmware" value="{{firmware}}" hidden />
        </div>

        <div class="wrapper">
            <p class="text">Device name:</p>
            <input id="deviceName" value="{{deviceName}}" placeholder="Name" autocomplete="off" label
                title="ESP-NOW device name (up to 150 characters)" />
        </div>

        <div class="wrapper">
            <p class="text">ESP-NOW network name:</p>
            <input id="espnowNetName" value="{{espnowNetName}}" placeholder="Name" autocomplete="off" label
                title="ESP-NOW network name (1 to 20 characters)" />
        </div>

        <div class="wrapper">
            <p class="text-select">Relay GPIO:</p>
            <input id="relayPin" value="{{relayPin}}" hidden />
            <input id="relayPinType" value="{{relayPinType}}" hidden />
            <p><select id="relayPinSelect">
                    <option value="0">NONE</option>
                    <option value="1">GPIO01</option>
                    <option value="2">GPIO02</option>
                    <option value="3">GPIO03</option>
                    <option value="4">GPIO04</option>
                    <option value="5">GPIO05</option>
                    <option value="6">GPIO06</option>
                    <option value="7">GPIO07</option>
                    <option value="8">GPIO08</option>
                    <option value="9">GPIO09</option>
                    <option value="10">GPIO10</option>
                    <option value="11">GPIO11</option>
                    <option value="12">GPIO12</option>
                    <option value="13">GPIO13</option>
                    <option value="14">GPIO14</option>
                    <option value="15">GPIO15</option>
                    <option value="16">GPIO16</option>
                </select></p>
            <p><select id="relayPinTypeSelect">
                    <option value="1">HIGH</option>
                    <option value="0">LOW</option>
                </select></p>
        </div>

        <div class="wrapper">
            <p class="text-select">Led GPIO:</p>
            <input id="ledPin" value="{{ledPin}}" hidden />
            <input id="ledPinType" value="{{ledPinType}}" hidden />
            <p><select id="ledPinSelect">
                    <option value="0">NONE</option>
                    <option value="1">GPIO01</option>
                    <option value="2">GPIO02</option>
                    <option value="3">GPIO03</option>
                    <option value="4">GPIO04</option>
                    <option value="5">GPIO05</option>
                    <option value="6">GPIO06</option>
                    <option value="7">GPIO07</option>
                    <option value="8">GPIO08</option>
                    <option value="9">GPIO09</option>
                    <option value="10">GPIO10</option>
                    <option value="11">GPIO11</option>
                    <option value="12">GPIO12</option>
                    <option value="13">GPIO13</option>
                    <option value="14">GPIO14</option>
                    <option value="15">GPIO15</option>
                    <option value="16">GPIO16</option>
                </select></p>
            <p><select id="ledPinTypeSelect">
                    <option value="1">HIGH</option>
                    <option value="0">LOW</option>
                </select></p>
        </div>

        <div class="wrapper">
            <p class="text-select">Button GPIO:</p>
            <input id="buttonPin" value="{{buttonPin}}" hidden />
            <input id="buttonPinType" value="{{buttonPinType}}" hidden />
            <p><select id="buttonPinSelect">
                    <option value="0">NONE</option>
                    <option value="1">GPIO01</option>
                    <option value="2">GPIO02</option>
                    <option value="3">GPIO03</option>
                    <option value="4">GPIO04</option>
                    <option value="5">GPIO05</option>
                    <option value="6">GPIO06</option>
                    <option value="7">GPIO07</option>
                    <option value="8">GPIO08</option>
                    <option value="9">GPIO09</option>
                    <option value="10">GPIO10</option>
                    <option value="11">GPIO11</option>
                    <option value="12">GPIO12</option>
                    <option value="13">GPIO13</option>
                    <option value="14">GPIO14</option>
                    <option value="15">GPIO15</option>
                    <option value="16">GPIO16</option>
                </select></p>
            <p><select id="buttonPinTypeSelect">
                    <option value="1">RISING</option>
                    <option value="0">FALLING</option>
                </select></p>
        </div>

        <div class="wrapper">
            <p class="text-select">Ext button GPIO:</p>
            <input id="extButtonPin" value="{{extButtonPin}}" hidden />
            <input id="extButtonPinType" value="{{extButtonPinType}}" hidden />
            <p><select id="extButtonPinSelect">
                    <option value="0">NONE</option>
                    <option value="1">GPIO01</option>
                    <option value="2">GPIO02</option>
                    <option value="3">GPIO03</option>
                    <option value="4">GPIO04</option>
                    <option value="5">GPIO05</option>
                    <option value="6">GPIO06</option>
                    <option value="7">GPIO07</option>
                    <option value="8">GPIO08</option>
                    <option value="9">GPIO09</option>
                    <option value="10">GPIO10</option>
                    <option value="11">GPIO11</option>
                    <option value="12">GPIO12</option>
                    <option value="13">GPIO13</option>
                    <option value="14">GPIO14</option>
                    <option value="15">GPIO15</option>
                    <option value="16">GPIO16</option>
                </select></p>
            <p><select id="extButtonPinTypeSelect">
                    <option value="1">RISING</option>
                    <option value="0">FALLING</option>
                </select></p>
        </div>

        <div class="wrapper">
            <input class="btn" type="submit" value="Save" onclick="saveSetting(this);">
            <input class="btn" type="submit" value="Restart" onclick="restart(this);">
        </div>
    </form>
</body>

</html>