{% extends "base.html" %}
{% import "_icons.html" as icon %}
{% block title %}{{ folder_label }} · {{ app.name }} · kopi{% endblock %}
{% block content %}
<nav class="crumbs-nav" aria-label="Breadcrumb">
  <ol>
    <li><a href="{{ url_for('console.app_page', name=app.name) }}">{{ app.name }}</a></li>
    {% if inside %}
    <li><a href="{{ url_for('console.browse_page', name=app.name, folder=folder) }}">{{ folder_label }}</a></li>
    <li aria-current="page">{{ inside }}</li>
    {% else %}
    <li aria-current="page">{{ folder_label }}</li>
    {% endif %}
  </ol>
</nav>

<div class="page-head">
  <div class="heading">
    <h1>{% if inside %}{{ inside }}{% else %}{{ folder_label }}{% endif %}</h1>
    <p class="supporting mono path-line">{{ path }}</p>
  </div>
  <form method="post" action="{{ url_for('console.app_open', name=app.name, folder=folder) }}">
    <input type="hidden" name="token" value="{{ token }}">
    <input type="hidden" name="in" value="{{ inside }}">
    <button class="text">{{ icon.open_new() }}Open folder</button>
  </form>
</div>

<form class="filter" method="get" role="search">
  {% if inside %}<input type="hidden" name="in" value="{{ inside }}">{% endif %}
  <label class="field grow">
    <span>Find by name</span>
    <input type="search" name="q" value="{{ wanted }}" placeholder="Part of a file name">
  </label>
  <button class="tonal">Find</button>
  {% if wanted %}<a class="button text" href="{{ url_for('console.browse_page', name=app.name, folder=folder, **({'in': inside} if inside else {})) }}">Show all</a>{% endif %}
</form>

<p class="meta result-count" role="status">{{ "{:,}".format(listing.total) }} item{% if listing.total != 1 %}s{% endif %}{% if wanted %} matching “{{ wanted }}”{% endif %}{% if listing.pages > 1 %} · page {{ listing.page }} of {{ listing.pages }}{% endif %}</p>

{% if listing.rows or listing.parent is not none %}
<ul class="list file-list">
  {% if listing.parent is not none %}
  <li class="row-item"><a class="row-link" href="{{ url_for('console.browse_page', name=app.name, folder=folder, **({'in': listing.parent} if listing.parent else {})) }}">{{ icon.back() }}<span class="name">Up one folder</span></a></li>
  {% endif %}
  {% for row in listing.rows %}
  <li class="row-item">
    {% if row.is_folder %}
    <a class="row-link" href="{{ url_for('console.browse_page', name=app.name, folder=folder, **{'in': row.relative}) }}">{{ icon.folder() }}<span class="file-name">{{ row.name }}/</span><span class="meta">{{ row.when }}</span></a>
    {% else %}
    <a class="row-link" href="{{ url_for('console.view_page', name=app.name, folder=folder, relative=row.relative) }}"><span class="file-name">{{ row.name }}</span><span class="meta">{{ row.size }}</span><span class="meta">{{ row.when }}</span></a>
    {% endif %}
  </li>
  {% endfor %}
</ul>
{% else %}
<div class="empty">
  <h2>{% if wanted %}Nothing matches{% else %}This folder is empty{% endif %}</h2>
</div>
{% endif %}

{% if listing.pages > 1 %}
<nav class="pager" aria-label="Pages">
  {% set base = {'q': wanted} if wanted else {} %}
  {% if inside %}{% set base = dict(base, **{'in': inside}) %}{% endif %}
  {% if listing.page > 1 %}<a class="button text" href="{{ url_for('console.browse_page', name=app.name, folder=folder, page=listing.page - 1, **base) }}">Newer</a>{% endif %}
  {% if listing.page < listing.pages %}<a class="button text" href="{{ url_for('console.browse_page', name=app.name, folder=folder, page=listing.page + 1, **base) }}">Older</a>{% endif %}
</nav>
{% endif %}
{% endblock %}