{% extends "vantage/base.html" %}
{% load i18n %}

{% comment %} The fallback renderer. A page with its own template never reaches this file;
   this exists so the FIRST page someone writes is worth looking at before they
   have written any HTML at all. {% endcomment %}

{% block content %}
<div class="v-page-head">
  <div>
    <h1 class="v-page-title">{{ page_title }}</h1>
    {% if page_description %}<p class="v-page-description">{{ page_description }}</p>{% endif %}
  </div>
</div>

{% if page_data %}
  {% comment %} A description list, not a stack of divs: the label and the number are a pair, and
     dt/dd is the only markup that says so. The CSS is class-based, so the swap is
     free. {% endcomment %}
  <dl class="v-stats">
    {% for row in page_data %}{% if row.scalar %}
      <div class="v-stat">
        <dt class="v-stat-label">{{ row.label }}</dt>
        <dd class="v-stat-value">{{ row.value|default_if_none:"—" }}</dd>
      </div>
    {% endif %}{% endfor %}
  </dl>

  {% for row in page_data %}{% if not row.scalar %}
    <section class="v-card" style="margin-block-end:1rem">
      <div class="v-card-head"><h2 class="v-card-title">{{ row.label }}</h2></div>
      <div class="v-card-body">
        {% if row.value.items %}
          <dl class="v-fields">
            {% for k, v in row.value.items %}
              <div class="v-field"><dt>{{ k }}</dt><dd>{{ v }}</dd></div>
            {% endfor %}
          </dl>
        {% else %}
          <ul class="v-related">
            {% for entry in row.value %}<li><span>{{ entry }}</span></li>{% endfor %}
          </ul>
        {% endif %}
      </div>
    </section>
  {% endif %}{% endfor %}
{% else %}
  <div class="v-card"><div class="v-empty">
    <p class="v-empty-title">{% translate "This page returned no data." %}</p>
    <p class="v-empty-body">
      {% blocktranslate trimmed with slug=page.get_slug %}
        Return a dict from <code class="v-mono">get_context()</code>, or add a template at
        <code class="v-mono">vantage/pages/{{ slug }}.html</code>.
      {% endblocktranslate %}
    </p>
  </div></div>
{% endif %}
{% endblock %}