{extends ../../../Core/Templates/Layout}

{block content}
	{!$form['open']}

	<ul class="nav nav-tabs">
	{loop $form['fieldsets'] as $legend => $fieldset}
		<li><a href="{$url}#{$legend|webalize}" data-toggle="tab" data-target-tab="{$legend|webalize}">{$legend}</a></li>
	{/loop}
		{if $app->configuration['photomanager.hotspots.allow'] == TRUE}
		<li><a href="{$url}#interaktivne-body" data-toggle="tab" data-target-tab="interaktivne-body">Ineraktívne body</a></li>
		{/if}
	</ul>

	<div class="tab-content">
	{loop $form['fieldsets'] as $legend => $fieldset}
		<div class="tab-pane" id="{$legend|webalize}">
			<fieldset>
			{loop $fieldset as $element}
				{include ../../../Core/Templates/FormElement}

				{if $legend === 'Fotografia'}
				<div id="preview">
					<img src="{url photo $photo['file'],'photo','400x400'}" data-width="{$photo['width']}" data-height="{$photo['height']}">
					<div class="hotspot"></div>
				</div>
				{/if}
			{/loop}
			</fieldset>
		</div>
	{/loop}
		{if $app->configuration['photomanager.hotspots.allow'] == TRUE}
		<div class="tab-pane" id="interaktivne-body">
			<fieldset>
				<div class="control-group">
					<a href="{url adminAddPhotoHotspot $photo['id']}" class="btn">Pridať bod</a>
				</div>

				<table class="table table-striped table-bordered table-hover">
					{loop $photo['hotspots'] as $hotspot}
					<tr>
						<td>
							{$hotspot['title']} {$hotspot['x']}×{$hotspot['y']}
							<div class="btn-group pull-right">
								<a class="btn btn-small" href="{url adminEditPhotoHotspot $hotspot['id']}"><i class="icon icon-pencil"></i></a>
								<a class="btn btn-small" href="{url adminDeletePhotoHotspot $hotspot['id']}"><i class="icon icon-trash"></i></a>
							</div>
						</td>
					</tr>
					{/loop}
				</table>
			</fieldset>
		</div>
		{/if}
	</div>

	{include ../../../Core/Templates/FormFooter}

	{!$form['close']}
{/block}