{% load static %}
<!DOCTYPE html>
<html>
  <head>
    <title>Django Log Lens</title>
    <link rel="icon" type="image/png" href="{% static 'django_log_lens/favicon.svg' %}" />
    <link rel="stylesheet" href="{% static 'django_log_lens/styles.css' %}" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap"
      rel="stylesheet"
    />
  </head>

  <body>
    {% csrf_token %}
    <div id="div-toolbar" class="fixed">
      <div class="toolbar-block">
        <button
          id="btn-show-on-github"
          class="info"
          onclick="window.open('https://github.com/martinbroede/django-log-lens', '_blank')"
        >
          <img src="{% static 'django_log_lens/logo.svg' %}" alt="GitHub" />
        </button>

        <form style="display: inline-block" method="post" action="{% url 'log-lens:logout' %}">
          {% csrf_token %}
          <button type="submit">
            Logout
            <span style="color: var(--cyan-color); text-transform: uppercase">{{user.username}}</span>
          </button>
        </form>
        <button onclick="fetchLogfile()">Refresh</button>
        <div class="toolbar-block">
          <label>Configuration</label>
          <button id="btn-toggle-visibility" onclick="toggleToolbarExtensionVisibility(this)">Show Less</button>
          <input type="text" autocomplete="off" id="input-path-splitter" placeholder="Path Splitter" />
          <input type="text" autocomplete="off" id="input-path-prefix" placeholder="Path Prefix" />
        </div>
      </div>
      <div class="toolbar-block">
        <div class="toolbar-block">
          <label>Navigation</label>
          <input
            type="text"
            autocomplete="off"
            id="input-line-number"
            placeholder="Line Number"
            onkeyup="goToLineWidId(this.value)"
          />
          <button onclick="window.scrollTo(0, 0)">Top</button>
          <button onclick="window.scrollTo(0, document.body.scrollHeight)">Bottom</button>
        </div>
        <div class="toolbar-block">
          <button onclick="goToPreviousError()">Prev. Error</button>
          <button onclick="goToNextError()">Next Error</button>
          <button onclick="goToLastError()">Latest Error</button>
        </div>
      </div>

      <br />
      <br />

      <div id="div-toolbar-extension">
        <hr />
        <br />
        <table id="table-statistics">
          <tr>
            <td>Handler Name</td>
            <td id="td-handler-name">undefined</td>
          </tr>
          <tr>
            <td>Errors</td>
            <td id="td-number-of-errors">0</td>
          </tr>
          <tr>
            <td>Warnings</td>
            <td id="td-number-of-warnings">0</td>
          </tr>
          <tr>
            <td>Lines</td>
            <td id="td-number-of-lines">0</td>
          </tr>
        </table>

        <table id="table-file-paths">
          <tr>
            <th>Handler</th>
            <th>Path</th>
            <th>Load</th>
            <th>Clear</th>
          </tr>
        </table>

        <br />

        <button id="btn-auto-refresh" state="off" onclick="onRefreshBtnClick(this)">Auto Refresh</button>
        <h3 id="h3-logfile-name"></h3>
      </div>
      <hr />
    </div>

    <div id="div-log-content">
      <pre id="pre-line-counter"></pre>
      <pre id="pre-log-content"></pre>
    </div>

    <div id="div-message-toast">
      <p id="p-message-toast-text"></p>
    </div>

    <div id="div-overlay" style="display: none">
      <div id="div-prompt" style="display: block">
        <p id="p-prompt-text"></p>
        <input type="text" id="input-prompt" />
        <div style="height: 10px">&nbsp;</div>
        <button id="btn-prompt-ok" onclick="promptOnConfirm()">OK</button>
        <button id="btn-prompt-cancel" onclick="promptOnCancel()">Cancel</button>
        <br />
        <br />
      </div>
    </div>

    <script>
      const clearLogFileURL = '{% url "log-lens:clear" %}?handler_name=';
      const requestLogFilePathsURL = "{% url 'log-lens:request-logfile-paths' %}";
      const requestLogfileTimestampURL = "{% url 'log-lens:request-logfile-timestamp' %}?handler_name=";
      const requestLogfileURL = '{% url "log-lens:request-logfile" %}?handler_name=';
    </script>
    <script src="{% static 'django_log_lens/script.js' %}"></script>
  </body>
</html>
