{% extends "op_zz_frame.html" %}
{% block centercontent %}

<main class="ct-docs-content-col" role="main">
  <div style="width:100%">
    <h1 class="ct-docs-page-h1-title" id="content">
     Messages for {{ source_url }} ({{ month }})
    </h1>
  </div>

<div style="width:100%; margin-bottom:20px">
<a style="text-decoration:underline"
	class="ct-docs-page-title-lead"
	href="{{ url_for('dashboard') }}">Back to Dashboard</a>
</div>	
	
<form method="get" action="{{ url_for('details') }}" class="row g-3 align-items-end">
  <input type="hidden" name="source_url" value="{{ source_url }}">
  <div class="col-12 col-md-3 col-lg-2">
    <label class="form-label" for="month">Month:</label>
    <select class="form-control" name="month" id="month" onchange="this.form.submit()">
      {% for m in months %}
        <option value="{{ m }}" {% if m==month %}selected{% endif %}>{{ m }}</option>
      {% endfor %}
    </select>
  </div>
  <div class="col-12 col-md-3 col-lg-2">
    <label class="form-label" for="direction_filter">Direction:</label>
    <select class="form-control" name="direction_filter" id="direction_filter" onchange="this.form.submit()">
      <option value="all" {% if direction_filter == 'all' %}selected{% endif %}>All</option>
      <option value="extern" {% if direction_filter == 'extern' %}selected{% endif %}>External</option>
      <option value="client" {% if direction_filter == 'client' %}selected{% endif %}>Client</option>
      <option value="server" {% if direction_filter == 'server' %}selected{% endif %}>Server</option>
    </select>
  </div>
  <div class="col-12 col-md-3 col-lg-2">
    <label class="form-label" for="limit">Rows:</label>
    <select class="form-control" name="limit" id="limit" onchange="this.form.submit()">
      {% for option in limit_options %}
        <option value="{{ option }}" {% if option == limit %}selected{% endif %}>{{ option }}</option>
      {% endfor %}
    </select>
  </div>
  <div class="col-12 col-md-3 col-lg-3">
    <label class="form-label" for="message-filter">Filter:</label>
    <input
      type="text"
      id="message-filter"
      class="form-control"
      placeholder="At least 3 characters"
      autocomplete="off"
    >
  </div>
  <div class="col-12 col-md-3 col-lg-3 d-flex justify-content-md-end align-items-end">
    <button type="submit" name="export" value="csv" class="btn btn-primary">
      Download CSV
    </button>
  </div>
</form>
<table border="0" cellpadding="1" id="messages-table">
  <tr>
        <th class="text-xs">#</th>
        <th class="text-xs">Direction</th>
        <th class="text-xs">SessionID</th>
        <th class="text-xs">Timestamp</th>
        <th class="text-xs">Message</th>
  </tr>
  <tbody>
    {% for msg in msgs %}
    <tr>
      <td  class="text-xs">{{ loop.index }}</td>
      <td  class="text-xs">{{ msg.display_direction }}</td>
      <td  class="text-xs">{{ msg.connection_id }}</td>
      <td  class="text-xs">{{ msg.timestamp }}</td>
      <td  class="text-xs"><pre><code class="json">{{ msg.formatted_message | replace(',', ', \r') | replace(',  ', ', \r') }}</code></pre></td>
    </tr>
    {% endfor %}
  </tbody>
</table>
</main>

<script>
  document.addEventListener('DOMContentLoaded', function () {
    const filterInput = document.getElementById('message-filter');
    const table = document.getElementById('messages-table');

    if (!filterInput || !table) {
      return;
    }

    const rows = Array.from(table.querySelectorAll('tbody tr'));

    const updateVisibility = () => {
      const query = filterInput.value.trim().toLowerCase();

      if (query.length < 3) {
        rows.forEach((row) => {
          row.style.display = '';
        });
        return;
      }

      rows.forEach((row) => {
        const rowText = row.textContent.toLowerCase();
        row.style.display = rowText.includes(query) ? '' : 'none';
      });
    };

    filterInput.addEventListener('input', updateVisibility);
    updateVisibility();
  });
</script>

{% endblock %}