{% extends '_admin/layout/base.html' %}
{% from '_admin/layout/pagination.html' import pagination with context %}

{% block css %}
<style>
  .request-stats {
    --stats-2xx: #0ca30c;
    --stats-3xx: #8a8984;
    --stats-4xx: #fab219;
    --stats-5xx: #d03b3b;
    --stats-average: #2a78d6;
    --stats-p95: #eb6834;
    --stats-surface: var(--bs-body-bg, #fff);
    --stats-ink-muted: var(--bs-secondary-color, #6c757d);
    --stats-grid: var(--bs-border-color-translucent, rgba(0, 0, 0, 0.1));
  }
  .request-stats .stats-label { font-size: .8rem; color: var(--stats-ink-muted); }
  .request-stats .stats-value { font-size: 1.6rem; font-weight: 600; line-height: 1.2; margin-top: .25rem; font-variant-numeric: tabular-nums; }
  .request-stats .stats-note { font-size: .8rem; color: var(--stats-ink-muted); min-height: 1.2em; }
  .request-stats .stats-icon-2xx { color: var(--stats-2xx); }
  .request-stats .stats-icon-4xx { color: #b47b00; }
  .request-stats .stats-icon-5xx { color: var(--stats-5xx); }
  .request-stats .stats-legend { display: flex; flex-wrap: wrap; gap: .25rem 1rem; font-size: .8rem; color: var(--stats-ink-muted); }
  .request-stats .stats-swatch { display: inline-block; width: .7rem; height: .7rem; border-radius: 2px; margin-right: .35rem; vertical-align: -1px; }
  .request-stats .stats-bg-2xx { background: var(--stats-2xx); }
  .request-stats .stats-bg-3xx { background: var(--stats-3xx); }
  .request-stats .stats-bg-4xx { background: var(--stats-4xx); }
  .request-stats .stats-bg-5xx { background: var(--stats-5xx); }
  .request-stats .stats-bg-average { background: var(--stats-average); }
  .request-stats .stats-bg-p95 { background: var(--stats-p95); }
  .request-stats .stats-chart { position: relative; height: 230px; }
  .request-stats .stats-chart svg { display: block; overflow: visible; }
  .request-stats .stats-empty { margin: .5rem 0 0; }
  .request-stats .stats-grid { stroke: var(--stats-grid); stroke-width: 1; }
  .request-stats .stats-axis { stroke: var(--stats-ink-muted); stroke-opacity: .5; stroke-width: 1; }
  .request-stats .stats-tick { fill: var(--stats-ink-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
  .request-stats .stats-separator { fill: none; stroke: var(--stats-surface); stroke-width: 1.5; stroke-linejoin: round; }
  .request-stats .stats-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
  .request-stats .stats-before-start { fill: var(--stats-ink-muted); fill-opacity: .07; }
  .request-stats .stats-crosshair { stroke: var(--stats-ink-muted); stroke-width: 1; stroke-dasharray: 3 3; pointer-events: none; }
  .request-stats .stats-tooltip {
    position: absolute; pointer-events: none; z-index: 2; min-width: 9rem;
    background: var(--stats-surface); border: 1px solid var(--stats-grid); border-radius: .375rem;
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .12); padding: .4rem .55rem; font-size: .8rem;
    font-variant-numeric: tabular-nums;
  }
  .request-stats .stats-tooltip-title { color: var(--stats-ink-muted); margin-bottom: .15rem; }
  .request-stats .btn-group .btn.active { color: #fff; }
</style>
{% endblock %}

{% block content %}
<main class="app-main py-4">
  <div class="container-fluid px-3 px-md-4">

    {% if request_stats_enabled %}
    <section id="request-stats" class="request-stats mb-5" aria-labelledby="request-stats-title">
      <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-end gap-2 mb-3">
        <div>
          <h2 class="h3 mb-1" id="request-stats-title">{{ translate('request_statistics') }}</h2>
          <p class="text-muted mb-0">
            {{ translate('request_statistics_scope') }}
            <span class="text-nowrap" data-stat="updated"></span>
          </p>
        </div>
        <div class="btn-group btn-group-sm" role="group" aria-label="{{ translate('time_period') }}">
          {% for period, label in request_stats_periods %}
            <button type="button" class="btn btn-outline-secondary" data-period="{{ period }}" aria-pressed="false">
              {{ label }}
            </button>
          {% endfor %}
        </div>
      </div>

      <div class="alert alert-warning" role="alert" data-stats-error hidden>
        <i class="bi bi-exclamation-triangle me-1"></i>
        {{ translate('statistics_unavailable') }}
      </div>

      <div class="row g-3 mb-3">
        <div class="col-6 col-md-4 col-xxl-2">
          <div class="card content-card shadow-sm h-100 stats-tile">
            <div class="card-body">
              <div class="stats-label"><i class="bi bi-clock-history me-1" aria-hidden="true"></i>{{ translate('uptime') }}</div>
              <div class="stats-value" data-stat="uptime">–</div>
              <div class="stats-note" data-stat="started"></div>
            </div>
          </div>
        </div>
        <div class="col-6 col-md-4 col-xxl-2">
          <div class="card content-card shadow-sm h-100 stats-tile">
            <div class="card-body">
              <div class="stats-label"><i class="bi bi-arrow-left-right me-1" aria-hidden="true"></i>{{ translate('requests') }}</div>
              <div class="stats-value" data-stat="requests">–</div>
              <div class="stats-note" data-stat="average_rps"></div>
            </div>
          </div>
        </div>
        <div class="col-6 col-md-4 col-xxl-2">
          <div class="card content-card shadow-sm h-100 stats-tile">
            <div class="card-body">
              <div class="stats-label"><i class="bi bi-check-circle-fill me-1 stats-icon-2xx" aria-hidden="true"></i>{{ translate('successful_2xx') }}</div>
              <div class="stats-value" data-stat="2xx">–</div>
              <div class="stats-note" data-stat="2xx_share"></div>
            </div>
          </div>
        </div>
        <div class="col-6 col-md-4 col-xxl-2">
          <div class="card content-card shadow-sm h-100 stats-tile">
            <div class="card-body">
              <div class="stats-label"><i class="bi bi-exclamation-triangle-fill me-1 stats-icon-4xx" aria-hidden="true"></i>{{ translate('client_errors_4xx') }}</div>
              <div class="stats-value" data-stat="4xx">–</div>
              <div class="stats-note" data-stat="4xx_share"></div>
            </div>
          </div>
        </div>
        <div class="col-6 col-md-4 col-xxl-2">
          <div class="card content-card shadow-sm h-100 stats-tile">
            <div class="card-body">
              <div class="stats-label"><i class="bi bi-x-octagon-fill me-1 stats-icon-5xx" aria-hidden="true"></i>{{ translate('server_errors_5xx') }}</div>
              <div class="stats-value" data-stat="5xx">–</div>
              <div class="stats-note" data-stat="5xx_share"></div>
            </div>
          </div>
        </div>
        <div class="col-6 col-md-4 col-xxl-2">
          <div class="card content-card shadow-sm h-100 stats-tile">
            <div class="card-body">
              <div class="stats-label"><i class="bi bi-stopwatch me-1" aria-hidden="true"></i>{{ translate('response_time') }}</div>
              <div class="stats-value" data-stat="average_ms">–</div>
              <div class="stats-note" data-stat="p95_ms"></div>
            </div>
          </div>
        </div>
      </div>

      <div class="row g-3 mb-3">
        <div class="col-xl-7">
          <div class="card content-card shadow-sm h-100">
            <div class="card-header bg-white d-flex flex-wrap justify-content-between align-items-center gap-2">
              <h2 class="h6 mb-0">{{ translate('requests_per_second') }}</h2>
              <ul class="stats-legend list-unstyled mb-0">
                <li><span class="stats-swatch stats-bg-2xx"></span>{{ translate('successful_2xx') }}</li>
                <li><span class="stats-swatch stats-bg-3xx"></span>{{ translate('redirects_3xx') }}</li>
                <li><span class="stats-swatch stats-bg-4xx"></span>{{ translate('client_errors_4xx') }}</li>
                <li><span class="stats-swatch stats-bg-5xx"></span>{{ translate('server_errors_5xx') }}</li>
              </ul>
            </div>
            <div class="card-body">
              <div class="stats-chart" data-chart="requests"></div>
              <p class="stats-empty text-muted small" data-empty="charts" hidden>{{ translate('no_requests_in_period') }}</p>
            </div>
          </div>
        </div>
        <div class="col-xl-5">
          <div class="card content-card shadow-sm h-100">
            <div class="card-header bg-white d-flex flex-wrap justify-content-between align-items-center gap-2">
              <h2 class="h6 mb-0">{{ translate('response_time_ms') }}</h2>
              <ul class="stats-legend list-unstyled mb-0">
                <li><span class="stats-swatch stats-bg-average"></span>{{ translate('average') }}</li>
                <li><span class="stats-swatch stats-bg-p95"></span>{{ translate('percentile_95') }}</li>
              </ul>
            </div>
            <div class="card-body">
              <div class="stats-chart" data-chart="latency"></div>
              <p class="stats-empty text-muted small" data-empty="charts" hidden>{{ translate('no_requests_in_period') }}</p>
            </div>
          </div>
        </div>
        <div class="col-12">
          <details class="stats-data">
            <summary class="small text-muted">{{ translate('show_data') }}</summary>
            <div class="table-responsive mt-2">
              <table class="table table-sm align-middle mb-0">
                <thead class="table-light">
                  <tr>
                    <th scope="col">{{ translate('time') }}</th>
                    <th scope="col" class="text-end">2xx/s</th>
                    <th scope="col" class="text-end">3xx/s</th>
                    <th scope="col" class="text-end">4xx/s</th>
                    <th scope="col" class="text-end">5xx/s</th>
                    <th scope="col" class="text-end">{{ translate('average') }}</th>
                    <th scope="col" class="text-end">{{ translate('percentile_95') }}</th>
                  </tr>
                </thead>
                <tbody data-table="series"></tbody>
              </table>
            </div>
          </details>
        </div>
      </div>

      <div class="row g-3">
        <div class="col-xl-7">
          <div class="card content-card shadow-sm h-100">
            <div class="card-header bg-white">
              <h2 class="h6 mb-0">{{ translate('busiest_endpoints') }}</h2>
            </div>
            <div class="card-body p-0">
              <div class="table-responsive">
                <table class="table table-hover align-middle mb-0">
                  <thead class="table-light">
                    <tr>
                      <th scope="col">{{ translate('method') }}</th>
                      <th scope="col">{{ translate('route') }}</th>
                      <th scope="col" class="text-end">{{ translate('requests') }}</th>
                      <th scope="col" class="text-end">4xx</th>
                      <th scope="col" class="text-end">5xx</th>
                      <th scope="col" class="text-end">{{ translate('average_time') }}</th>
                    </tr>
                  </thead>
                  <tbody data-table="routes"></tbody>
                </table>
              </div>
              <p class="text-muted small m-3" data-empty="routes" hidden>{{ translate('no_requests_in_period') }}</p>
            </div>
          </div>
        </div>
        <div class="col-xl-5">
          <div class="card content-card shadow-sm h-100">
            <div class="card-header bg-white">
              <h2 class="h6 mb-0">{{ translate('errors_by_status') }}</h2>
            </div>
            <div class="card-body p-0">
              <div class="table-responsive">
                <table class="table align-middle mb-0">
                  <thead class="table-light">
                    <tr>
                      <th scope="col">{{ translate('status') }}</th>
                      <th scope="col" class="text-end">{{ translate('requests') }}</th>
                      <th scope="col">{{ translate('most_affected_routes') }}</th>
                    </tr>
                  </thead>
                  <tbody data-table="errors"></tbody>
                </table>
              </div>
              <p class="text-muted small m-3" data-empty="errors" hidden>{{ translate('no_errors_in_period') }}</p>
            </div>
          </div>
        </div>
      </div>
    </section>
    {% endif %}

    <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center mb-4">
      <div>
        <h1 class="h3 mb-1">{{ translate('system_logs') }}</h1>
        <p class="text-muted mb-0">
          {{ translate('recent_application_events_and_diagnostic_messages') }}
        </p>
      </div>

      <div class="mt-3 mt-md-0">
        <a
          href="{{ admin_interface.url_for('_AdminController.dashboard') }}"
          class="btn btn-primary"
        >
          <i class="bi bi-arrow-clockwise me-1"></i>
          {{ translate('refresh') }}
        </a>
      </div>
    </div>

    {% if not log_files_enabled %}
      <div class="alert alert-secondary" role="status">
        <i class="bi bi-info-circle me-1"></i>
        {{ translate('log_files_disabled') }}
      </div>
    {% endif %}

    <div class="card content-card shadow-sm">
      <div class="card-header bg-white d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-2">
        <div>
          <h2 class="h5 mb-0">{{ translate('latest_log_messages') }}</h2>
          <small class="text-muted">
            {{ translate('showing_x_of_y_log_messages').format(shown=log_entries|length, total=logs_total) }}
          </small>
        </div>

        <form
          method="get"
          action="{{ admin_interface.url_for('_AdminController.dashboard') }}"
          class="d-flex gap-2"
        >
          <input type="hidden" name="page" value="1">
          <input type="hidden" name="count" value="{{ logs_count }}">
          <input type="hidden" name="order_by" value="{{ logs_order_by }}">

          <label for="logs-severity" class="visually-hidden">{{ translate('minimum_severity') }}</label>
          <select
            id="logs-severity"
            name="severity"
            class="form-select form-select-sm"
            style="width: auto;"
            title="{{ translate('minimum_severity') }}"
            onchange="this.form.submit()"
          >
            {% for level_name in log_levels %}
              <option value="{{ level_name }}" {% if level_name == logs_severity %}selected{% endif %}>
                {{ level_name }}{% if level_name != 'CRITICAL' %}+{% endif %}
              </option>
            {% endfor %}
          </select>

          <div class="input-group input-group-sm" style="max-width: 280px;">
            <span class="input-group-text">
              <i class="bi bi-search"></i>
            </span>
            <input
              type="search"
              name="query"
              class="form-control"
              placeholder="{{ translate('search_logs') }}"
              aria-label="{{ translate('search_logs') }}"
              value="{{ logs_query }}"
            >
          </div>

          <button type="submit" class="btn btn-sm btn-outline-secondary">
            {{ translate('search') }}
          </button>
        </form>
      </div>

      <div class="card-body p-0">
        <div class="table-responsive">
          <table class="table table-hover align-middle mb-0">
            <thead class="table-light">
              <tr>
                <th scope="col">
                  <a
                    class="text-decoration-none text-dark"
                    href="{{ admin_interface.url_for('_AdminController.dashboard', query=logs_query, severity=logs_severity, page=1, count=logs_count, order_by='-time' if logs_order_by == 'time' else 'time') }}"
                  >
                    {{ translate('time') }}
                    {% if logs_order_by == 'time' %}
                      <i class="bi bi-sort-up ms-1"></i>
                    {% elif logs_order_by == '-time' %}
                      <i class="bi bi-sort-down ms-1"></i>
                    {% endif %}
                  </a>
                </th>

                <th scope="col">
                  <a
                    class="text-decoration-none text-dark"
                    href="{{ admin_interface.url_for('_AdminController.dashboard', query=logs_query, severity=logs_severity, page=1, count=logs_count, order_by='-level' if logs_order_by == 'level' else 'level') }}"
                  >
                    {{ translate('level') }}
                    {% if logs_order_by == 'level' %}
                      <i class="bi bi-sort-up ms-1"></i>
                    {% elif logs_order_by == '-level' %}
                      <i class="bi bi-sort-down ms-1"></i>
                    {% endif %}
                  </a>
                </th>

                <th scope="col">
                  <a
                    class="text-decoration-none text-dark"
                    href="{{ admin_interface.url_for('_AdminController.dashboard', query=logs_query, severity=logs_severity, page=1, count=logs_count, order_by='-logger_name' if logs_order_by == 'logger_name' else 'logger_name') }}"
                  >
                    {{ translate('logger') }}
                    {% if logs_order_by == 'logger_name' %}
                      <i class="bi bi-sort-up ms-1"></i>
                    {% elif logs_order_by == '-logger_name' %}
                      <i class="bi bi-sort-down ms-1"></i>
                    {% endif %}
                  </a>
                </th>

                <th scope="col">
                  <a
                    class="text-decoration-none text-dark"
                    href="{{ admin_interface.url_for('_AdminController.dashboard', query=logs_query, severity=logs_severity, page=1, count=logs_count, order_by='-name' if logs_order_by == 'name' else 'name') }}"
                  >
                    {{ translate('module') }}
                    {% if logs_order_by == 'name' %}
                      <i class="bi bi-sort-up ms-1"></i>
                    {% elif logs_order_by == '-name' %}
                      <i class="bi bi-sort-down ms-1"></i>
                    {% endif %}
                  </a>
                </th>

                <th scope="col">
                  <a
                    class="text-decoration-none text-dark"
                    href="{{ admin_interface.url_for('_AdminController.dashboard', query=logs_query, severity=logs_severity, page=1, count=logs_count, order_by='-file' if logs_order_by == 'file' else 'file') }}"
                  >
                    {{ translate('file') }}
                    {% if logs_order_by == 'file' %}
                      <i class="bi bi-sort-up ms-1"></i>
                    {% elif logs_order_by == '-file' %}
                      <i class="bi bi-sort-down ms-1"></i>
                    {% endif %}
                  </a>
                </th>

                <th scope="col">
                  <a
                    class="text-decoration-none text-dark"
                    href="{{ admin_interface.url_for('_AdminController.dashboard', query=logs_query, severity=logs_severity, page=1, count=logs_count, order_by='-line' if logs_order_by == 'line' else 'line') }}"
                  >
                    {{ translate('line') }}
                    {% if logs_order_by == 'line' %}
                      <i class="bi bi-sort-up ms-1"></i>
                    {% elif logs_order_by == '-line' %}
                      <i class="bi bi-sort-down ms-1"></i>
                    {% endif %}
                  </a>
                </th>

                <th scope="col">
                  <a
                    class="text-decoration-none text-dark"
                    href="{{ admin_interface.url_for('_AdminController.dashboard', query=logs_query, severity=logs_severity, page=1, count=logs_count, order_by='-function' if logs_order_by == 'function' else 'function') }}"
                  >
                    {{ translate('function') }}
                    {% if logs_order_by == 'function' %}
                      <i class="bi bi-sort-up ms-1"></i>
                    {% elif logs_order_by == '-function' %}
                      <i class="bi bi-sort-down ms-1"></i>
                    {% endif %}
                  </a>
                </th>

                <th scope="col">
                  <a
                    class="text-decoration-none text-dark"
                    href="{{ admin_interface.url_for('_AdminController.dashboard', query=logs_query, severity=logs_severity, page=1, count=logs_count, order_by='-message' if logs_order_by == 'message' else 'message') }}"
                  >
                    {{ translate('message') }}
                    {% if logs_order_by == 'message' %}
                      <i class="bi bi-sort-up ms-1"></i>
                    {% elif logs_order_by == '-message' %}
                      <i class="bi bi-sort-down ms-1"></i>
                    {% endif %}
                  </a>
                </th>
                <th>
                  {{ translate('view') }}
                </th>
              </tr>
            </thead>

            <tbody>
              {% for log in log_entries %}
                <tr>
                  <td class="text-muted log-meta log-time">
                    {{ log.time }}
                  </td>

                  <td>
                    {% if log.level == 'ERROR' or log.level == 'CRITICAL' %}
                      <span class="badge text-bg-danger log-level">{{ log.level }}</span>
                    {% elif log.level == 'WARNING' or log.level == 'WARN' %}
                      <span class="badge text-bg-warning log-level">{{ log.level }}</span>
                    {% elif log.level == 'DEBUG' %}
                      <span class="badge text-bg-primary log-level">{{ log.level }}</span>
                    {% elif log.level == 'INFO' %}
                      <span class="badge text-bg-success log-level">{{ log.level }}</span>
                    {% else %}
                      <span class="badge text-bg-secondary log-level">{{ log.level }}</span>
                    {% endif %}
                  </td>

                  <td class="log-meta log-logger-name">
                    {{ log.logger_name }}
                  </td>

                  <td class="log-meta log-name">
                    <code>{{ log.name }}</code>
                  </td>

                  <td class="log-meta log-file">
                    {{ log.file }}
                  </td>

                  <td class="text-muted log-line">
                    {{ log.line }}
                  </td>

                  <td class="log-meta log-function">
                    <code>{{ log.function }}</code>
                  </td>

                  <td class="log-message" data-message="{{ log.message|e }}" data-exception="{{ log.exception|default('', true)|e }}">
                    {{ log.message|default('', true)|string|truncate(70) }}
                  </td>
                  <td>
                    <button type="button" onclick="openLogDialog(event)" class="btn btn-sm" title="{{ translate('view_log') }}" aria-label="{{ translate('view_log') }}">
                      <i class="bi bi-card-text"></i>
                    </button>
                  </td>
                </tr>
              {% else %}
                <tr>
                  <td colspan="9" class="text-center text-muted py-4">
                    <i class="bi bi-inbox me-1"></i>
                    {{ translate('no_log_messages_available') }}
                  </td>
                </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      </div>

      <div class="card-footer bg-white d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-3">
        <div class="d-flex align-items-center gap-2">
          <span class="text-muted small">
            {{ translate('page_x_of_y').format(page=logs_page, pages=logs_total_pages) }}
          </span>

          <form
            method="get"
            action="{{ admin_interface.url_for('_AdminController.dashboard') }}"
            class="d-flex align-items-center gap-2"
          >
            <input type="hidden" name="query" value="{{ logs_query }}">
            <input type="hidden" name="severity" value="{{ logs_severity }}">
            <input type="hidden" name="page" value="1">
            <input type="hidden" name="order_by" value="{{ logs_order_by }}">

            <label for="logs-count" class="text-muted small mb-0">
              {{ translate('per_page') }}
            </label>

            <select
              id="logs-count"
              name="count"
              class="form-select form-select-sm"
              style="width: auto;"
              onchange="this.form.submit()"
            >
              <option value="10" {% if logs_count == 10 %}selected{% endif %}>10</option>
              <option value="25" {% if logs_count == 25 %}selected{% endif %}>25</option>
              <option value="50" {% if logs_count == 50 %}selected{% endif %}>50</option>
              <option value="100" {% if logs_count == 100 %}selected{% endif %}>100</option>
            </select>
          </form>
        </div>

        {{ pagination(logs_page_items, logs_page, logs_total_pages, logs_page_url, translate('log_table_pagination')) }}
      </div>
    </div>

  </div>
</main>

<dialog id="log-dialog" class="log-dialog border-0 rounded-4 p-0 shadow-lg">
  <div class="log-dialog-content">
    <div class="log-dialog-header d-flex justify-content-between align-items-start gap-3">
      <div>
        <h2 class="h5 mb-1">
          <i class="bi bi-card-text me-1"></i>
          {{ translate('log_details') }}
        </h2>
        <p class="text-muted small mb-0">
          {{ translate('full_diagnostic_log_entry') }}
        </p>
      </div>

      <button
        type="button"
        class="btn-close"
        aria-label="{{ translate('close') }}"
        onclick="closeLogDialog()"
      ></button>
    </div>

    <div id="log-dialog-body" class="log-dialog-body">
      <!-- Filled by JS -->
    </div>

    <div class="log-dialog-footer d-flex justify-content-end">
      <button
        type="button"
        class="btn btn-sm btn-secondary"
        onclick="closeLogDialog()"
      >
        {{ translate('close') }}
      </button>
    </div>
  </div>
</dialog>
{% endblock %}

{% block js %}
{% if request_stats_enabled %}
<script type="application/json" id="request-stats-config">
  {{ {
    "url": admin_interface.url_for('_AdminController.request_statistics'),
    "lang": lang,
    "labels": request_stats_labels,
  } | tojson }}
</script>
<script type="module" src="{{ admin_interface.url_for('_AdminController.static', filename='js/dashboard/request_stats.js') }}"></script>
{% endif %}
<style>
  .log-dialog {
    width: min(900px, calc(100vw - 2rem));
    max-height: min(720px, calc(100vh - 2rem));
    overflow: hidden;
  }

  .log-dialog::backdrop {
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(2px);
  }

  .log-dialog-content {
    background: #fff;
    display: flex;
    flex-direction: column;
    max-height: min(720px, calc(100vh - 2rem));
  }

  .log-dialog-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.075);
    background: #f8f9fa;
  }

  .log-dialog-body {
    padding: 1.25rem;
    overflow: auto;
  }

  .log-dialog-footer {
    padding: 1rem 1.25rem;
    border-top: 1px solid rgba(0, 0, 0, 0.075);
    background: #f8f9fa;
  }

  .log-detail-grid {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 0.65rem 1rem;
    margin-bottom: 1.25rem;
  }

  .log-detail-label {
    color: #6c757d;
    font-size: 0.875rem;
    font-weight: 600;
  }

  .log-detail-value {
    min-width: 0;
    word-break: break-word;
  }

  .log-full-message {
    white-space: pre-wrap;
    word-break: break-word;
    background: #f8f9fa;
    border: 1px solid rgba(0, 0, 0, 0.075);
    border-radius: 0.75rem;
    padding: 1rem;
    margin-bottom: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 0.875rem;
  }

  @media (max-width: 576px) {
    .log-detail-grid {
      grid-template-columns: 1fr;
      gap: 0.25rem;
    }

    .log-detail-label {
      margin-top: 0.5rem;
    }
  }
</style>

<script>
  function textFrom(row, selector) {
    return row.querySelector(selector)?.textContent.trim() || "";
  }

  function messageFrom(row) {
    return row.querySelector(".log-message")?.getAttribute("data-message") || "";
  }

  function escapeHtml(value) {
    return String(value)
      .replaceAll("&", "&amp;")
      .replaceAll("<", "&lt;")
      .replaceAll(">", "&gt;")
      .replaceAll('"', "&quot;")
      .replaceAll("'", "&#039;");
  }

  function openLogDialog(event) {
    const btn = event.target.closest("button");
    const tableRow = btn.closest("tr");

    const log = {
      time: textFrom(tableRow, ".log-time"),
      level: textFrom(tableRow, ".log-level"),
      loggerName: textFrom(tableRow, ".log-logger-name"),
      name: textFrom(tableRow, ".log-name"),
      file: textFrom(tableRow, ".log-file"),
      line: textFrom(tableRow, ".log-line"),
      functionName: textFrom(tableRow, ".log-function"),
      message: messageFrom(tableRow),
      exception: tableRow.querySelector(".log-message")?.getAttribute("data-exception") || ""
    };

    const dialog = document.getElementById("log-dialog");
    const body = document.getElementById("log-dialog-body");

    body.innerHTML = `
      <div class="log-detail-grid">
        <div class="log-detail-label">{{ translate('time') }}</div>
        <div class="log-detail-value">${escapeHtml(log.time)}</div>

        <div class="log-detail-label">{{ translate('level') }}</div>
        <div class="log-detail-value">
          <span class="badge ${badgeClassForLevel(log.level)}">
            ${escapeHtml(log.level)}
          </span>
        </div>

        <div class="log-detail-label">{{ translate('logger') }}</div>
        <div class="log-detail-value">${escapeHtml(log.loggerName)}</div>

        <div class="log-detail-label">{{ translate('module') }}</div>
        <div class="log-detail-value">
          <code>${escapeHtml(log.name)}</code>
        </div>

        <div class="log-detail-label">{{ translate('file') }}</div>
        <div class="log-detail-value">${escapeHtml(log.file)}</div>

        <div class="log-detail-label">{{ translate('line') }}</div>
        <div class="log-detail-value">${escapeHtml(log.line)}</div>

        <div class="log-detail-label">{{ translate('function') }}</div>
        <div class="log-detail-value">
          <code>${escapeHtml(log.functionName)}</code>
        </div>
      </div>

      <div class="d-flex justify-content-between align-items-center gap-2 mb-2">
        <h3 class="h6 mb-0">{{ translate('message') }}</h3>

        <button
          type="button"
          id="copy-log-message-btn"
          class="btn btn-sm btn-outline-secondary"
          onclick="copyLogMessage()"
          title="{{ translate('copy_message_to_clipboard') }}"
          aria-label="{{ translate('copy_message_to_clipboard') }}"
        >
          <i class="bi bi-clipboard me-1"></i>
          {{ translate('copy') }}
        </button>
      </div>

      <pre id="log-full-message" class="log-full-message">${escapeHtml(log.message)}</pre>
      ${log.exception ? `
        <h3 class="h6 mt-3 mb-2">{{ translate('exception') }}</h3>
        <pre class="log-full-message">${escapeHtml(log.exception)}</pre>
      ` : ""}
    `;

    dialog.showModal();
  }

  function closeLogDialog() {
    const dialog = document.getElementById("log-dialog");
    const body = document.getElementById("log-dialog-body");

    body.innerHTML = "";

    if (dialog.open) {
      dialog.close();
    }
  }

  function badgeClassForLevel(level) {
    switch (level) {
      case "ERROR":
      case "CRITICAL":
        return "text-bg-danger";
      case "WARNING":
      case "WARN":
        return "text-bg-warning";
      case "DEBUG":
        return "text-bg-primary";
      case "INFO":
        return "text-bg-success";
      default:
        return "text-bg-secondary";
    }
  }

  document.addEventListener("DOMContentLoaded", function () {
    const dialog = document.getElementById("log-dialog");
    const body = document.getElementById("log-dialog-body");

    dialog.addEventListener("close", function () {
      body.innerHTML = "";
    });

    dialog.addEventListener("click", function (event) {
      if (event.target === dialog) {
        closeLogDialog();
      }
    });

    document.addEventListener("keydown", function (event) {
      if (event.key === "Escape" && dialog.open) {
        closeLogDialog();
      }
    });
  });

  async function copyLogMessage() {
    const messageElement = document.getElementById("log-full-message");
    const copyButton = document.getElementById("copy-log-message-btn");

    if (!messageElement || !copyButton) {
      return;
    }

    const message = messageElement.textContent || "";

    try {
      await navigator.clipboard.writeText(message);

      copyButton.innerHTML = `
        <i class="bi bi-check2 me-1"></i>
        Copied
      `;

      copyButton.classList.remove("btn-outline-secondary");
      copyButton.classList.add("btn-success");

      setTimeout(function () {
        copyButton.innerHTML = `
          <i class="bi bi-clipboard me-1"></i>
          Copy
        `;

        copyButton.classList.remove("btn-success");
        copyButton.classList.add("btn-outline-secondary");
      }, 1500);
    } catch (error) {
      copyButton.innerHTML = `
        <i class="bi bi-exclamation-triangle me-1"></i>
        Failed
      `;

      copyButton.classList.remove("btn-outline-secondary");
      copyButton.classList.add("btn-danger");

      setTimeout(function () {
        copyButton.innerHTML = `
          <i class="bi bi-clipboard me-1"></i>
          Copy
        `;

        copyButton.classList.remove("btn-danger");
        copyButton.classList.add("btn-outline-secondary");
      }, 1500);
    }
  }
</script>
{% endblock %}