{% extends "pages/base.html" %}
{% load i18n %}

{% block title %}{% trans "Charge point log" %}{% endblock %}

{% block extra_head %}
<style>
  .log-viewer-card {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg, 0.75rem);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
  }
  .log-viewer-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    margin-bottom: 1rem;
  }
  .log-viewer-heading h2 {
    margin: 0;
    font-size: 1.125rem;
  }
  .log-viewer-filename {
    font-weight: 600;
    color: var(--bs-secondary-color);
  }
  .log-viewer-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1rem;
  }
  .log-viewer-slider {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 220px;
  }
  .log-viewer-slider label {
    font-weight: 600;
  }
  .log-viewer-limit {
    min-width: 220px;
  }
  .log-viewer-content {
    max-height: 60vh;
    overflow: auto;
    background: var(--bs-light-bg-subtle, #f8f9fa);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    padding: 1rem;
    font-family: var(--bs-font-monospace, var(--font-monospace, monospace));
    font-size: 0.875rem;
    line-height: 1.4;
    white-space: pre-wrap;
  }
  .log-viewer-status {
    font-size: 0.875rem;
    color: var(--bs-secondary-color);
  }
  .log-viewer-status.error {
    color: var(--bs-danger-text, #dc3545);
  }
</style>
{% endblock %}

{% block content %}
<div class="d-flex flex-wrap justify-content-between align-items-start gap-3 mb-3">
  <div class="d-flex flex-column gap-1">
    <div class="d-flex flex-wrap align-items-center gap-2">
      <h1 class="mb-0">{{ charger.display_name|default:charger.name|default:charger.charger_id }}</h1>
    </div>
  </div>
  {% if status_url %}
  <a class="btn btn-secondary" href="{{ status_url }}">{% trans "Back to status" %}</a>
  {% endif %}
</div>
{% if log_type == "charger" and connector_links %}
<nav class="nav nav-pills mb-3">
  {% for item in connector_links %}
  <a class="nav-link{% if item.active %} active{% endif %}" href="{{ item.url }}">{{ item.label }}</a>
  {% endfor %}
</nav>
{% endif %}
<div class="form-check mb-3">
  <input class="form-check-input" type="checkbox" id="auto-reload">
  <label class="form-check-label" for="auto-reload">{% trans "Auto reload" %}</label>
</div>
{% blocktranslate with name=charger.display_name|default:charger.name|default:charger.charger_id asvar viewer_heading %}Viewing log for {{ name }}{% endblocktranslate %}
{% translate 'Log copied to your clipboard.' as copy_success %}
{% translate 'Copy failed. Use your browser copy command instead.' as copy_error %}
{% translate 'Copy to clipboard' as copy_label %}
{% include "includes/log_viewer.html" with
  viewer_prefix="charger-log"
  viewer_wrapper_class="log-viewer-card"
  viewer_heading=viewer_heading
  log_filename=log_filename
  log_download_url=log_download_url
  log_limit_options=log_limit_options
  log_limit_index=log_limit_index
  log_limit_label=log_limit_label
  log_content=log_content
  copy_label=copy_label
  copy_success=copy_success
  copy_error=copy_error
  copy_button_class="btn btn-secondary"
  copy_status_class="log-viewer-status text-body-secondary small"
  download_button_class="btn btn-secondary"
  content_class="log-viewer-content"
  limit_slider_class="log-viewer-limit"
  viewer_actions_class="log-viewer-actions"
  viewer_slider_class="log-viewer-slider"
  limit_mode="fetch"
%}
<script>
  (function() {
    const checkbox = document.getElementById('auto-reload');
    const prefix = 'charger-log';
    let reloadTimer;
    function getViewer() {
      return window.__logViewers && window.__logViewers[prefix];
    }
    function refresh() {
      const viewer = getViewer();
      if (viewer && typeof viewer.refresh === 'function') {
        viewer.refresh();
      }
    }
    function start() {
      refresh();
      reloadTimer = window.setInterval(refresh, 3000);
    }
    function stop() {
      if (reloadTimer) {
        window.clearInterval(reloadTimer);
        reloadTimer = null;
      }
    }
    function onToggle(event) {
      if (event.target.checked) {
        start();
      } else {
        stop();
      }
    }
    function initialize() {
      if (!checkbox) {
        return;
      }
      checkbox.addEventListener('change', onToggle);
    }
    if (document.readyState === 'loading') {
      document.addEventListener('DOMContentLoaded', initialize, { once: true });
    } else {
      initialize();
    }
  })();
</script>
{% endblock %}