{% if error %}
<p style="color:#fca5a5">&#9888; {{ error }}</p>
{% else %}
{% if parent_path %}
<div style="margin-bottom:0.5rem">
  <button class="outline secondary"
          hx-get="/fragments/navigator?path={{ parent_path | urlencode }}"
          hx-target="#nav-content"
          hx-swap="innerHTML">&#8593; Übergeordnet</button>
  <span style="font-family:monospace;margin-left:0.5rem;color:var(--pico-muted-color)">{{ current_path }}</span>
</div>
{% endif %}
<table>
  <thead><tr><th>Name</th><th>Typ</th><th>Größe</th><th>Geändert</th></tr></thead>
  <tbody>
  {% for item in items %}
  <tr>
    <td>
      {% if item.type == 'directory' %}
      <button class="outline secondary" style="padding:0.1rem 0.4rem;font-size:0.85rem"
              hx-get="/fragments/navigator?path={{ item.path | urlencode }}"
              hx-target="#nav-content"
              hx-swap="innerHTML">
        &#128193; {{ item.name }}
      </button>
      {% else %}
      <span style="font-family:monospace;font-size:0.85rem">&#128196; {{ item.name }}</span>
      {% endif %}
    </td>
    <td><span class="badge">{{ item.type }}</span></td>
    <td style="font-size:0.85rem">{{ item.size }}</td>
    <td style="font-size:0.8rem;color:var(--pico-muted-color)">{{ item.modified }}</td>
  </tr>
  {% endfor %}
  </tbody>
</table>
{% if not items %}
<p style="color:var(--pico-muted-color)">Verzeichnis ist leer.</p>
{% endif %}
{% endif %}