{% import "macros/about.html" as about %}
{% import "macros/menu.html" as menu %}
{% import "macros/stat.html" as stat %}
<section
  id="ghrm-about-peek"
  class="ghrm-about-peek"
  data-stats-loaded="{% if stats_loaded %}true{% else %}false{% endif %}"
  hidden
>
  <div class="ghrm-about-tools">
    <button
      id="ghrm-about-panel-menu-toggle"
      class="ghrm-view-menu-toggle ghrm-about-panel-menu-toggle"
      type="button"
      aria-expanded="false"
      aria-haspopup="menu"
      aria-label="About menu"
      title="About menu"
    >
      <svg aria-hidden="true" focusable="false">
        <use href="/_ghrm/assets/js/icons.svg#ghrm-icon-columns"></use>
      </svg>
    </button>
    <div
      id="ghrm-about-panel-menu"
      class="ghrm-view-menu ghrm-about-panel-menu"
      role="menu"
      aria-label="Choose about panels"
      hidden
    >
      {% if !local_path.is_empty() %}
      <div class="ghrm-about-menu-section ghrm-about-menu-local" role="group" aria-label="Local path">
        <span class="ghrm-about-menu-local-label">not a git repo</span>
        <code class="ghrm-about-menu-local-path">{{ local_path }}</code>
      </div>
      {% endif %}
      <div
        class="ghrm-about-menu-section"
        role="group"
        aria-label="Git panels"
        data-ghrm-about-menu-group="git"
      >
        <div class="ghrm-about-menu-heading">Git</div>
        {{- menu::panel_option("about", "About", "Show about panel") -}}
        {{- menu::panel_option("history", "History", "Show history panel") -}}
        {{- menu::panel_option("languages", "Languages", "Show languages panel") -}}
        {{- menu::panel_option("activity", "Activity", "Show activity panel") -}}
      </div>

      <div
        class="ghrm-about-menu-section"
        role="group"
        aria-label="Runtime panels"
        data-ghrm-about-menu-group="runtime"
      >
        <div class="ghrm-about-menu-heading">Runtime</div>
        {{- menu::panel_option(
          "directory",
          "Directory Metrics",
          "Show directory metrics panel",
        ) -}}
        {{- menu::panel_option(
          "filters",
          "Available Filters",
          "Show available filters panel",
        ) -}}
        {{- menu::panel_option("paths", "Paths", "Show paths panel") -}}
        {{- menu::panel_option("network", "Network", "Show network panel") -}}
      </div>

      <div class="ghrm-about-menu-section" role="group" aria-label="Ghrm links">
        <div class="ghrm-about-menu-heading">Ghrm</div>
        {{- menu::menu_link(
          project_href,
          "ghrm-icon-github",
          "brege/ghrm",
          "Open brege/ghrm",
        ) -}}
        {{- menu::release_link(project_release_href, project_version) -}}
        {% if show_logout %}
        <a
          class="ghrm-view-option ghrm-about-menu-link"
          href="/_ghrm/logout"
          hx-boost="false"
          role="menuitem"
        >
          <svg aria-hidden="true" focusable="false">
            <use href="/_ghrm/assets/js/icons.svg#ghrm-icon-logout"></use>
          </svg>
          <span>Log out</span>
        </a>
        {% endif %}
      </div>
    </div>
  </div>

  <div class="ghrm-about-peek-inner">
    {% if !details.scope.is_empty() %}
    <div class="ghrm-about-scope" aria-label="Current scope">
      <dl>
        {%- for item in details.scope %}
        {{- about::detail_item(item, "", false) -}}
        {%- endfor %}
      </dl>
    </div>
    {% endif %}

    <div class="ghrm-about-panel-grid" aria-label="About panels">
      {{- stat::stat_section(
        "about",
        "About",
        "Repository metadata",
        "ghrm-about-stats ghrm-summary-panel",
        stats.metadata.as_slice(),
      ) -}}

      {{- stat::stat_section(
        "history",
        "History",
        "Repository history",
        "ghrm-about-stats ghrm-summary-panel",
        stats.history.as_slice(),
      ) -}}

      {{- stat::language_section(
        "languages",
        "ghrm-languages ghrm-summary-panel",
        stats.languages.as_slice(),
        stats.language_total.as_str(),
      ) -}}

      {{- stat::stat_section(
        "activity",
        "Activity",
        "Repository activity",
        "ghrm-about-stats ghrm-summary-panel",
        stats.activity.as_slice(),
      ) -}}

      {% if !details.directory.is_empty() %}
      <section
        class="ghrm-about-tile ghrm-detail-panel"
        data-ghrm-about-panel="directory"
        aria-label="Directory metrics"
      >
        <div class="ghrm-about-heading">Directory Metrics</div>
        <div class="ghrm-detail-panel-body">
          <table class="ghrm-detail-table">
            <thead>
              <tr>
                <th>Metric</th>
                <th>Value</th>
              </tr>
            </thead>
            <tbody>
              {%- for item in details.directory %}
              <tr>
                <td>{{ item.label }}</td>
                <td title="{{ item.title }}">{{ item.value }}</td>
              </tr>
              {%- endfor %}
            </tbody>
          </table>
        </div>
      </section>
      {% endif %}

      {% if !details.filters.is_empty() %}
      <section
        class="ghrm-about-tile ghrm-detail-panel"
        data-ghrm-about-panel="filters"
        aria-label="Available filters"
      >
        <div class="ghrm-about-heading">Available Filters</div>
        <div class="ghrm-detail-panel-body">
          <table class="ghrm-detail-table">
            <thead>
              <tr>
                <th>Group</th>
                <th>Files</th>
                <th>Dirs</th>
                <th>Size</th>
              </tr>
            </thead>
            <tbody>
              {%- for row in details.filters %}
              <tr>
                <td>
                  {{ row.label }}
                  {%- if row.default_enabled %}
                  <span aria-label="default enabled">*</span>
                  {%- endif %}
                </td>
                <td>{{ row.files }}</td>
                <td>{{ row.dirs }}</td>
                <td>{{ row.size }}</td>
              </tr>
              {%- endfor %}
            </tbody>
          </table>
        </div>
      </section>
      {% endif %}

      {{- about::detail_list_panel(
        "paths",
        "Paths",
        "Runtime paths",
        details.paths.as_slice(),
        false,
      ) -}}

      {{- about::detail_list_panel(
        "network",
        "Network",
        "Runtime network",
        details.network.as_slice(),
        true,
      ) -}}
    </div>

  </div>
</section>