{# application.twig #}

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

{% block style %}
	{{ parent() }}
	.card img {
		max-height: 200px;
		width: auto;
		object-fit: cover;
	}
	.card .view {
		height: 200px;
		width: auto;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.card .card-title, .card .card-text{
		text-align: center;
	}
{% endblock %}
{% 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-3">{{ item.text | raw }}</h4>
			{% elseif item.level == 5 %}
				<h5 class="my-3">{{ item.text | raw }}</h5>
			{% else %}
				<h3 class="my-3">{{ item.text | raw }}</h3>
			{% endif %}

		{% elseif item.type == 'main_image' %}
			<img src="{{ item.src }}?v={{ version }}" alt="{{ item.alt }}" class="img-fluid float-start me-3">

		{% 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="mb-3 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 == 'product' %}
			<div class="row">
			{% for card in item.products %}
				<div class="col-md mb-4">
					{% include 'partial/card_vertical.twig' %}
				</div>
			{% endfor %}
			</div>
		{% elseif item.type == 'section_end' %}
			<hr class="border-bottom border-2">
		{% endif %}
	{% endfor %}
</div>
{% endblock %}