{% macro stat_section(panel, heading, aria_label, panel_class, rows) -%}
{%- if !rows.is_empty() %}
<section
  class="ghrm-about-tile {{ panel_class }}"
  data-ghrm-about-panel="{{ panel }}"
  aria-label="{{ aria_label }}"
>
  <div class="ghrm-about-heading">{{ heading }}</div>
  <dl class="ghrm-stat-list">
    {%- for row in rows %}
    {{- stat_row(row) -}}
    {%- endfor %}
  </dl>
</section>
{%- endif %}
{%- endmacro %}

{% macro language_section(panel, panel_class, languages, total) -%}
{%- if !languages.is_empty() %}
<section
  class="ghrm-about-tile {{ panel_class }}"
  data-ghrm-about-panel="{{ panel }}"
  aria-label="Languages"
>
  <div class="ghrm-about-heading">Languages</div>
  <div class="ghrm-lang-bar" aria-hidden="true">
    {%- for lang in languages %}
    <span title="{{ lang.title }}" style="{{ lang.style }}"></span>
    {%- endfor %}
  </div>
  <dl class="ghrm-lang-list">
    {%- for lang in languages %}
    {{- lang_row(lang) -}}
    {%- endfor %}
    {{- language_total_row(total) -}}
  </dl>
</section>
{%- endif %}
{%- endmacro %}

{% macro stat_row(row) -%}
<div class="ghrm-stat-row">
  <dt>
    {%- if !row.icon.is_empty() %}
    <svg aria-hidden="true">
      <use href="/_ghrm/assets/js/icons.svg#{{ row.icon }}"></use>
    </svg>
    {%- endif %}
    <span>{{ row.label }}</span>
  </dt>
  <dd
    {%- if !row.title.is_empty() %} title="{{ row.title }}"{% endif -%}
    {%- if let Some(ts) = row.title_ts %} data-ghrm-title-ts="{{ ts }}"{% endif -%}
  >
    {%- if !row.items.is_empty() -%}
    {{- stat_sublist(row.items.as_slice()) -}}
    {%- else if !row.href.is_empty() -%}
    <a href="{{ row.href }}" target="_blank" rel="noopener noreferrer">
      {{ row.value }}
    </a>
    {%- else -%}
    {{ row.value }}
    {%- endif -%}
  </dd>
</div>
{%- endmacro %}

{% macro stat_sublist(items) -%}
<dl class="ghrm-stat-sublist">
  {%- for item in items %}
  <div>
    <dt title="{{ item.label }}">
      {%- if !item.href.is_empty() -%}
      <a href="{{ item.href }}">{{ item.label }}</a>
      {%- else -%}
      {{ item.label }}
      {%- endif -%}
    </dt>
    <dd>
      {%- if !item.metrics.is_empty() -%}
      {{- stat_metrics(item.metrics.as_slice()) -}}
      {%- else -%}
      {{ item.value }}
      {%- endif -%}
    </dd>
  </div>
  {%- endfor %}
</dl>
{%- endmacro %}

{% macro stat_metrics(metrics) -%}
<span class="ghrm-stat-metrics">
  {%- for metric in metrics %}
  <span
    class="ghrm-stat-metric"
    {%- if !metric.title.is_empty() %} title="{{ metric.title }}"{% endif -%}
  >
    <span>{{ metric.value }}</span>
    {%- if !metric.label.is_empty() %}
    <span>{{ metric.label }}</span>
    {%- endif %}
  </span>
  {%- endfor %}
</span>
{%- endmacro %}

{% macro lang_row(lang) -%}
<div class="ghrm-lang-row">
  <dt>
    <span class="ghrm-lang-dot" style="--ghrm-lang-color: {{ lang.color }}"></span>
    <span>{{ lang.name }}</span>
  </dt>
  <dd>
    <span class="ghrm-lang-lines" title="{{ lang.lines }} lines of code">
      {{ lang.lines }}
    </span>
    <span class="ghrm-lang-percent">{{ lang.value }}</span>
  </dd>
</div>
{%- endmacro %}

{% macro language_total_row(total) -%}
{%- if !total.is_empty() %}
<div class="ghrm-lang-row ghrm-lang-total">
  <dt>Total</dt>
  <dd>
    <span class="ghrm-lang-lines" title="{{ total }} lines of code">
      {{ total }}
    </span>
    <span class="ghrm-lang-percent">LOC</span>
  </dd>
</div>
{%- endif %}
{%- endmacro %}