{% extends 'www/base.html.twig' %}

{% import 'www/partials/_macros.html.twig' as macros %}

{% block link_alternate %}
	{% for translation in _cms_translations %}
		<link rel="altername" hreflang="{{ translation.getLocale }}" href="{{ path(app.request.get('_route'), {_locale: translation.getLocale()}) }}"/>
	{% endfor %}
{% endblock %}

{% block top %}
	<div class="carousel-header">
		<div id="slider-homepage" class="carousel slide" data-bs-ride="carousel">
			{% if gallery_slider_images|length %}
				<ol class="carousel-indicators">
					{% for slider_image in gallery_slider_images %}
						<li data-bs-target="#slider-homepage" data-bs-slide-to="{{ loop.index0 }}" class="{{ loop.first ? 'active': '' }}"></li>
					{% endfor %}
				</ol>
			{% endif %}

			<div class="carousel-inner" role="listbox">
				{% for slider_image in gallery_slider_images %}
					<div class="carousel-item {% if loop.first %}active{% endif %}">
						<picture>
							<source media="(max-width:960px)" srcset="{{ slider_image.file.filename|imagine_filter('slider_desktop') }}">
							<source media="(min-width:960px)" srcset="{{ slider_image.file.filename|imagine_filter('slider_desktop') }}">
							<img src="{{ slider_image.file.filename|imagine_filter('slider_desktop') }}" loading="lazy" class="img-fluid" alt="{{ slider_image.file.getTitle() }}">
						</picture>

						<div class="carousel-caption">
							<div class="p-3" style="max-width: 900px;">
								<h1 class="display-2 text-capitalize text-white mb-4 carousel-caption-title">
									{{ slider_image.file.getTitle() }}
								</h1>

								<div class="mb-5 carousel-caption-body fs-5">
									{{ slider_image.file.getDescription()|raw }}
								</div>

								{% if slider_image.file.link %}
									<div class="d-flex align-items-center justify-content-center">
										<a class="btn-hover-bg btn btn-primary rounded-pill text-white carousel-caption-btn px-5" href="{{ slider_image.file.link }}">
											{{ 'button.show-details'|trans }}
										</a>
									</div>
								{% endif %}
							</div>
						</div>
					</div>
				{% endfor %}
			</div>

			{% if gallery_slider_images|length > 1 %}
				<button class="carousel-control-prev" type="button" data-bs-target="#slider-homepage" data-bs-slide="prev">
					<span class="carousel-control-prev-icon btn bg-primary" aria-hidden="false"></span>

					<span class="visually-hidden">Previous</span>
				</button>

				<button class="carousel-control-next" type="button" data-bs-target="#slider-homepage" data-bs-slide="next">
					<span class="carousel-control-next-icon btn bg-primary" aria-hidden="false"></span>

					<span class="visually-hidden">Next</span>
				</button>
			{% endif %}
		</div>
	</div>
{% endblock %}

{% block content %}
	<h2 class="mt-5 mb-4 text-center">
		{{ 'common.fiber_optic_internet'|trans }}		
	</h2>

	<div class="row">
		<div 
			data-controller="slider" 			
		>
			<div 
				class="swiper"
				data-slider-target="sliderMain"	
			>
				<div class="swiper-wrapper">
					{% for download_speed in download_speeds %}
						<div class="swiper-slide offer">
							<h3 class="offer-title">
								{{ download_speed.speed }}
								Mb/s
							</h3>

							<div class="text-center">
								{{ 'common.from'|trans }}
							</div>

							<div class="offer-price-container">
								<span class="price">
									<span class="price-value">
										{{ download_speed.price|price_integer_part }}

										<sup class="price-value-sup">
											{{ download_speed.price|price_decimal_part }}
										</sup>
									</span>

									<span class="price-suffix d-block">
										zł/{{ 'common.month_short'|trans }}
									</span>
								</span>
							</div>

							<div class="offer-button-container text-center">
								<a class="btn btn-primary" href="{{ path('www_offer_individual') }}">
									{{ 'common.check_offer'|trans }}
								</a>
							</div>
						</div>
					{% endfor %}
				</div>

				<div class="swiper-button-prev"></div>

				<div class="swiper-button-next"></div>
			</div>
		</div>
	</div>

	<h2 class="mt-5 mb-4 text-center">
		{{ 'common.news'|trans }}
	</h2>

	{% include 'www/post/_list.html.twig' with {'posts': latests_posts} %}
{% endblock %}