<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.socket.io/4.7.1/socket.io.min.js" integrity="sha512-+NaO7d6gQ1YPxvc/qHIqZEchjGm207SszoNeMgppoqD/67fEqmc1edS8zrbxPD+4RQI3gDgT/83ihpFW61TG/Q==" crossorigin="anonymous"></script>

        <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.bundle.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>

        <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">
        <link rel="stylesheet" href="/static/css/prism.css">
        <script src="/static/js/prism.js"></script>
        <script src="/static/js/main.js"></script>
        <script src="/static/js/echarts.js"></script>
        <script src="/static/js/tabs.js"></script>
        <script src="/static/js/send-message.js"></script>
        <script src="/static/js/logs.js"></script>


        <script type="text/javascript">
            var initial_stats = {{ initial_stats|tojson|safe }};

            var memory_chart = null
            var message_chart = null
            var color = Chart.helpers.color;

            $(document).ready(function() {
                start_update();
                start_charts();
                init_messages();
                init_logs();

                $("#toggleStats").click(function() {
                    $("#jsonstats").fadeToggle(1000);
                });

                // Pretty print the config json so it's readable
                var cfg_data = $("#configjson").text();
                var cfg_json = JSON.parse(cfg_data);
                var cfg_pretty = JSON.stringify(cfg_json, null, '\t');
                const html_pretty = Prism.highlight( cfg_pretty, Prism.languages.json, 'json');
                $("#configjson").html(html_pretty);
                $("#jsonstats").fadeToggle(1000);

                //var log_text_pretty = $('#logtext').text();
                //const log_pretty = Prism.highlight( log_text_pretty, Prism.languages.log, 'log');
                //$('#logtext').html(log_pretty);

                $('.ui.accordion').accordion({exclusive: false});
                $('.menu .item').tab('change tab', 'charts-tab');
            });
        </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='aprs_connection'>{{ aprs_connection|safe }}</span>
            </div>

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

        <!-- Tab links -->
        <div class="ui top attached tabular menu">
            <div class="active item" data-tab="charts-tab">Charts</div>
            <div class="item" data-tab="msgs-tab">Messages</div>
            <div class="item" data-tab="seen-tab">Seen List</div>
            <div class="item" data-tab="watch-tab">Watch List</div>
            <div class="item" data-tab="plugin-tab">Plugins</div>
            <div class="item" data-tab="threads-tab">Threads</div>
            <div class="item" data-tab="config-tab">Config</div>
            <div class="item" data-tab="log-tab">LogFile</div>
            <!-- <div class="item" data-tab="oslo-tab">OSLO CONFIG</div> //-->
            <div class="item" data-tab="raw-tab">Raw JSON</div>
        </div>

        <!-- Tab content -->
        <div class="ui bottom attached active tab segment" data-tab="charts-tab">
            <h3 class="ui dividing header">Charts</h3>
            <div class="ui equal width relaxed grid">
                <div class="row">
                    <div class="column">
                        <div class="ui segment" style="height: 300px" id="packetsChart"></div>
                    </div>
                </div>
                <div class="row">
                    <div class="column">
                        <div class="ui segment" style="height: 300px" id="messagesChart"></div>
                    </div>
                    <div class="column">
                        <div class="ui segment" style="height: 300px" id="acksChart"></div>
                    </div>
                </div>
                <div class="row">
                    <div class="column">
                        <div class="ui segment" style="height: 300px" id="packetTypesChart"></div>
                    </div>
                </div>
                <div class="row">
                    <div class="column">
                        <div class="ui segment" style="height: 300px" id="threadChart"></div>
                    </div>
                </div>
                <div class="row">
                    <div class="column">
                        <div class="ui segment" style="height: 300px" id="memChart"></div>
                    </div>
                </div>
          <!--      <div class="row">
                    <div id="stats" class="two column">
                        <button class="ui button" id="toggleStats">Toggle raw json</button>
                        <pre id="jsonstats" class="language-json">{{ stats }}</pre>
                    </div> //-->
                </div>
            </div>

        </div>

        <div class="ui bottom attached tab segment" data-tab="msgs-tab">
          <h3 class="ui dividing header">Messages (<span id="packets_count">0</span>)</h3>
          <div class="ui styled fluid accordion" id="accordion">
              <div id="packetsDiv" class="ui mini text">Loading</div>
          </div>
        </div>

        <div class="ui bottom attached tab segment" data-tab="seen-tab">
            <h3 class="ui dividing header">
                Callsign Seen List (<span id="seen_count">{{ seen_count }}</span>)
            </h3>
            <div id="seenDiv" class="ui mini text">Loading</div>
        </div>

        <div class="ui bottom attached tab segment" data-tab="watch-tab">
            <h3 class="ui dividing header">
                Callsign Watch List (<span id="watch_count">{{ watch_count }}</span>)
                &nbsp;&nbsp;&nbsp;
                Notification age - <span id="watch_age">{{ watch_age }}</span>
            </h3>
            <div id="watchDiv" class="ui mini text">Loading</div>
        </div>

        <div class="ui bottom attached tab segment" data-tab="plugin-tab">
            <h3 class="ui dividing header">
                Plugins Loaded (<span id="plugin_count">{{ plugin_count }}</span>)
            </h3>
            <div id="pluginDiv" class="ui mini text">Loading</div>
        </div>

        <div class="ui bottom attached tab segment" data-tab="threads-tab">
            <h3 class="ui dividing header">
                Threads Loaded (<span id="thread_count">{{ thread_count }}</span>)
            </h3>
            <div id="threadsDiv" class="ui mini text">Loading</div>
        </div>

        <div class="ui bottom attached tab segment" data-tab="config-tab">
          <h3 class="ui dividing header">Config</h3>
          <pre id="configjson" class="language-json">{{ config_json|safe }}</pre>
        </div>

        <div class="ui bottom attached tab segment" data-tab="log-tab">
            <h3 class="ui dividing header">LOGFILE</h3>
            <pre id="logContainer" style="height: 600px;overflow-y:auto;overflow-x:auto;"><code id="logtext" class="language-log" ></code></pre>
        </div>

        <!--
        <div class="ui bottom attached tab segment" data-tab="oslo-tab">
            <h3 class="ui dividing header">OSLO</h3>
            <pre id="osloContainer" style="height:600px;overflow-y:auto;" class="language-json">{{ oslo_out|safe }}</pre>
        </div> //-->

        <div class="ui bottom attached tab segment" data-tab="raw-tab">
          <h3 class="ui dividing header">Raw JSON</h3>
          <pre id="jsonstats" class="language-yaml" style="height:600px;overflow-y:auto;">{{ initial_stats|safe }}</pre>
        </div>

        <div class="ui text container">
            <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>
    </body>
</html>
