{% 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;
  }
  .log-viewer-toolbar-card {
    background: var(--bs-tertiary-bg, rgba(0, 0, 0, 0.03));
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    padding: 0.875rem 1rem;
    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-pane-card {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    background: var(--bs-body-bg);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  }
  .log-viewer-content {
    max-height: 60vh;
    overflow: auto;
    background: var(--bs-dark-bg-subtle, #141922);
    border: none;
    border-radius: var(--bs-border-radius);
    padding: 1rem;
    color: var(--bs-light, #f8f9fa);
    font-family: var(--bs-font-monospace, var(--font-monospace, monospace));
    font-size: 0.875rem;
    line-height: 1.4;
    white-space: pre-wrap;
    margin: 0;
  }
  .log-line-severity-error {
    color: var(--bs-danger, #dc3545);
    font-weight: 700;
  }
  .log-line-severity-warn {
    color: var(--bs-warning, #ffc107);
    font-weight: 600;
  }
  .log-line-severity-info {
    color: var(--bs-info, #0dcaf0);
  }
  .log-viewer-status {
    font-size: 0.875rem;
    color: var(--bs-secondary-color);
  }
  .log-viewer-status.error {
    color: var(--bs-danger-text, #dc3545);
  }
  .log-viewer-meta-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.5rem;
    margin-bottom: 1rem;
  }
  .log-viewer-meta-item {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    background: var(--bs-tertiary-bg, rgba(0, 0, 0, 0.03));
    padding: 0.5rem 0.75rem;
  }
  .log-viewer-meta-label {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--bs-secondary-color);
    margin-bottom: 0.15rem;
  }
  .log-viewer-meta-value {
    font-weight: 600;
    font-size: 0.9rem;
  }
</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 d-flex align-items-center gap-2 mb-3">
  <input class="form-check-input mt-0" type="checkbox" id="auto-reload">
  <label class="form-check-label" for="auto-reload">{% trans "Auto reload" %}</label>
  <span id="auto-reload-state" class="badge text-bg-secondary">{% trans "Off" %}</span>
</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 %}
{% translate "Source type" as source_type_label %}
{% translate "Connector" as connector_label %}
{% translate "Current row limit" as current_limit_label %}
{% translate "Last refresh" as last_refresh_label %}
{% translate "Never" as never_refresh_label %}
{% translate "On" as auto_reload_on_label %}
{% translate "Off" as auto_reload_off_label %}
<script>
  globalThis.__chargerLogLabels = {
    autoReloadOn: "{{ auto_reload_on_label|escapejs }}",
    autoReloadOff: "{{ auto_reload_off_label|escapejs }}",
  };
</script>
<div class="log-viewer-meta-row">
  <div class="log-viewer-meta-item">
    <span class="log-viewer-meta-label">{{ source_type_label }}</span>
    <span class="log-viewer-meta-value">{{ log_type|title }}</span>
  </div>
  <div class="log-viewer-meta-item">
    <span class="log-viewer-meta-label">{{ connector_label }}</span>
    <span class="log-viewer-meta-value">{{ charger.connector_label|default:"—" }}</span>
  </div>
  <div class="log-viewer-meta-item">
    <span class="log-viewer-meta-label">{{ current_limit_label }}</span>
    <span class="log-viewer-meta-value" id="metadata-current-limit">{{ log_limit_label }}</span>
  </div>
  <div class="log-viewer-meta-item">
    <span class="log-viewer-meta-label">{{ last_refresh_label }}</span>
    <span class="log-viewer-meta-value" id="metadata-last-refresh">{{ never_refresh_label }}</span>
  </div>
</div>
{% 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"
  content_card_class="log-viewer-pane-card"
  toolbar_card_class="log-viewer-toolbar-card"
  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 reloadState = document.getElementById('auto-reload-state');
    const metadataLimit = document.getElementById('metadata-current-limit');
    const metadataLastRefresh = document.getElementById('metadata-last-refresh');
    const prefix = 'charger-log';
    let reloadTimer;
    function getViewer() {
      return globalThis.__logViewers && globalThis.__logViewers[prefix];
    }
    function updateRefreshTimestamp() {
      if (!metadataLastRefresh) {
        return;
      }
      metadataLastRefresh.textContent = new Date().toLocaleTimeString();
    }
    function updateLimit() {
      if (!metadataLimit) {
        return;
      }
      const limitValue = document.getElementById(`${prefix}-limit-value`);
      if (limitValue) {
        metadataLimit.textContent = limitValue.textContent;
      }
    }
    function updateAutoReloadBadge(enabled) {
      if (!reloadState) {
        return;
      }
      const labels = globalThis.__chargerLogLabels || {};
      reloadState.textContent = enabled ? (labels.autoReloadOn || 'On') : (labels.autoReloadOff || 'Off');
      reloadState.classList.toggle('text-bg-success', enabled);
      reloadState.classList.toggle('text-bg-secondary', !enabled);
    }
    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();
      }
      updateAutoReloadBadge(event.target.checked);
    }
    function initialize() {
      if (!checkbox) {
        return;
      }
      checkbox.addEventListener('change', onToggle);
      updateAutoReloadBadge(checkbox.checked);
      updateLimit();
      updateRefreshTimestamp();
      const viewerEl = document.getElementById(`${prefix}-viewer`);
      if (viewerEl) {
        viewerEl.addEventListener('logviewer:refreshed', () => {
          updateLimit();
          updateRefreshTimestamp();
        });
      }
    }
    if (document.readyState === 'loading') {
      document.addEventListener('DOMContentLoaded', initialize, { once: true });
    } else {
      initialize();
    }
  })();
</script>
{% endblock %}