{% extends "/base/base.html.j2" %}

{% block title %}{{ title or "Page" }}{% endblock %}

{% block breadcrumbs %}

  <div class="p-4 bg-white block sm:flex items-center justify-between border-b border-gray-200">
    <nav class="text-sm text-gray-500" aria-label="Breadcrumb">

      <sl-breadcrumb id="breadcrumbs">
        <sl-breadcrumb-item>
          <sl-icon slot="prefix" name="house"></sl-icon>
          <a href="/">Home</a>
        </sl-breadcrumb-item>
        {% if breadcrumbs %}
          {% for label, url in breadcrumbs %}
            <sl-breadcrumb-item>
              {% if url %}
                <a href="{{url}}">{{label}}</a>
              {% else %}
                {{ label }}
              {% endif %}
            </sl-breadcrumb-item>
          {% endfor %}
        {% endif %}
      </sl-breadcrumb>
    </nav>
  </div>
{% endblock %}
{% block content %}

  <!-- Breadcrumbs -->

  <!-- Page Content -->
  <section>
    {% block page_content %}
      <p>This is a generic page.</p>
    {% endblock %}
  </section>

{% endblock %}