{% extends 'templates/main-layout.twig' %}

{% set bodyClasses = 'pano' %}
{% set page_title = 'Panoramen' %}

{% block stylesheets %}
	{{ parent() }}
	<link rel="stylesheet" media="all" href="{{ base_url() }}/assets/css/pano.css" type="text/css">
{% endblock %}

{% block content %}

	<div id="contentsInner">
		<header class="contentsTtl">
			<h1>Panoramen</h1>
			<h2>Meine Panoramen</h2>
		</header>
			{#
			<section id="searchPanel">
			<p class="btnTags closed"><a href="#">Tags</a></p>
			<div class="tags closed">
			<ul>
				<li><a href="{{ base_url() }}/bookmarks/tag/360-degree">360	degree (2)</a></li>
				<li><a href="{{ base_url() }}/bookmarks/tag/3d">3D (94)</a></li>
				<li><a href="{{ base_url() }}/bookmarks/tag/aqua-blue">aqua	blue (19)</a></li>
				<li><a href="{{ base_url() }}/bookmarks/tag/aqua-blur">aqua	blur (1)</a></li>
				<li><a href="{{ base_url() }}/bookmarks/tag/asynchronous">asynchronous (68)</a></li>
				<li><a href="{{ base_url() }}/bookmarks/tag/black">black (141)</a></li>
				<li><a href="{{ base_url() }}/bookmarks/tag/blue">blue (37)</a></li>
				<li><a href="{{ base_url() }}/bookmarks/tag/bold">bold (1)</a></li>
				<li><a href="{{ base_url() }}/bookmarks/tag/brown">brown (3)</a></li>
				<li><a href="{{ base_url() }}/bookmarks/tag/camera">camera (1)</a></li>
				<li><a href="{{ base_url() }}/bookmarks/tag/chrome-extension">chrome extension (1)</a></li>
				<li><a href="{{ base_url() }}/bookmarks/tag/cinemagraph">cinemagraph (1)</a></li>
				<li><a href="{{ base_url() }}/bookmarks/tag/classical">classical (6)</a></li>
				<li><a href="{{ base_url() }}/bookmarks/tag/colorful">colorful (62)</a></li>
				<li><a href="{{ base_url() }}/bookmarks/tag/cool">cool (20)</a></li>
				<li><a href="{{ base_url() }}/bookmarks/tag/creative-coding">creative coding (92)</a></li>
				<li><a href="{{ base_url() }}/bookmarks/tag/css3">css3 (4)</a></li>
				<li><a href="{{ base_url() }}/bookmarks/tag/cute">cute (4)</a></li>
				<li><a href="{{ base_url() }}/bookmarks/tag/dark">dark (58)</a></li>
				<li><a href="{{ base_url() }}/bookmarks/tag/dot">dot (1)</a></li>
				<li><a href="{{ base_url() }}/bookmarks/tag/elegant">elegant (3)</a></li>
				<li><a href="{{ base_url() }}/bookmarks/tag/eye-tracking">eye tracking (1)</a></li>
				<li><a href="{{ base_url() }}/bookmarks/tag/face-tracking">face	tracking (5)</a></li>
				<li><a href="{{ base_url() }}/bookmarks/tag/facetracking">facetracking (1)</a></li>
				<li><a href="{{ base_url() }}/bookmarks/tag/flash">flash (13)</a></li>
				<li><a href="{{ base_url() }}/bookmarks/tag/flat-design">flat design (13)</a></li>
				<li><a href="{{ base_url() }}/bookmarks/tag/font">font (4)</a></li>
				<li><a href="{{ base_url() }}/bookmarks/tag/game">game (9)</a></li>
				<li><a href="{{ base_url() }}/bookmarks/tag/gif-animation">gif animation (10)</a></li>
				<li><a href="{{ base_url() }}/bookmarks/tag/glitch">glitch (1)</a></li>
				<li><a href="{{ base_url() }}/bookmarks/tag/gold">gold (16)</a></li>
				<li><a href="{{ base_url() }}/bookmarks/tag/google">google (5)</a></li>
				<li><a href="{{ base_url() }}/bookmarks/tag/google-api">google API (1)</a></li>
				<li><a href="{{ base_url() }}/bookmarks/tag/google-street-view">google street view (2)</a></li>
				<li><a href="{{ base_url() }}/bookmarks/tag/gray">gray (27)</a></li>
				<li><a href="{{ base_url() }}/bookmarks/tag/green">green (8)</a></li>
				<li><a href="{{ base_url() }}/bookmarks/tag/grid-design">grid design (29)</a></li>
				<li><a href="{{ base_url() }}/bookmarks/tag/horizontal-scroll">horizontal
						scroll (4)</a></li>
				<li><a href="{{ base_url() }}/bookmarks/tag/idea">idea (4)</a></li>
				<li><a href="{{ base_url() }}/bookmarks/tag/illustration">illustration
						(54)</a></li>
				<li><a href="{{ base_url() }}/bookmarks/tag/interactive">interactive
						(83)</a></li>
				<li><a href="{{ base_url() }}/bookmarks/tag/japan">japan
						(1)</a></li>
				<li><a href="{{ base_url() }}/bookmarks/tag/light">light
						(11)</a></li>
				<li><a href="{{ base_url() }}/bookmarks/tag/low-polygon">low
						polygon (1)</a></li>
				<li><a href="{{ base_url() }}/bookmarks/tag/luxury">luxury
						(4)</a></li>
				<li><a href="{{ base_url() }}/bookmarks/tag/mask">mask (1)</a></li>
				<li><a href="{{ base_url() }}/bookmarks/tag/minimal">minimal
						(18)</a></li>
				<li><a href="{{ base_url() }}/bookmarks/tag/monochrome">monochrome
						(1)</a></li>
				<li><a href="{{ base_url() }}/bookmarks/tag/motion">motion
						(171)</a></li>
				<li><a href="{{ base_url() }}/bookmarks/tag/movie">movie
						(49)</a></li>
				<li><a href="{{ base_url() }}/bookmarks/tag/my-work">my
						work (5)</a></li>
				<li><a href="{{ base_url() }}/bookmarks/tag/navy">navy (3)</a></li>
				<li><a href="{{ base_url() }}/bookmarks/tag/orange">orange
						(12)</a></li>
				<li><a href="{{ base_url() }}/bookmarks/tag/parallax">parallax
						(24)</a></li>
				<li><a href="{{ base_url() }}/bookmarks/tag/pastel-color">pastel
						color (3)</a></li>
				<li><a href="{{ base_url() }}/bookmarks/tag/photo">photo
						(72)</a></li>
				<li><a href="{{ base_url() }}/bookmarks/tag/physics">physics
						(2)</a></li>
				<li><a href="{{ base_url() }}/bookmarks/tag/pink">pink (9)</a></li>
				<li><a href="{{ base_url() }}/bookmarks/tag/pixel-graphics">pixel
						graphics (2)</a></li>
				<li><a href="{{ base_url() }}/bookmarks/tag/pop">pop (20)</a></li>
				<li><a href="{{ base_url() }}/bookmarks/tag/programming">programming
						(2)</a></li>
				<li><a href="{{ base_url() }}/bookmarks/tag/purple">purple
						(7)</a></li>
				<li><a href="{{ base_url() }}/bookmarks/tag/red">red (24)</a></li>
				<li><a href="{{ base_url() }}/bookmarks/tag/resonsive">resonsive
						(1)</a></li>
				<li><a href="{{ base_url() }}/bookmarks/tag/responsive">responsive
						(94)</a></li>
				<li><a href="{{ base_url() }}/bookmarks/tag/retro">retro
						(2)</a></li>
				<li><a href="{{ base_url() }}/bookmarks/tag/scroll">scroll
						(153)</a></li>
				<li><a href="{{ base_url() }}/bookmarks/tag/scroll-motion">scroll.
						motion (1)</a></li>
				<li><a href="{{ base_url() }}/bookmarks/tag/simple">simple
						(58)</a></li>
				<li><a href="{{ base_url() }}/bookmarks/tag/smart-phone">smart
						phone (2)</a></li>
				<li><a href="{{ base_url() }}/bookmarks/tag/sound">sound
						(49)</a></li>
				<li><a href="{{ base_url() }}/bookmarks/tag/sprite-animation">sprite
						animation (4)</a></li>
				<li><a href="{{ base_url() }}/bookmarks/tag/sticky-header">sticky
						header (1)</a></li>
				<li><a href="{{ base_url() }}/bookmarks/tag/story">story
						(3)</a></li>
				<li><a href="{{ base_url() }}/bookmarks/tag/svg">svg (25)</a></li>
				<li><a href="{{ base_url() }}/bookmarks/tag/technical">technical
						(56)</a></li>
				<li><a href="{{ base_url() }}/bookmarks/tag/tool">tool (3)</a></li>
				<li><a href="{{ base_url() }}/bookmarks/tag/tumblr">tumblr
						(2)</a></li>
				<li><a href="{{ base_url() }}/bookmarks/tag/typography">typography
						(85)</a></li>
				<li><a href="{{ base_url() }}/bookmarks/tag/video">video
						(3)</a></li>
				<li><a href="{{ base_url() }}/bookmarks/tag/vivid">vivid
						(5)</a></li>
				<li><a href="{{ base_url() }}/bookmarks/tag/voice-recognition">voice
						recognition (1)</a></li>
				<li><a href="{{ base_url() }}/bookmarks/tag/warm">warm (6)</a></li>
				<li><a href="{{ base_url() }}/bookmarks/tag/webcam">webCam
						(1)</a></li>
				<li><a href="{{ base_url() }}/bookmarks/tag/webgl">webGL
						(120)</a></li>
				<li><a href="{{ base_url() }}/bookmarks/tag/white">white
						(142)</a></li>
				<li><a href="{{ base_url() }}/bookmarks/tag/yellow">yellow
						(15)</a></li>
				<li><a href="{{ base_url() }}/bookmarks/tag/yellowish-green">yellowish
						green (8)</a></li>
			</ul>
		</div>
			<p class="btnMonthlyArchives closed"><a href="#">Monthly Archives</a></p>
			<div class="monthlyArchives closed">
				<ul>
				<li><a href="{{ base_url() }}/bookmarks/date/2017/04"><span class="year">2017</span><span class="month">04</span></a></li>
				<li><a href="{{ base_url() }}/bookmarks/date/2017/01"><span class="year">2017</span><span class="month">01</span></a></li>
				<li><a href="{{ base_url() }}/bookmarks/date/2016/10"><span class="year">2016</span><span class="month">10</span></a></li>
				<li><a href="{{ base_url() }}/bookmarks/date/2016/08"><span class="year">2016</span><span class="month">08</span></a></li>
				<li><a href="{{ base_url() }}/bookmarks/date/2016/07"><span class="year">2016</span><span class="month">07</span></a></li>
				<li><a href="{{ base_url() }}/bookmarks/date/2016/06"><span class="year">2016</span><span class="month">06</span></a></li>
				<li><a href="{{ base_url() }}/bookmarks/date/2016/04"><span class="year">2016</span><span class="month">04</span></a></li>
				<li><a href="{{ base_url() }}/bookmarks/date/2016/03"><span class="year">2016</span><span class="month">03</span></a></li>
				<li><a href="{{ base_url() }}/bookmarks/date/2016/02"><span class="year">2016</span><span class="month">02</span></a></li>
				<li><a href="{{ base_url() }}/bookmarks/date/2016/01"><span class="year">2016</span><span class="month">01</span></a></li>
				<li><a href="{{ base_url() }}/bookmarks/date/2015/12"><span class="year">2015</span><span class="month">12</span></a></li>
				<li><a href="{{ base_url() }}/bookmarks/date/2015/11"><span class="year">2015</span><span class="month">11</span></a></li>
				<li><a href="{{ base_url() }}/bookmarks/date/2015/10"><span class="year">2015</span><span class="month">10</span></a></li>
				<li><a href="{{ base_url() }}/bookmarks/date/2015/09"><span class="year">2015</span><span class="month">09</span></a></li>
				<li><a href="{{ base_url() }}/bookmarks/date/2015/08"><span class="year">2015</span><span class="month">08</span></a></li>
				<li><a href="{{ base_url() }}/bookmarks/date/2015/07"><span class="year">2015</span><span class="month">07</span></a></li>
				<li><a href="{{ base_url() }}/bookmarks/date/2015/06"><span class="year">2015</span><span class="month">06</span></a></li>
				<li><a href="{{ base_url() }}/bookmarks/date/2015/05"><span class="year">2015</span><span class="month">05</span></a></li>
				<li><a href="{{ base_url() }}/bookmarks/date/2015/04"><span class="year">2015</span><span class="month">04</span></a></li>
				<li><a href="{{ base_url() }}/bookmarks/date/2015/03"><span class="year">2015</span><span class="month">03</span></a></li>
				<li><a href="{{ base_url() }}/bookmarks/date/2015/02"><span class="year">2015</span><span class="month">02</span></a></li>
				<li><a href="{{ base_url() }}/bookmarks/date/2015/01"><span class="year">2015</span><span class="month">01</span></a></li>
				<li><a href="{{ base_url() }}/bookmarks/date/2014/12"><span class="year">2014</span><span class="month">12</span></a></li>
				<li><a href="{{ base_url() }}/bookmarks/date/2014/11"><span class="year">2014</span><span class="month">11</span></a></li>
				<li><a href="{{ base_url() }}/bookmarks/date/2014/10"><span class="year">2014</span><span class="month">10</span></a></li>
				<li><a href="{{ base_url() }}/bookmarks/date/2014/09"><span class="year">2014</span><span class="month">09</span></a></li>
				<li><a href="{{ base_url() }}/bookmarks/date/2014/08"><span class="year">2014</span><span class="month">08</span></a></li>
				<li><a href="{{ base_url() }}/bookmarks/date/2014/07"><span class="year">2014</span><span class="month">07</span></a></li>
				<li><a href="{{ base_url() }}/bookmarks/date/2014/06"><span class="year">2014</span><span class="month">06</span></a></li>
				<li><a href="{{ base_url() }}/bookmarks/date/2014/05"><span class="year">2014</span><span class="month">05</span></a></li>
				<li><a href="{{ base_url() }}/bookmarks/date/2014/04"><span class="year">2014</span><span class="month">04</span></a></li>
				</ul>
			</div>
			<p class="btnKeyword closed"><a href="#">Keyword</a></p>
			<div class="keyword closed">
				<form>
				<input type="text"/>
				<p class="btnSubmit"><a href="#">Search</a></p>
				</form>
			</div>
			<p class="btnBack"><a href="#">Back</a></p>
			</section>#}
		<div class="inner">

			<section class="articles">


				<article>
					<a href="{{ path_for("panoViewer",{'panoId':9}) }}">
						<div class="thumb">
							<img src="{{ base_url() }}/assets/img/pano/pano9.png">
							<p class="detail"><span>View detail</span></p>
						</div>
						<div class="ttls">
							<h2 class="ttl">Seat 5F treffen Walkershofen</h2>
							<p class="date">20.09.2020</p>
						</div>
					</a>
				</article>

				<article>
					<a href="{{ path_for("panoViewer",{'panoId':8}) }}">
						<div class="thumb">
							<img src="{{ base_url() }}/assets/img/pano/pano8.png">
							<p class="detail"><span>View detail</span></p>
						</div>
						<div class="ttls">
							<h2 class="ttl">Wülzburg kaltes Eck</h2>
							<p class="date">01.07.2020</p>
						</div>
					</a>
				</article>

				<article>
					<a href="{{ path_for("panoViewer",{'panoId':7}) }}">
						<div class="thumb">
							<img src="{{ base_url() }}/assets/img/pano/pano7.png">
							<p class="detail"><span>View detail</span></p>
						</div>
						<div class="ttls">
							<h2 class="ttl">Autokino Gunzenhausen 2020</h2>
							<p class="date">26.06.2020</p>
						</div>
					</a>
				</article>

				<article>
					<a href="{{ path_for("panoViewer",{'panoId':6}) }}">
						<div class="thumb">
							<img src="{{ base_url() }}/assets/img/pano/pano6.png">
							<p class="detail"><span>View detail</span></p>
						</div>
						<div class="ttls">
							<h2 class="ttl">Night of light 2020</h2>
							<p class="date">22.06.2020</p>
						</div>
					</a>
				</article>

				<article>
					<a href="{{ path_for("panoViewer",{'panoId':5}) }}">
						<div class="thumb">
							<img src="{{ base_url() }}/assets/img/pano/pano5.png">
							<p class="detail"><span>View detail</span></p>
						</div>
						<div class="ttls">
							<h2 class="ttl">Gelber Berg</h2>
							<p class="date">21.06.2020</p>
						</div>
					</a>
				</article>

				<article>
					<a href="{{ path_for("panoViewer",{'panoId':3}) }}">
						<div class="thumb">
							<img src="{{ base_url() }}/assets/img/pano/pano3.png">
							<p class="detail"><span>View detail</span></p>
						</div>
						<div class="ttls">
							<h2 class="ttl">Autokino Weißenburg 2020</h2>
							<p class="date">31.05.2020</p>
						</div>
					</a>
				</article>

				<article>
					<a href="{{ path_for("panoViewer",{'panoId':4}) }}">
						<div class="thumb">
							<img src="{{ base_url() }}/assets/img/pano/pano4.png">
							<p class="detail"><span>View detail</span></p>
						</div>
						<div class="ttls">
							<h2 class="ttl">Wülzburg 2019</h2>
							<p class="date">17.05.2019</p>
						</div>
					</a>
				</article>
				
				<article>
					<a href="{{ path_for("panoViewer",{'panoId':2}) }}">
						<div class="thumb">
							<img src="{{ base_url() }}/assets/img/pano/pano2.png">
							<p class="detail"><span>View detail</span></p>
						</div>
						<div class="ttls">
							<h2 class="ttl">BIG Bike Meet 2017</h2>
							<p class="date">09.06.2017</p>
						</div>
					</a>
				</article>

				<article>
					<a href="{{ path_for("panoViewer",{'panoId':1}) }}">
						<div class="thumb">
							<img src="{{ base_url() }}/assets/img/pano/pano1.png">
							<p class="detail"><span>View detail</span></p>
						</div>
						<div class="ttls">
							<h2 class="ttl">Weidenbacher Musicalnight 2016</h2>
							<p class="date">05.11.2016</p>
						</div>
					</a>
				</article>
			
			</section>
			
			{#
			<div class="pagination">
			<span class="current"><a href='{{ base_url() }}/bookmarks/'>1</a></span>
			<span><a href='{{ base_url() }}/bookmarks/page/2'>2</a></span>
			<span><a href='{{ base_url() }}/bookmarks/page/3'>3</a></span>
			<span><a href='{{ base_url() }}/bookmarks/page/4'>4</a></span>
			<span><a href='{{ base_url() }}/bookmarks/page/5'>5</a></span>
			<span class="dot">...</span>
			<span class="end"><a href='{{ base_url() }}/bookmarks/page/37'>37</a></span>
			<span class="next"><a href="{{ base_url() }}/bookmarks/page/2">Next</a></span>
			<p class="page">1 / 37</p>
			</div>
			#}

		</div>
	</div>

{% endblock %}

{% block scripts %}
	{{ parent() }}
	<script src="{{ base_url() }}/assets/js/pano.js"></script>
{% endblock %}