{% extends "base.html" %}
{% block title %}Podgląd logów{% endblock %}

{% block content %}
<div class="d-flex flex-wrap align-items-center justify-content-between gap-3 mb-3">
  <div>
    <h1 class="h3 text-white mb-1">Podgląd logów</h1>
    <p class="text-secondary mb-0">Podgląd pliku <code>app.log</code> z podświetlaniem i live tail.</p>
  </div>
</div>

<!-- Zmień poziom logowania aplikacji -->
<div class="card bg-dark border-warning mb-2">
  <div class="card-body d-flex align-items-center gap-2">
    <form id="setLogLevelForm" method="post" action="{{ url_for('set_log_level') }}" class="d-flex align-items-center gap-2">
      <label for="appLogLevel" class="text-warning small me-2">Poziom logowania aplikacji:</label>
      <select name="level" id="appLogLevel" class="form-select form-select-sm bg-dark text-warning border-warning me-2" style="width:120px;">
        <option value="DEBUG">DEBUG</option>
        <option value="INFO">INFO</option>
        <option value="WARNING">WARNING</option>
        <option value="ERROR">ERROR</option>
        <option value="CRITICAL">CRITICAL</option>
      </select>
      <button type="submit" class="btn btn-outline-warning btn-sm">Ustaw</button>
    </form>
    <span id="setLogLevelStatus" class="text-warning ms-2 small"></span>
  </div>
</div>

<!-- Toolbar -->
<div class="card bg-dark border-secondary mb-3">
  <div class="card-body d-flex flex-wrap align-items-center gap-2">
    <!-- Poziom wyświetlania -->
    <form method="get" id="displayLevelForm" action="{{ url_for('view_logs') }}"
      class="d-flex align-items-center gap-2 me-auto">

      <label class="text-secondary small me-2">Poziom:</label>

      <div class="btn-group btn-group-sm" role="group" aria-label="Szybki poziom">
        {% for lvl in ['DEBUG','INFO','WARNING','ERROR','CRITICAL'] %}
        <button type="submit" class="btn btn-outline-secondary{% if lvl==selected_level %} active{% endif %}"
          name="level" value="{{ lvl }}">
          {{ lvl }}
        </button>
        {% endfor %}
      </div>
    </form>

    <!-- Wyszukiwarka -->
    <form method="get" id="searchForm" action="{{ url_for('view_logs') }}" class="d-flex align-items-center gap-1">
      <input type="hidden" name="level" value="{{ selected_level }}">
      <div class="input-group input-group-sm" style="min-width:280px;">
        <span class="input-group-text bg-dark border-secondary text-secondary">🔎</span>
        <input type="search" name="query" id="query" class="form-control bg-dark text-white border-secondary"
          placeholder="Szukaj (regexp/grep)..." value="{{ request.args.get('query','') }}">
        <button type="submit" class="btn btn-outline-secondary">Szukaj</button>
      </div>
    </form>

    <!-- Przełączniki -->
    <div class="btn-group btn-group-sm ms-1" role="group" aria-label="Widok">
      <button id="btn-live" class="btn btn-outline-light" data-on-text="Live ON" data-off-text="Live OFF">Live
        ON</button>
      <button id="btn-autoscroll" class="btn btn-outline-secondary">Auto-scroll</button>
      <button id="btn-wrap" class="btn btn-outline-secondary">Zawijaj</button>
    </div>

    <!-- Czcionka -->
    <div class="input-group input-group-sm ms-1" style="width:140px;">
      <span class="input-group-text bg-dark border-secondary text-secondary">A↕</span>
      <select id="font-size" class="form-select bg-dark text-white border-secondary">
        {% for size in ['12px','13px','14px','15px','16px'] %}
        <option value="{{ size }}" {% if size=='14px' %}selected{% endif %}>{{ size }}</option>
        {% endfor %}
      </select>
    </div>

    <!-- Akcje -->
  <label class="text-secondary small me-2">Akcje:</label>
    <div class="btn-group btn-group-sm ms-1" role="group" aria-label="Akcje">
      <button id="btn-copy" class="btn btn-outline-secondary">Kopiuj</button>
      <button id="btn-download" class="btn btn-outline-secondary">Pobierz</button>
    </div>
  </div>
</div>

<!-- Log viewer -->
<div class="card bg-dark border-secondary">
  <div class="card-body p-0" style="max-height: 70vh; overflow: auto;" id="logScroll">
    <pre id="logContainer" class="bg-dark text-white hljs mb-0"
      style="font-size:14px; line-height:1.35; padding: 1rem; border-radius: 0; white-space: pre; tab-size: 2;"></pre>
    <div id="logEmpty" class="text-center text-secondary small py-4 d-none">Brak danych do wyświetlenia.</div>
  </div>
</div>
{% endblock %}

{% block scripts %}
{{ super() }}
<!-- Highlight.js -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/monokai.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"></script>
<script>
  SET_LOG_LEVEL_URL = "{{ url_for('set_log_level') }}";
</script>
<script defer src="{{ url_for('static', filename='js/logs.js') }}"></script>
<script defer src="{{ url_for('static', filename='js/set_log_level.js') }}"></script>
{% endblock %}