<!DOCTYPE html>
<html lang="en">

<head>
  <!--  Copyright (c) 2024 David Kerr, https://github.com/dkerr64 -->
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=1">
  <meta name="apple-mobile-web-app-title" content="RATDGO">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>HomeKit Garage Door Logs</title>
  <link rel="stylesheet" href="style.css?v=CRC-32">
  <link rel="icon" href="favicon.png?v=CRC-32" type="image/png">
  <link rel="apple-touch-icon" href="apple-touch-icon.png?v=CRC-32" type="image/png"> 
  <script src="logs.js?v=CRC-32"></script>
</head>

<body>
  <!-- Title section of page ------------------------------------------------------------------>
  <div class="fullpage" style="max-width: 100%; height: 98vh; display:flex; flex-flow: column;">
    <div id="loader" class="ldrcenter"></div>
    <div class="header logheader">
      <div class="logo">
        <pre class="logo">
 _____ _____ _____ _____ ____  _____
| __  |  _  |_   _|   __|    \|     |
|    -|     | | | |  |  |  |  |  |  |
|__|__|__|__| |_| |_____|____/|_____|
          </pre>
        <p class="logo"> for HomeKit</p>
      </div>
      <div class="name">
        <p id="deviceName" style="margin:0px;">Garage Door</p>
      </div>
    </div>
    <!-- view selection tabs ------------------------------------------------------------------->
    <div class="tab">
      <button class="tablinks" id="defaultOpen" onclick="openTab(event, 'logTab')">System Log</button>
      <button class="tablinks" onclick="openTab(event, 'statusTab')">Status</button>
      <button class="tablinks" onclick="openTab(event, 'rebootTab')">Reboot Log</button>
      <button class="tablinks" onclick="openTab(event, 'crashTab')">Crash Log</button>
      <input id="clearBtn" type="button" value="Clear crash log"
        style="display: none; margin-left: 2em; margin-top: 0.8em;"
        onclick="return confirm('Clear crash log, are you sure?') && clearCrashLog();">
    </div>
    <!-- Main section of page ------------------------------------------------------------------>
    <div id="statusTab" class="tabcontent">
      <p style="margin: 0px;">RATGDO device status...</p>
      <pre id="statusjson">
Loading...
        </pre>
    </div>
    <div id="logTab" class="tabcontent">
      <p style="margin: 0px;  color: darkgoldenrod">Current server message log...</p>
      <pre id="showlog"></pre>
    </div>
    <div id="rebootTab" class="tabcontent">
      <p style="margin: 0px; color: darkgoldenrod">Messages logged immediately before last user requested reboot or reset...</p>
      <pre id="rebootlog"></pre>
    </div>
    <div id="crashTab" class="tabcontent">
      <p style="margin: 0px; color: darkgoldenrod">Messages logged immediately before last system crash...</p>
      <span id="crashlog-timestamps"></span>
      <pre id="crashlog"></pre>
    </div>
    <!-- Footer section of page ------------------------------------------------------------------>
    <div class="footer" style="flex: 0 1 0;">
      <p style="margin:0px;">For documentation and support see the <a
          href="https://github.com/ratgdo/homekit-ratgdo">GitHub</a>
        page.<br>Copyright (c) 2023-24 <a
          href="https://github.com/ratgdo/homekit-ratgdo/graphs/contributors">homekit-ratgdo
          contributors.</a><br>Licensed under terms of the <a
          href="https://www.gnu.org/licenses/gpl-3.0.en.html">GPL-3.0
          License.</a>
      </p>
    </div>
  </div>

  <!-- Simple please wait dialog --------------------------------------------------------------->
  <div id="pleaseWait" class="modal">
    <div class="modal-content">
      Checking flash CRC. please wait...
    </div>
  </div>

  <!-- Initialization scripts ------------------------------------------------------------------>
  <script>
    console.log('Client UUID: ' + clientUUID);
    const loaderElem = document.getElementById("loader");
    document.getElementById("defaultOpen").click();

    loadLogs();
  </script>
</body>

</html>