{% load staticfiles %}
{% verbatim %}
	<div id="submenu" style="width:100%;display:none" v-show="isActive('albums')">
		<div style="display:none" v-show="isActive('album')">
			<div style="background-color:#ececec;">
				<div class="center-items gc gnp-xs">
					<ul class="gnm gnp gfl gfw-w gc center-content gfl">
						<li class="gnm gnp center-items" v-for ="alb in albums">
								<a v-bind:href="alb.url" style="font-size:13px; padding:0em 1em 0em 0.5em">
									<img v-bind:src="alb.image" v-bind:alt="alb.title" />
								</a>
							<div class="text-left xs-sm hidden-xs" style="font-size:13px; padding:0em 2em 0em 0em">
								<a v-bind:href="alb.url">
									{{ alb.title }}
								</a>
							</div>			
						</li>
					</ul>
				</div>
			</div>
			<div class="gfl one center-content">	
				<div class="container">
					<div v-html="album.description"></div>
				</div>
			</div>
		</div>
	</div>
	{% endverbatim %}
	<div id="#slide-img" v-show="isActive('photos')">
		<div id="slider" style="text-align:center;width:100%"
			v-on:mouseover="showPhotoBtn()" v-on:mouseout="hidePhotoBtn()">
			<img id="slider-img" v-bind:src="imgSrc" style="width:100%;max-width:100%;" @click="fs" />
		</div>
	</div>
	<div v-show="isActive('arrows')">
		<div id="btn-next" style="z-index:100;
		display:none;
		position:relative;
		margin-top:-35%;
		margin-right:1em;
		float:right;" class="hidden-xs" @click="next()" v-on:mouseover="showPhotoBtn()"> 
			<img id="next" src="{% static 'vvphotos/img/next.png' %}" alt=""/>
		</div>
		<div id="btn-prev" style="z-index:100;
		display:none;
		position:relative;
		margin-top:-35%;
		margin-left:1em;
		float:left;" class="hidden-xs" @click="prev()" v-on:mouseover="showPhotoBtn()"> 
			<img id="prev" src="{% static 'vvphotos/img/prev.png' %}" alt=""/>
		</div>
	</div>
</div>