<html>
<head>
    <meta name="viewport"
          content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
    <script src="/static/js/upstream/jquery-3.7.1.min.js"></script>
    <script src="/static/js/upstream/jquery.toast.js"></script>
    <script src="/static/js/upstream/socket.io.min.js"></script>

    <link rel="stylesheet" href="/static/css/upstream/bootstrap.min.css">
    <script src="/static/js/upstream/bootstrap.bundle.min.js"></script>

    <!--
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css"
          rel="stylesheet"
          integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9"
          crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm"
            crossorigin="anonymous"></script>
     -->

    <link rel="stylesheet" href="/static/css/upstream/google-fonts.css">
    <link rel="stylesheet" href="/static/css/upstream/jquery.toast.css">

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

    <script type="text/javascript">
        var initial_stats = {{ initial_stats|tojson|safe }};
        var latitude = parseFloat('{{ latitude|safe }}');
        var longitude = parseFloat('{{ longitude|safe }}');

        var memory_chart = null;
        var message_chart = null;

        $(document).ready(function() {
            console.log(initial_stats);
            start_update();
            init_chat();
            //reset_Tabs();

            console.log("latitude", latitude);
            console.log("longitude", longitude);

            if (isNaN(latitude) || isNaN(longitude) && location.protocol != 'https:') {
                // Have to disable the beacon button.
                $('#send_beacon').prop('disabled', true);
            }

            $("#wipe_local").click(function() {
                console.log('Wipe local storage');
                localStorage.clear();
            });

            // When a tab is clicked, populate the to_call form field.
            $(document).on('shown.bs.tab', 'button[data-bs-toggle="tab"]', function (e) {
                var tab = $(e.target);
                var callsign = tab.attr("callsign");
                var to_call = $('#to_call');
                to_call.val(callsign);
                selected_tab_callsign = callsign;
            });

            /*$('[data-bs-toggle="popover"]').popover(
                {html: true, animation: true}
            );*/
            reload_popovers();
        });
    </script>
</head>

<body>
    <div class="wc-container">
        <div class="wc-row header">
            <div class="container-sm">
                <div class="row">
                    <div class="column">
                        <h1>APRSD WebChat {{ version }}</h1>
                    </div>
                </div>
                <div class="row">
                    <div class="column">
                        <span style='color: green'>{{ callsign }}</span>
                        connected to
                        <span style='color: blue' id='aprs_connection'>{{ aprs_connection|safe }}</span>
                        <span id='uptime'>NONE</span>
                    </div>
                </div>
                <div class="row">
                    <form class="row gx-1 gy-1 justify-content-center align-items-center" id="sendform" name="sendmsg" action="" autocomplete="off">
                        <div class="col-sm-2" style="width:150px;">
                            <label for="to_call" class="visually-hidden">Callsign</label>
                            <input type="search" class="form-control mb-2 mr-sm-2" name="to_call" id="to_call" placeholder="To Callsign" size="11" maxlength="9">
                        </div>
                        <div class="col-auto">
                            <label for="pkt_path" class="visually-hidden">PATH</label>
                            <select class="form-control mb-2 mr-sm-2" name="pkt_path" id="pkt_path" style="width:auto;">
                                <option value="" disabled selected>Default Path</option>
                                <option value="WIDE1-1">WIDE1-1</option>
                                <option value="WIDE1-1,WIDE2-1">WIDE1-1,WIDE2-1</option>
                                <option value="ARISS">ARISS</option>
                                <option value="GATE">GATE</option>
                            </select>
                        </div>
                        <div class="col-sm-3">
                            <label for="message" class="visually-hidden">Message</label>
                            <input type="search" class="form-control mb-2 mr-sm-2" name="message" id="message" size="40" maxlength="67" placeholder="Message">
                        </div>
                        <div class="col-auto">
                            <input type="submit" name="submit" class="btn btn-primary mb-2" id="send_msg" value="Send"/>
                            <button type="button" class="btn btn-primary mb-2" id="send_beacon" value="Send Position">Send Position</button>
                            <!-- <button type="button" class="btn btn-primary mb-2" id="wipe_local" value="wipe local storage">Wipe LocalStorage</button> -->
                        </div>
                    </form>
                </div>
            </div>
            <div class="container-sm" style="max-width: 800px">
                <ul class="nav nav-tabs" id="msgsTabList" role="tablist"></ul>
            </div>
        </div>
        <div class="wc-row content" id="wc-content">
            <div class="container" style="max-width: 800px;">
                <div class="tab-content" id="msgsTabContent">
                </div>
            </div>
        </div>
        <div class="wc-row footer">
            <div class="container-sm" style="padding-top: 40px">
                <a href="https://badge.fury.io/py/aprsd"><img src="https://badge.fury.io/py/aprsd.svg" alt="PyPI version" height="18"></a>
                <a href="https://github.com/craigerl/aprsd"><img src="https://img.shields.io/badge/Made%20with-Python-1f425f.svg" height="18"></a>
            </div>
        </div>
    </div>
</body>
</html>
