<main tabindex="-1" id="main-content" class="main-content main-content-padding">
  <article class="space-y-12">

    {% for item in navigation.items %}
      {% if page.url == item.url %}
        <h1>{{ item.text }}</h1>
      {% endif %}
    {% endfor %}

    {%- for section in collection -%}
      <section class="space-y-6" id="{{ section.data.title }}">
        <div class="section-header">
          <div class="heading-divider-text">
            <h2>{{ section.data.title }}</h2>
          </div>
        </div>

        {% if section.data.type == 'block' %}
          {% set direction = 'y' %}
        {% else %}
          {% set direction = 'x' %}
        {% endif %}
        <div>
          {{ section.templateContent | safe }}
        </div>

        <details>
          <summary class="btn btn-primary mb-2">
            Show source
          </summary>
          <div class="prose max-w-none">
            <pre><code class="html-preview">{{ section.templateContent | trim }}</code></pre>
          </div>
        </details>
      </section>
    {%- endfor -%}
  </article>
</main>
