mirror-epstein-docs/src/document-types.njk

---
layout: base.njk
title: Document Types
---

<h1>Document Types</h1>
<p class="subtitle">{{ indices.documentTypes.length }} document types</p>

<div class="search-box">
  <input type="text" id="search" placeholder="Search document types...">
</div>

<div id="results">
  {% for type in indices.documentTypes %}
  <details class="entity-item" data-name="{{ type.name }}" id="{{ type.name | slugify }}">
    <summary class="entity-summary">
      <span class="entity-name">{{ type.name }}</span>
      <span class="entity-count">{{ type.count }} {{ "document" if type.count == 1 else "documents" }}</span>
    </summary>
    <div class="entity-content">
      {% for doc in type.docs %}
      <div class="document-card-compact">
        <a href="/document/{{ doc.unique_id | slugify }}/" class="doc-link">
          <strong>Document {{ doc.document_number }}</strong>
        </a>
        <div class="meta-compact">
          {% if doc.document_metadata.date %}{{ doc.document_metadata.date }} · {% endif %}
          {{ doc.page_count }} {{ "page" if doc.page_count == 1 else "pages" }}
        </div>
      </div>
      {% endfor %}
    </div>
  </details>
  {% endfor %}
</div>

<script>
  const search = document.getElementById('search');
  const results = document.getElementById('results');
  const allItems = results.querySelectorAll('.entity-item');

  search.addEventListener('input', (e) => {
    const query = e.target.value.toLowerCase();
    allItems.forEach(item => {
      const name = item.dataset.name.toLowerCase();
      item.style.display = name.includes(query) ? 'block' : 'none';
    });
  });
</script>