{# text_page.twig #}
{% extends "skeleton/base.twig" %}

{% block content %}
<div class="container my-5">
	<h1 class="bg-secondary text-white mb-4 p-2">{{ page_title }}</h1>
	{% for item in content %}
		{% if item.type == 'header' %}
      {% if item.level == 1 %}
        <div class="mb-4 p-2">
          <h1>{{ item.text | raw }}</h1>
        </div>
      {% elseif item.level == 2 %}
        <div class="border-start border-5 border-primary my-4">
          <h2 class=" border-bottom border-2 ps-3">{{ item.text | raw }}</h2>
        </div>
      {% elseif item.level == 3 %}
         <h3 class="my-3">{{ item.text | raw }}</h3>
      {% elseif item.level == 4 %}
         <h4 class="my-3">{{ item.text | raw }}</h4>
      {% elseif item.level == 5 %}
         <h5 class="my-3">{{ item.text | raw }}</h5>
      {% endif %}
    {% elseif item.type == 'paragraph' %}
      {# 使用三元運算符來檢查下一個 item 是否為 list #}
      {% set next_item = (loop.index < content|length) ? content[loop.index] : null %}
      {% if next_item and next_item.type == 'list' %}
        <p class="mb-1">{{ item.text | raw }}</p>
      {% else %}
        <p>{{ item.text | raw }}</p>
      {% endif %}
    {% elseif item.type == 'strong' %}
        <strong class="d-inline-block">{{ item.text | raw }}</strong>
    {% elseif item.type == 'span' %}
        <span>{{ item.text | raw }}</span>
    {% elseif item.type == 'list' %}
        <ul>
          {% for li in item.items %}
            <li class="ms-2">{{ li | raw }}</li>
          {% endfor %}
        </ul>
	  {% endif %}
  {% endfor %}
</div>
{% endblock %}