{# accessoryList.twig #}

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

{% block content %}
	<div class="container my-5">
		<div class="card mb-3 shadow-0">
			<div class="row g-0">
				<!-- 圖片部分 -->
				<div class="col-md-5 order-md-2 d-flex align-items-center justify-content-center">
					<img src="{{ banner.img_src }}?v={{ version }}" alt="{{ banner.heading }}" class="img-fluid">
				</div>
				<!-- 文本部分 -->
				<div class="col-md-7 order-md-1">
					<div class="card-body">
						<h2 class="card-title">{{ banner.heading }}</h2>
						<p class="card-text">{{ banner.paragraph }}</p>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div class="container mt-3">
		{% for card in products %}
			<div class="card">
				<div class="row g-0">
					<!-- 左邊圖片區塊 -->
					<div class="col-md-4 d-flex align-items-center justify-content-center">
						<img src="{{ card.img_src }}?v={{ version }}" alt="{{ card.img_alt }}" class="img-fluid">
					</div>
					<!-- 右邊特性列表區塊 -->
					<div class="col-md-8">
						<div class="card-body">
							<h5 class="card-title">{{ card.title }}</h5>
							<p class="card-text">{{ card.description }}</p>
							<ul class="card-text">
								<li>Model No.</li>
								<ul>
									{% for model in card.model_no %}
										<li>{{ model }}</li>
									{% endfor %}
								</ul>
							</ul>
						</div>
					</div>
				</div>
			</div>
		{% endfor %}
	</div>
{% endblock %}