{% set hideBreadcrumb = false %}

{#% set breadcrumb = [
	{ 'title': 'Úvod', 'href': '/' },
	{ 'title': 'Nemoci', 'href': '/' },
	{ 'title': 'Očkování proti klíšťové encefalitidě', 'href': null },
] %#}

{% extends 'layout.html.twig' %}

{% block content %}

<main class="content">
	<section class="block">
		<div class="container block-rows">
			<div class="grid grid-cols-12 block-row">
				<div class="col-span-12">
					<div class="block-head">
						<h1>Nadpis H1</h1>
					</div>
					<div class="entry perex m-b-1-5">
						<p>
							Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos
							saepe blanditiis ullam nemo necessitatibus accusamus sint. Lorem
							ipsum dolor sit amet, consectetur adipisicing elit. Eos saepe
							blanditiis ullam nemo necessitatibus accusamus sint.
						</p>
						<p>
							Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos
							saepe blanditiis ullam nemo necessitatibus accusamus sint.
						</p>
					</div>
					<div class="entry">
						<h2>Nadpis H2</h2>
						<p>
							Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae
							eum ab atque eaque dignissimos, modi soluta iste quisquam,
							praesentium, quia id voluptate sunt officia nesciunt! Dicta, quae
							quibusdam aspernatur repudiandae. Lorem ipsum dolor sit amet,
							consectetur adipisicing elit. Voluptatum earum excepturi nam atque
							suscipit dolor repellat iste rem, inventore, maiores perferendis
							unde illum, molestiae ducimus dolores. Culpa, saepe vitae eveniet.
						</p>

						<h3>Nadpis H3</h3>
						<p>
							Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet eos
							fugit omnis. Tenetur, dolorum neque minus qui quam magni
							praesentium. Amet distinctio qui vitae obcaecati, necessitatibus
							molestias molestiae voluptatibus quam.
						</p>

						<h2>Nadpis H2</h2>
						<p>
							Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae
							eum ab atque eaque dignissimos, modi soluta iste quisquam,
							praesentium, quia id voluptate sunt officia nesciunt! Dicta, quae
							quibusdam aspernatur repudiandae. Lorem ipsum dolor sit amet,
							consectetur adipisicing elit. Voluptatum earum excepturi nam atque
							suscipit dolor repellat iste rem, inventore, maiores perferendis
							unde illum, molestiae ducimus dolores. Culpa, saepe vitae eveniet.
						</p>

						<h3>Nadpis H3</h3>
						<p>
							Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet eos
							fugit omnis. Tenetur, dolorum neque minus qui quam magni
							praesentium.
						</p>

						<h4>Nadpis H4</h4>
						<p>
							Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet eos
							fugit omnis. Tenetur, dolorum neque minus qui quam magni
							praesentium. Amet distinctio qui vitae obcaecati, necessitatibus
							molestias molestiae voluptatibus quam.
						</p>
						<p>
							<a href="#modal" class="btn modal-trigger" target="_self"
								>Otevřít modal</a
							>
						</p>
						<div class="modal" id="modal">
							<div class="modal__content">
								<div class="entry">
									<h3>Nadpis H3</h3>
									<p>
										Lorem ipsum dolor sit amet, consectetur adipisicing elit.
										Amet eos fugit omnis. Tenetur, dolorum neque minus qui quam
										magni praesentium.
									</p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="grid grid-cols-12 block-row">
				<div class="col-span-6">
					<div class="entry">
						<ul>
							<li>Lorem ipsum dolor</li>
							<li>Lorem ipsum dolor</li>
							<li>Lorem ipsum dolor</li>
						</ul>
					</div>
				</div>
				<div class="col-span-6">
					<div class="entry">
						<ol>
							<li>Lorem ipsum dolor</li>
							<li>Lorem ipsum dolor</li>
							<li>Lorem ipsum dolor</li>
						</ol>
					</div>
				</div>
			</div>
			<div class="grid grid-cols-12 block-row">
				<div class="col-span-12">
					{% include 'snippets/accordion-item.html.twig' %}
				</div>
			</div>
		</div>
	</section>
	<section class="block block--alt">
		<div class="container">
			<div class="grid grid-cols-12">
				<div class="col-span-12">
					<div class="item-list service-item-list">
						<div class="item">
							<div class="item__inner">
								<a href="/" class="item__img">
									<img src="" alt="" />
								</a>
								<div class="item__text">
									<h3 class="item__title">Název</h3>
									<p>
										Lorem ipsum dolor sit amet, consectetur adipisicing elit.
										Corporis aut voluptates nulla incidunt.
									</p>
								</div>
							</div>
						</div>
						<div class="item">
							<div class="item__inner">
								<a href="/" class="item__img">
									<img src="" alt="" />
								</a>
								<div class="item__text">
									<h3 class="item__title">Název</h3>
									<p>
										Lorem ipsum dolor sit amet, consectetur adipisicing elit.
										Corporis aut voluptates nulla incidunt.
									</p>
								</div>
							</div>
						</div>
						<div class="item">
							<div class="item__inner">
								<a href="/" class="item__img">
									<img src="" alt="" />
								</a>
								<div class="item__text">
									<h3 class="item__title">Název</h3>
									<p>
										Lorem ipsum dolor sit amet, consectetur adipisicing elit.
										Corporis aut voluptates nulla incidunt.
									</p>
								</div>
							</div>
						</div>
						<div class="item">
							<div class="item__inner">
								<a href="/" class="item__img">
									<img src="" alt="" />
								</a>
								<div class="item__text">
									<h3 class="item__title">Název</h3>
									<p>
										Lorem ipsum dolor sit amet, consectetur adipisicing elit.
										Corporis aut voluptates nulla incidunt.
									</p>
								</div>
							</div>
						</div>
						<div class="item">
							<div class="item__inner">
								<a href="/" class="item__img">
									<img src="" alt="" />
								</a>
								<div class="item__text">
									<h3 class="item__title">Název</h3>
									<p>
										Lorem ipsum dolor sit amet, consectetur adipisicing elit.
										Corporis aut voluptates nulla incidunt.
									</p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="grid grid-cols-12">
				<div class="col-span-12">
					<div class="pager">
						<a class="btn pager__prev pager__btn" href="#" title="" target="_self">
							Předchozí
						</a>
						<ul class="pager__list">
							<li class="pager__item pager__item--first">
								<a class="pager__link" href="#">1</a>
								<span class="pager__dots">…</span>
							</li>
							<li class="pager__item">
								<a class="pager__link pager__link--active" href="#">2</a>
							</li>
							<li class="pager__item">
								<a class="pager__link" href="#">3</a>
							</li>
							<li class="pager__item">
								<a class="pager__link" href="#">4</a>
							</li>
							<li class="pager__item">
								<a class="pager__link" href="#">5</a>
							</li>

							<li class="pager__item pager__item--last">
								<span class="pager__dots">…</span>
								<a class="pager__link" href="#">12</a>
							</li>
						</ul>
						<a class="btn pager__next pager__btn" href="#" title="" target="_self">
							Následující
						</a>
					</div>
				</div>
			</div>
		</div>
	</section>
	<section class="block">
		<div class="container">
			<div class="grid grid-cols-12">
				<div class="col-span-12">
					<div
						class="slider item-slider service-slider" id="service-slider" data-controls="#service-slider-controls" data-items-xl="2" data-items-sm="2">
						<div class="slider__wrapper">
							<div class="slider__content">
								<ul class="slider__container">
									<li class="slider__panel">
										<div class="item">
											<div class="item__inner">
												Lorem ipsum dolor sit amet, consectetur adipisicing elit.
												Quae voluptas eligendi pariatur perferendis molestias
												veniam, delectus, voluptate explicabo accusantium a
												obcaecati cum provident perspiciatis beatae ipsam illo
												dolores officia tempore.
											</div>
										</div>
									</li>
									<li class="slider__panel">
										<div class="item">
											<div class="item__inner">
												Lorem ipsum dolor sit amet, consectetur adipisicing elit.
												Quae voluptas eligendi pariatur perferendis molestias
												veniam, delectus, voluptate explicabo accusantium a
												obcaecati cum provident perspiciatis beatae ipsam illo
												dolores officia tempore.
											</div>
										</div>
									</li>
									<li class="slider__panel">
										<div class="item">
											<div class="item__inner">
												Lorem ipsum dolor sit amet, consectetur adipisicing elit.
												Quae voluptas eligendi pariatur perferendis molestias
												veniam, delectus, voluptate explicabo accusantium a
												obcaecati cum provident perspiciatis beatae ipsam illo
												dolores officia tempore.
											</div>
										</div>
									</li>
								</ul>
							</div>
						</div>
						<div class="slider-controls" id="service-slider-controls">
							<a href="/" onclick="return false;" class="slider-controls__prev" title="Předchozí" target="_self">
							</a>
							<a href="/" onclick="return false;" class="slider-controls__next" title="Následující" target="_self">
							</a>
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>
	<section class="block block--alt">
		<div class="container">
			<div class="grid grid-cols-12">
				<div class="col-span-12">
					<div class="tabs">
						<div class="tab-nav">
							<ul class="tab-nav__list">
								<li class="tab-nav__item">
									<a class="tab-nav__link" href="#tab-1" title="Lorem ipsum" target="_self">Lorem ipsum</a>
								</li>
								<li class="tab-nav__item">
									<a class="tab-nav__link" href="#tab-2" title="Lorem ipsum" target="_self">Lorem ipsum</a>
								</li>
							</ul>
						</div>
						<div class="tab-content">
							<div class="tab" name="#tab-1">
								<p>
									Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae
									voluptas eligendi pariatur perferendis molestias veniam,
									delectus, voluptate explicabo accusantium a obcaecati cum
									provident perspiciatis beatae ipsam illo dolores officia
									tempore.
								</p>
							</div>
							<div class="tab" name="#tab-2">
								<p>
									Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae
									voluptas eligendi pariatur perferendis molestias veniam,
									delectus, voluptate explicabo accusantium a obcaecati cum
									provident perspiciatis beatae ipsam illo dolores officia
									tempore.
								</p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>
	<section class="block">
		<div class="container">
			<div class="grid grid-cols-12">
				<div class="col-span-12">
					<form class="form">
						<div class="form-cell-set form-cell-set--2">
							<div class="form-cell">
								<label for="">Jméno</label>
								<input type="text" class="text" />
							</div>
							<div class="form-cell">
								<label for="">Příjmení</label>
								<input type="text" class="text" />
							</div>
							<div class="form-cell">
								<label for="">E-mail</label>
								<input type="text" class="text" />
							</div>
						</div>
						<div class="form-cell-set form-cell-set--inline">
							<div class="form-cell form-check">
								<input id="agreement" type="checkbox" class="form-check__input"/>
								<label class="form-check__label" for="agreement">Checkbox</label>
							</div>
							<div class="form-cell form-check">
								<input id="radio1" type="radio" class="form-check__input" name="radio"/>
								<label class="form-check__label" for="radio1">Radio 1</label>
							</div>
							<div class="form-cell form-check">
								<input id="radio2" type="radio" class="form-check__input" name="radio"/>
								<label class="form-check__label" for="radio2">Radio 2</label>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
	</section>
	<section>
		<div class="map ol-map" data-lat="49.2013028" data-lng="16.6056522"></div>
		{{ encore_entry_script_tags('maps') }}

		{#<div class="map gmap">
			<div class="map-marker gmap-marker"  data-lat="49.2013028" data-lng="16.6056522">
				<div class="map-marker__popup map-popup">
					<div class="map-popup__inner">
						<p class="map-popup__title">
							Porta design
						</p>
						<div class="map-popup__content">
							<p>
								Za divadlem 2
								602 00 Brno
							</p>
						</div>
					</div>
				</div>
			</div>
		</div>#}
	</section>
</main>

{% endblock %}
