{% load i18n %}
{% load form_helpers %}
<div class="field-group mb-5">
  {% if heading %}
    <div class="row">
      <h2 class="col-9 offset-3">{{ heading }}</h2>
    </div>
  {% endif %}
  {% for layout, title, items in rows %}

    {% if layout == 'field' %}
      {# Single form field #}
      {% render_field items.0 %}

    {% elif layout == 'attribute' %}
      {# A static attribute of the form's instance #}
      <div class="row mb-3">
        <label class="col-sm-3 col-form-label text-lg-end required">{{ title }}</label>
        <div class="col">
          <div class="form-control-plaintext">
            {{ items.0|linkify }}
          </div>
        </div>
      </div>

    {% elif layout == 'inline' %}
      {# Multiple form fields on the same line #}
      <div class="row mb-3">
        <label class="col col-3 col-form-label text-lg-end">{{ title|default:'' }}</label>
        {% for field in items %}
          <div class="col mb-1">
            {{ field }}
            <div class="form-text">{% trans field.label %}</div>
          </div>
        {% endfor %}
      </div>

    {% elif layout == 'tabs' %}
      {# Tabbed groups of fields #}
      <div class="row">
        <div class="col offset-3">
          <ul class="nav nav-pills mb-1" role="tablist">
            {% for tab in items %}
              <li role="presentation" class="nav-item">
                <button role="tab" type="button" id="{{ tab.id }}_tab" data-bs-toggle="tab" aria-controls="{{ tab.id }}" data-bs-target="#{{ tab.id }}" class="nav-link {% if tab.active %}active{% endif %}">
                  {% trans tab.title %}
                </button>
              </li>
            {% endfor %}
          </ul>
        </div>
      </div>
      <div class="tab-content p-0 border-0">
        {% for tab in items %}
          <div class="tab-pane {% if tab.active %}active{% endif %}" id="{{ tab.id }}" role="tabpanel" aria-labeled-by="{{ tab.id }}_tab">
            {% for field in tab.fields %}
              {% render_field field %}
            {% endfor %}
          </div>
        {% endfor %}
      </div>

    {% endif %}
  {% endfor %}
</div>