<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/jquery-simple-websocket@1.1.4/src/jquery.simple.websocket.min.js"></script>
        <script src="https://cdn.socket.io/4.1.2/socket.io.min.js" integrity="sha384-toS6mmwu70G0fw54EGlWWeA4z3dyJ+dlXBtSURSKN4vyRFOcxd3Bzjj/AoOwY+Rg" crossorigin="anonymous"></script>


        <script src="https://cdn.jsdelivr.net/npm/prismjs@1.23.0/prism.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/prismjs@1.23.0/components/prism-json.js"></script>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.23.0/themes/prism-tomorrow.css">

        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
        <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>

        <link rel="stylesheet" href="/static/css/index.css">
        <link rel="stylesheet" href="/static/css/tabs.css">
        <script src="/static/js/send-message.js"></script>

        <script language="JavaScript">
           $(document).ready(function() {
               init_messages();
           });
        </script>

    </head>

    <body>
        <div class='ui text container'>
            <h1 class='ui dividing header'>APRSD {{ version }}</h1>
        </div>

        <div class='ui grid text container'>
            <div class='left floated ten wide column'>
                <span style='color: green'>{{ callsign }}</span>
                connected to
                <span style='color: blue' id='aprsis'>NONE</span>
            </div>

            <div class='right floated four wide column'>
                <span id='uptime'>NONE</span>
            </div>
        </div>

        <h3 class="ui dividing header">Send Message Form</h3>
        <form id="sendform" name="sendmsg" action="">
            <p><label for="from_call">From Callsign:</label>
            <input type="text" name="from_call" id="from" value="WB4BOR"></p>
            <p><label for="from_call_password">Password:</label>
            <input type="password" name="from_call_password" id='password' value="24496"></p>

            <p><label for="to_call">To Callsign:</label>
            <input type="text" name="to_call" id="to" value="WB4BOR-11"></p>

            <p><label for="message">Message:</label>
            <input type="text" name="message" id="message" value="ping"></p>

            <p><label for="wait">Wait for Reply?</label>
                <input type="checkbox" name="wait_reply" id="wait_reply" value="off" checked>
            </p>

            <input type="submit" name="submit" class="button" id="send_msg" value="Send" />
        </form>

          <h3 class="ui dividing header">Messages (<span id="msgs_count">0</span>)</h3>
          <div class="ui styled fluid accordion" id="accordion">
              <div id="msgsDiv" class="ui mini text">Messages</div>
          </div>


    </body>

</html>
