{# notification.twig #}

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

{% block content %}
  <div class="container my-5">
    <h2 class="mb-1">{{ title }}</h2>
    <h3 class="text-secondary mb-4">{{ subtitle }}</h3>

    {% for item in content %}
      {% if item.type == 'header' %}
        {% if item.level == 4 %}
          <h4 class="my-1">{{ item.text | raw }}</h4>
        {% elseif item.level == 5 %}
          <h5 class="my-1">{{ item.text | raw }}</h5>
        {% else %}
          <h3 class="my-1">{{ item.text | raw }}</h3>
        {% 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="my-1 d-inline-block">{{ item.text | raw }}</strong>
      {% elseif item.type == 'span' %}
        <span>{{ item.text | raw }}</span>
      {% elseif item.type == 'image' %}
        <div class="my-4 text-center">
          <img src="{{ item.src }}?v={{ version }}" alt="{{ item.alt }}" class="img-fluid"
            {% if item.width %}
              style="width:{{ item.width }}"
            {% endif %}>
        </div>
      {% elseif item.type == 'list' %}
        <ul>
          {% for li in item.items %}
            <li>{{ li|raw }}</li>
          {% endfor %}
        </ul>
      {% elseif item.type == 'video' %}
        <div class="ratio ratio-16x9 m-3">
          <iframe
            src="{{ item.src }}" 
            title="YouTube video"
            allowfullscreen>
          </iframe>
        </div>
      {% endif %}
    {% endfor %}
  </div>
{% endblock %}