{% extends 'ewoooc_base.html' %}

{% block title %}系統日誌 · EwoooC{% endblock %}
{% block page_accent %}observability{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/page-logs.css') }}">
{% endblock %}

{% block content %}
<div class="page-logs">

  <!-- Page Header -->
  <header class="page-header">
    <h4><i class="fas fa-file-alt me-2"></i>系統即時日誌</h4>
    <div class="status-indicators">
      <div class="status-item">
        <span class="status-dot"></span>
        <span id="connection-status">連接正常</span>
      </div>
      <div class="status-item">
        <i class="fas fa-clock"></i>
        <span id="last-update">最後更新: --</span>
      </div>
    </div>
  </header>

  <!-- Statistics Cards -->
  <section class="stats-grid">
    {% set stats = [
      ('total',   'fa-list',                'total-lines',   '總行數'),
      ('error',   'fa-times-circle',        'error-count',   '錯誤'),
      ('warning', 'fa-exclamation-triangle','warning-count', '注意'),
      ('info',    'fa-info-circle',         'info-count',    '資訊')
    ] %}
    {% for kind, icon, vid, label in stats %}
    <article class="stat-card stat-card--{{ kind }}">
      <div class="stat-icon"><i class="fas {{ icon }}"></i></div>
      <div class="stat-content">
        <div class="stat-value" id="{{ vid }}">0</div>
        <div class="stat-label">{{ label }}</div>
      </div>
    </article>
    {% endfor %}
  </section>

  <!-- Control Panel -->
  <section class="control-panel">
    <div class="control-section">
      <div class="control-section-title">主要操作</div>
      <div class="control-buttons">
        <button class="btn-control btn-control--refresh" onclick="refreshLogs()" aria-label="立即刷新">
          <i class="fas fa-sync-alt"></i><span>立即刷新</span>
        </button>
        <button class="btn-control btn-control--pause" id="pause-btn" onclick="toggleAutoRefresh()" aria-label="暫停自動刷新">
          <i class="fas fa-pause"></i><span>暫停自動刷新</span>
        </button>
        <button class="btn-control btn-control--clear" onclick="clearLogs()" aria-label="清除日誌">
          <i class="fas fa-eraser"></i><span>清除日誌</span>
        </button>
        <button class="btn-control btn-control--download" onclick="downloadLogs()" aria-label="下載日誌">
          <i class="fas fa-download"></i><span>下載日誌</span>
        </button>
      </div>
    </div>

    <div class="control-section">
      <div class="control-section-title">過濾與搜尋</div>
      <div class="filter-row">
        <div class="filter-buttons">
          {% for level, icon, label in [
            ('all',     'fa-list',                '全部'),
            ('error',   'fa-times-circle',        '錯誤'),
            ('warning', 'fa-exclamation-triangle','注意'),
            ('info',    'fa-info-circle',         '資訊')
          ] %}
          <button class="btn-filter btn-filter--{{ level }}{% if level == 'all' %} is-active{% endif %}"
                  data-level="{{ level }}" onclick="filterByLevel('{{ level }}')">
            <i class="fas {{ icon }} me-1"></i>{{ label }}
          </button>
          {% endfor %}
        </div>
        <div class="search-box" id="search-box">
          <i class="fas fa-search search-icon"></i>
          <input type="text" id="search-input" placeholder="搜尋關鍵字..." oninput="searchLogs()">
          <i class="fas fa-times clear-icon" onclick="clearSearch()"></i>
        </div>
      </div>
    </div>

    <div class="control-section control-section--last">
      <div class="control-section-title">顯示選項</div>
      <div class="display-row">
        <div class="font-size-group">
          <span class="form-hint">字體大小：</span>
          <div class="font-size-controls">
            {% for size, label in [('small','小'), ('medium','中'), ('large','大')] %}
            <button class="btn-font-size{% if size == 'medium' %} is-active{% endif %}"
                    data-size="{{ size }}" onclick="changeFontSize('{{ size }}')">{{ label }}</button>
            {% endfor %}
          </div>
        </div>
        <div class="toggle-group">
          <div class="toggle-item">
            <label class="toggle-switch">
              <input type="checkbox" id="auto-scroll-toggle" checked onchange="toggleAutoScroll()">
              <span class="slider"></span>
            </label>
            <span class="toggle-label">自動滾動</span>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Log Container -->
  <section class="log-container-wrapper">
    <div id="log-container" class="font-medium">
      <div class="log-empty">
        <i class="fas fa-file-alt"></i>
        <p>正在載入日誌...</p>
      </div>
    </div>
  </section>

</div>
{% endblock %}

{% block extra_js %}
<script src="{{ url_for('static', filename='js/page-logs.js') }}"></script>
{% endblock %}