{% import "macros/explorer.html" as nav %}
<article
  class="{{ article_class }}"
  hx-history-elt
  data-explorer="true"
  data-current-path="{{ current_path }}"
  data-ghrm-features="{{ features }}"
>
  <section class="ghrm-explorer-shell">
    {% include "fragments/explorer/header.html" %}
    <ghrm-explorer-menus></ghrm-explorer-menus>
    <ghrm-archive-progress></ghrm-archive-progress>

    {% if entries.is_empty() && !has_parent %}
    <p class="ghrm-nav-empty">No files found.</p>
    {% else %}
    <table class="ghrm-nav-table">
      <colgroup>
        <col class="ghrm-nav-icon-col">
        <col class="ghrm-nav-name-col">
        {%- for cell in empty_cells %}
        <col
          class="ghrm-nav-col"
          data-column-key="{{ cell.key }}"
          {%- if cell.hidden %} hidden{% endif %}
        >
        {%- endfor %}
      </colgroup>
      <thead class="ghrm-column-headers"{% if !show_headers %} hidden{% endif %}>
        <tr>
          <th
            class="ghrm-nav-name"
            colspan="2"
            {%- if name_header.active %} aria-sort="{{ name_header.aria_sort }}"{% endif %}
          >
            <a
              class="ghrm-column-sort{% if name_header.active %} is-active{% endif %}"
              href="{{ name_header.href }}"
              title="{{ name_header.title }}"
            >
              <span>{{ name_header.label }}</span>
              {% if name_header.active %}
              <svg class="ghrm-column-sort-icon" aria-hidden="true" focusable="false">
                <use href="/_ghrm/assets/js/icons.svg#{{ name_header.icon }}"></use>
              </svg>
              {% endif %}
            </a>
          </th>
          {%- for column in column_headers %}
          <th
            class="{{ column.cell_class }}"
            data-column-key="{{ column.key }}"
            {%- if column.hidden %} hidden{% endif -%}
            {%- if column.active %} aria-sort="{{ column.aria_sort }}"{% endif %}
          >
            <a
              class="ghrm-column-sort{% if column.active %} is-active{% endif %}"
              href="{{ column.href }}"
              title="{{ column.title }}"
            >
              <span>{{ column.label }}</span>
              {% if column.active %}
              <svg class="ghrm-column-sort-icon" aria-hidden="true" focusable="false">
                <use href="/_ghrm/assets/js/icons.svg#{{ column.icon }}"></use>
              </svg>
              {% endif %}
            </a>
          </th>
          {%- endfor %}
        </tr>
      </thead>
      <tbody>
        {% if has_parent %}
        <tr>
          <td class="ghrm-nav-icon">
            <svg
              aria-hidden="true"
              focusable="false"
              class="octicon octicon-file-directory-fill icon-directory"
            >
              <use href="/_ghrm/assets/js/icons.svg#ghrm-icon-dir"></use>
            </svg>
          </td>
          <td class="ghrm-nav-name"><a href="{{ parent_href }}">..</a></td>
          {%- for cell in empty_cells %}
          {{- nav::data_cell(cell) -}}
          {%- endfor %}
        </tr>
        {% endif %}

        {% for e in entries %}
        <tr>
          {{- nav::icon_cell(e.is_dir) -}}
          <td class="ghrm-nav-name"><a href="{{ e.href }}">{{ e.name }}</a></td>
          {%- for cell in e.cells %}
          {{- nav::data_cell(cell) -}}
          {%- endfor %}
        </tr>
        {% endfor %}
      </tbody>
    </table>
    {% endif %}
  </section>

  {% if let Some(r) = readme %}
  <div class="ghrm-readme-box">
    <div class="ghrm-readme-header">
      <div class="ghrm-readme-title">
        <svg aria-hidden="true" focusable="false" class="octicon octicon-book">
          <use href="/_ghrm/assets/js/icons.svg#ghrm-icon-book"></use>
        </svg>
        {{ r.name }}
      </div>
      <div class="ghrm-header-actions">
        <button
          type="button"
          class="ghrm-toc-btn"
          data-ghrm-toc-btn="readme"
          hidden
          title="Table of contents"
          aria-label="Table of contents"
        >
          <svg aria-hidden="true" focusable="false">
            <use href="/_ghrm/assets/js/icons.svg#ghrm-icon-list"></use>
          </svg>
        </button>
      </div>
    </div>
    <div class="ghrm-readme-content">
      {{ r.html|safe }}
    </div>
  </div>
  {% endif %}
</article>