{% extends "admin/base_site.html" %}
{% load i18n admin_urls %}

{% block title %}{{ title }}{% endblock %}

{% block content_title %}{{ title }}{% endblock %}

{% block breadcrumbs %}
{% if has_permission %}
<div class="breadcrumbs">
  <a href="{% url 'admin:index' %}">{% trans 'Home' %}</a>
  &rsaquo; <a href="{% url 'admin:app_list' app_label=opts.app_label %}">{{ opts.app_config.verbose_name|capfirst }}</a>
  &rsaquo; <a href="{% url opts|admin_urlname:'changelist' %}">{{ opts.verbose_name_plural|capfirst }}</a>
  {% if original %}
  &rsaquo; <a href="{% url opts|admin_urlname:'change' original.pk %}">{{ original }}</a>
  {% endif %}
  &rsaquo; {% trans 'Log' %}
</div>
{% endif %}
{% endblock %}

{% block content %}
<div id="content-main">
  {% if log_file %}
  <p class="help">{% trans 'Log file' %}: <code>{{ log_file }}</code></p>
  {% endif %}
  <div class="form-row log-viewer-controls">
    <div class="log-viewer-control">
      <label for="log-row-limit">{% trans 'Visible rows' %}</label>
      <input type="range" id="log-row-limit" min="20" max="100" step="20" value="{{ log_limit }}">
      <span class="log-row-value" id="log-row-value">{{ log_limit }}</span>
    </div>
    <div class="log-viewer-control">
      <a class="button" id="log-download" href="?limit={{ log_limit }}&download=1">{% trans 'Download full log' %}</a>
    </div>
  </div>
  <p class="help" id="log-direction">
    {% trans 'Auto reload adds new lines at the bottom and scrolls downward.' %}
  </p>
  <div class="form-row">
    <label>
      <input type="checkbox" id="auto-reload">
      {% trans 'Auto reload' %}
    </label>
  </div>
  <pre id="log" class="log-output">
{% for entry in log_entries %}{{ entry }}
{% empty %}{% trans 'No log entries recorded yet.' %}
{% endfor %}
  </pre>
</div>
{% endblock %}

{% block extrastyle %}
{{ block.super }}
<style>
  #log.log-output {
    max-height: calc(1em * 20);
    overflow-y: auto;
    overflow-x: auto;
  }
  .log-viewer-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    margin-bottom: 12px;
  }
  .log-viewer-control {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .log-viewer-control label {
    font-weight: 600;
  }
  .log-row-value {
    min-width: 2.5em;
    text-align: right;
  }
</style>
{% endblock %}

{% block extrahead %}
{{ block.super }}
<script>
document.addEventListener('DOMContentLoaded', function () {
  const logEl = document.getElementById('log');
  if (!logEl) {
    return;
  }
  const limitInput = document.getElementById('log-row-limit');
  const limitValue = document.getElementById('log-row-value');
  const downloadLink = document.getElementById('log-download');
  const params = new URLSearchParams(window.location.search);
  const allowedLimits = ['20', '40', '60', '80', '100'];
  const initialLimit = '{{ log_limit }}';
  function currentLimit() {
    const limit = params.get('limit');
    if (allowedLimits.includes(limit)) {
      return limit;
    }
    return allowedLimits.includes(initialLimit) ? initialLimit : '20';
  }
  function updateLimitDisplay(limit) {
    logEl.style.maxHeight = 'calc(1em * ' + limit + ')';
    if (limitValue) {
      limitValue.textContent = limit;
    }
    if (limitInput) {
      limitInput.value = limit;
    }
  }
  function syncDownloadLink() {
    if (!downloadLink) {
      return;
    }
    const downloadParams = new URLSearchParams(window.location.search);
    downloadParams.set('download', '1');
    downloadLink.href = '?' + downloadParams.toString();
  }
  function scrollToBottom() {
    logEl.scrollTop = logEl.scrollHeight;
  }
  function fetchLog() {
    fetch(window.location.href, {headers: {'X-Requested-With': 'XMLHttpRequest'}})
      .then(resp => resp.text())
      .then(html => {
        const doc = new DOMParser().parseFromString(html, 'text/html');
        const newLog = doc.getElementById('log');
        if (newLog) {
          logEl.textContent = newLog.textContent;
          scrollToBottom();
        }
      })
      .catch(() => {});
  }
  function updateLimit(limit) {
    params.set('limit', limit);
    const newUrl = window.location.pathname + '?' + params.toString();
    window.history.replaceState({}, '', newUrl);
    updateLimitDisplay(limit);
    syncDownloadLink();
    fetchLog();
  }
  updateLimitDisplay(currentLimit());
  syncDownloadLink();
  scrollToBottom();
  let reloadTimer;
  const checkbox = document.getElementById('auto-reload');
  if (checkbox) {
    checkbox.addEventListener('change', function () {
      if (this.checked) {
        reloadTimer = setInterval(fetchLog, 15000);
      } else if (reloadTimer) {
        clearInterval(reloadTimer);
        reloadTimer = null;
      }
    });
  }
  if (limitInput) {
    limitInput.addEventListener('input', function () {
      updateLimit(this.value);
    });
  }
});
</script>
{% endblock %}