{% extends "_layouts/main" %}

{% if currentSite.language == 'es' %}
    {% set esUrl = 'es/' %}
{% else %}
    {% set esUrl = '' %}
{% endif %}

{% block main %}

{% include "_includes/subpageHeader" %}

<div id="product-category-buttons" class="container text-center">
	
	{% for category in craft.entries.section('products').type('productCategories').all() %}

	<a class="btn" href="{{ esUrl }}products#{{ category.slug }}">{{ category.title }}</a>

	{% endfor %}

</div>

<div id="product-category-list" class="container">
	
	{% for category in craft.entries.section('products').type('productCategories').all() %}

	<div class="row product-category-row" id="{{ category.slug }}">

		{% set products = category.children() %}

		{% if products|length == 1 %}

		{% set product = products.one() %}
		
		<div class="col-12">
			<div class="product-category-tile standalone-product" style="background-image: url({{ category.productCategoryBackground.one().getUrl() }});">

				<div class="row">
					<div class="col-md-6">
						<div class="standalone-product-text">
							<h2>{{ category.title }}</h2>
							<p>{{ category.productCategoryDescription }}</p>
							<a href="{{ product.url }}" class="btn btn-secondary">{{ 'Learn more'|t }}</a>
						</div>
					</div>
					<div class="col-md-6">
						<img src="{{ product.productPng.one().getUrl('productFull') }}" alt="{{ product.title }}">
					</div>
				</div>
					
			</div>
		</div>

		{% else %}
		
		<div class="col-12 col-lg-4">
			<div class="product-category-tile" style="background-image: url({{ category.productCategoryBackground.one().getUrl() }});">
				<h2>{{ category.title }}</h2>
				<p>{{ category.productCategoryDescription }}</p>
				<a href="{{ category.url }}" class="btn btn-secondary">{{ 'View All'|t }}</a>
			</div>
		</div>

		{% for product in products.limit(2).all() %}
		
		{% include "_includes/productTile" %}
		
		{% endfor %}

		{% endif %}

	</div>

	{% endfor %}

</div>

{% endblock %}