{% extends "base.html" %}

{% block title %}LeafDocs — Index{% endblock %}

{% block head %}
<style>
  .page-header {
    margin-bottom: 2rem;
  }
  .page-header h1 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.4rem;
    color: var(--text);
  }
  .page-header p {
    color: var(--muted);
    font-size: 0.88rem;
  }

  .search-wrap {
    position: relative;
    margin-bottom: 1.75rem;
  }
  .search-icon {
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    pointer-events: none;
    font-size: 0.9rem;
  }
  #search {
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    font-family: var(--font-ui);
    font-size: 0.92rem;
    padding: 0.65rem 1rem 0.65rem 2.4rem;
    border-radius: var(--radius);
    outline: none;
    transition: border-color 0.15s;
  }
  #search:focus { border-color: var(--accent); }
  #search::placeholder { color: var(--muted); }

  .tree { list-style: none; }
  .tree .tree {
    margin-left: 0.4rem;
    padding-left: 1.1rem;
    border-left: 1px solid var(--border);
  }

  .folder-item { border-bottom: 1px solid var(--border); }
  .folder-item:last-child { border-bottom: none; }

  .folder > summary {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.75rem 0;
    cursor: pointer;
    list-style: none;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--muted);
    transition: color 0.15s;
  }
  .folder > summary::-webkit-details-marker { display: none; }
  .folder > summary::before {
    content: "\25B8";
    display: inline-block;
    width: 0.8rem;
    color: var(--accent);
    transition: transform 0.15s;
  }
  .folder[open] > summary::before { transform: rotate(90deg); }
  .folder > summary:hover { color: var(--text); }
  .folder[open] > .tree { margin-bottom: 0.5rem; }

  .doc-item {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border);
    transition: background 0.1s;
  }
  .doc-item:last-child { border-bottom: none; }

  .doc-title {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text);
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .doc-title:hover { color: var(--accent); text-decoration: none; }

  .doc-tags { display: flex; gap: 0.4rem; flex-wrap: wrap; flex-shrink: 0; }

  #empty-state {
    display: none;
    text-align: center;
    padding: 3rem 0;
    color: var(--muted);
    font-size: 0.88rem;
  }
</style>
{% endblock %}

{% block content %}
<div class="page-header">
  <h1>Documents</h1>
  <p>{{ docs | length }} file{{ 's' if docs | length != 1 else '' }}</p>
</div>

<div class="search-wrap">
  <span class="search-icon">⌕</span>
  <input
    type="search"
    id="search"
    placeholder="Search by title, tag or path…"
    autocomplete="off"
    autofocus
  />
</div>

{% macro render_node(node) %}
  {% for folder in node.folders %}
  <li class="folder-item">
    <details class="folder">
      <summary>{{ folder.title }}</summary>
      <ul class="tree">
        {{ render_node(folder) }}
      </ul>
    </details>
  </li>
  {% endfor %}
  {% for doc in node.docs %}
  <li
    class="doc-item"
    data-title="{{ doc.title | lower }}"
    data-tags="{{ doc.tags | join(' ') | lower }}"
    data-slug="{{ doc.slug | lower }}"
  >
    <a href="/{{ doc.slug }}" class="doc-title">{{ doc.title }}</a>
    {% if doc.tags %}
    <div class="doc-tags">
      {% for tag in doc.tags %}
      <span class="tag">{{ tag }}</span>
      {% endfor %}
    </div>
    {% endif %}
  </li>
  {% endfor %}
{% endmacro %}

<ul id="doc-list" class="tree">
  {{ render_node(tree) }}
</ul>

<div id="empty-state">No documents match your search.</div>

<script>
  const input = document.getElementById('search');
  const items = Array.from(document.querySelectorAll('.doc-item'));
  const folders = Array.from(document.querySelectorAll('.folder'));
  const empty = document.getElementById('empty-state');

  // Open/closed state of each folder from before the current filter started
  let savedOpen = null;

  input.addEventListener('input', () => {
    const q = input.value.trim().toLowerCase();

    if (!q) {
      items.forEach(item => { item.style.display = ''; });
      folders.forEach(folder => { folder.parentElement.style.display = ''; });
      if (savedOpen) {
        folders.forEach(folder => { folder.open = savedOpen.get(folder); });
        savedOpen = null;
      }
      empty.style.display = 'none';
      return;
    }

    if (!savedOpen) {
      savedOpen = new Map(folders.map(folder => [folder, folder.open]));
    }

    const matches = new Set(items.filter(item =>
      item.dataset.title.includes(q)
      || item.dataset.tags.includes(q)
      || item.dataset.slug.includes(q)
    ));
    items.forEach(item => {
      item.style.display = matches.has(item) ? '' : 'none';
    });
    folders.forEach(folder => {
      const hasMatch = Array.from(folder.querySelectorAll('.doc-item')).some(item => matches.has(item));
      folder.parentElement.style.display = hasMatch ? '' : 'none';
      folder.open = hasMatch;
    });
    empty.style.display = matches.size === 0 ? 'block' : 'none';
  });
</script>
{% endblock %}