{# ============================================================ File:
templates/debug/inspect_state.html Purpose: Inspect SQLite vs Redis state per
book_idx - Initial render via Jinja - Live updates via inspect_state.js -
BookCard is server-rendered and NEVER replaced - Only the right-side state table
is updated dynamically
============================================================ #} {% extends
"layout.html" %} {% block content %}

<h1>State Inspection (SQL vs Redis)</h1>

<style>
  .state-block {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 20px;
    margin-bottom: 35px;
    padding: 18px;
    border: 1px solid #444;
    background: #222;
    border-radius: 8px;
  }

  .state-table {
    width: 100%;
    border-collapse: collapse;
  }

  .state-table th,
  .state-table td {
    border: 1px solid #555;
    padding: 6px 10px;
  }

  .state-table th {
    background: #333;
    color: #fff;
  }

  .state-table td {
    background: #2a2a2a;
    color: #ddd;
  }

  .same {
    color: #9f9 !important;
  }

  .diff {
    color: #ff7b7b !important;
    font-weight: bold;
  }
</style>

<div id="state-container">
  {% for entry in results %}
  <div class="state-block" data-book-idx="{{ entry.book_idx }}">
    <!-- LEFT: BookCard (server-rendered, NEVER replaced) -->
    <div>
      {% if entry.card %} {% with b = entry.card %} {% include
      "components/bookcard.html" %} {% endwith %} {% else %}
      <strong>{{ entry.book_idx }}</strong>
      {% endif %}
    </div>

    <!-- RIGHT: State table (updated by JS) -->
    <div>
      <table class="state-table">
        <tr>
          <th>Field</th>
          <th>SQLite</th>
          <th>Redis</th>
          <th>Merged</th>
        </tr>

        {% set sql = entry.sqlite %} {% set redis = entry.redis %} {% set merged
        = entry.would_merge_to %} {% for field in [ "status", "chapters_total",
        "downloaded", "chapters_download_done", "chapters_download_skipped",
        "parsed", "chapters_parsed_done", "audio_done", "audio_skipped",
        "last_update" ] %}
        <tr>
          <th>{{ field }}</th>
          <td>{{ sql.get(field, "") }}</td>
          <td>{{ redis.get(field, "") }}</td>
          <td>{{ merged.get(field, "") }}</td>
        </tr>
        {% endfor %}
      </table>
    </div>
  </div>
  {% endfor %}
</div>

{% endblock %} {% block scripts %}
<script src="/static/js/inspect_state.js"></script>
{% endblock %}