{% set hideBreadcrumb = false %}

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

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

{% block content %}

<main class="content">
	<section class="section">
		<div class="container section-rows">
			<div class="grid grid-cols-12 section-row">
				<div class="col-span-12">
					<div class="section-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>
			</div>
		</div>
	</section>
	<section class="section">
		<div class="container section-rows">
			<div class="grid grid-cols-12 section-row">
				<div class="col-span-12">
					<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>
						<ul>
							<li>Lorem ipsum dolor</li>
							<li>Lorem ipsum dolor</li>
							<li>Lorem ipsum dolor</li>
						</ul>
						<ol>
							<li>Lorem ipsum dolor</li>
							<li>Lorem ipsum dolor</li>
							<li>Lorem ipsum dolor</li>
						</ol>
					</div>
				</div>
			</div>
		</div>
	</section>
	<section class="section">
		<div class="container section-rows">
			<div class="grid grid-cols-12 section-row">
				<div class="col-span-12">
					<div class="accordion-list">
						{% include 'snippets/accordion.html.twig' %}
					</div>
				</div>
			</div>
		</div>
	</section>
	<section class="section section--alt">
		<div class="container">
			<div class="grid grid-cols-12">
				<div class="col-span-12">
					<div class="item-list item-list--3">
						<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="section">
		<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">
												<div class="entry">
													<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>
									</li>
									<li class="slider__panel">
										<div class="item">
											<div class="item__inner">
												<div class="entry">
													<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>
									</li>
									<li class="slider__panel">
										<div class="item">
											<div class="item__inner">
												<div class="entry">
													<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>
									</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="section section--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" id="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" id="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="section">
		<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="" class="form-label">Jméno</label>
								<input type="text" class="form-input" />
							</div>
							<div class="form-cell">
								<label for="" class="form-label">Příjmení</label>
								<input type="text" class="form-input" />
							</div>
							<div class="form-cell form-check">
								<input id="agreement1" type="checkbox" class="form-check__input"/>
								<label class="form-check__label" for="agreement1">Checkbox 1</label>
							</div>
							<div class="form-cell form-check">
								<input id="agreement2" type="checkbox" class="form-check__input"/>
								<label class="form-check__label" for="agreement2">Checkbox 2</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>
						<div class="form-cell-set form-cell-set--inline">
							
						</div>
					</form>
				</div>
			</div>
		</div>
	</section>
	<section class="section">
		<div class="container section-rows">
			<div class="grid grid-cols-12 section-row">
				<div class="col-span-12">
					<div class="entry">
						<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>
	</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 %}
