<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Light setup - {{LIGHT_NAME}}</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/purecss@0.6.2/build/pure-min.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://{{IP_ADDRESS}}/css">
    </style>
</head>
<body>
    <fieldset>
        <h3>{{LIGHT_NAME}}</h3>
        <div class="toast"></div>
        <div class="pure-form pure-form-aligned">
            <div class="pure-controls">
                <a href="/update" class="pure-button">update</a>
                <a href="/?reset=1" class="pure-button">reset light</a>
                <a href="/?resettc" class="pure-button">reset timing control data</a>
                <a href="/?alert=1" class="pure-button">alert</a>
                <a href="#" class="pure-button" onclick="sendPWMTestRequest(event)">PWM Test</a>
            </div>
            <br>
            <div><!-- Tab links -->
                <a href="#" id="tab-a-lights" class="pure-button pure-button-primary">Lights control</a>
                <a href="#" id="tab-a-config" class="pure-button">Config</a>
                <a href="#" id="tab-a-tde" class="pure-button">Timing data edit</a>
            </div>
            <br>
          <div id="tab-lights" class="visible"> <!-- lights control tab -->
            <br>
            <div class="pure-control-group">
            <label for="tc_on">
                <strong>Timing control</strong>
            </label>
            <a id="tc_on" class="pure-button {{TC_LINK_PRIMARY_ON}}" href="#">ON</a>
            <a id="tc_off" class="pure-button {{TC_LINK_PRIMARY_OFF}}" href="#">OFF</a>
            <br>
                <label for="transition">Transition time (s)</label>
                <input id="transition" name="transition" type="text" placeholder="10" value="{{TRANSITION_TIME}}">
            </div>
            <br>
            <script src="http://{{IP_ADDRESS}}/js_top">
            </script>
            <table border=0>
                <tr>
                    <td class="top-align">