{extends Layout}

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

	<ul class="nav nav-tabs">
		<li><a href="{$url}#ikona" data-toggle="tab" data-target-tab="ikona">Ikona</a></li>
	{loop $form['fieldsets'] as $legend => $fieldset}
		<li><a href="{$url}#{$legend|webalize}" data-toggle="tab" data-target-tab="{$legend|webalize}">{$legend}</a></li>
	{/loop}
		<li><a href="{$url}#fotografie" data-toggle="tab" data-target-tab="fotografie">Fotografie</a></li>
		<li><a href="{$url}#umiestnenie" data-toggle="tab" data-target-tab="umiestnenie">Umiestnenie</a></li>
	</ul>

	<div class="tab-content">
		<div class="tab-pane" id="ikona">
			<fieldset>
			{loop $hotspots_icons as $icon}
				<span style="width: {$hotspots_icons_width}px; height: {$hotspots_icons_height}px; background-image: url('.{$hotspots_icons_dir}/{$icon}');" {class 'hotspot-icon', $hotspot['icon'] === $icon ? 'current'} data-file="{$icon}"></span>
			{/loop}
			</fieldset>
		</div>

	{loop $form['fieldsets'] as $legend => $fieldset}
		<div class="tab-pane" id="{$legend|webalize}">
			<fieldset>
			{loop $fieldset as $element}
				<div {class "control-group", $element['error'] ? "error"}>
					{if $element['type'] === 'checkbox'}
					<div class="controls">
						<label class="checkbox" for="{$element['name']}">
							<input type="checkbox" name="{$element['name']}" id="{$element['name']}" {if $element['value']}checked{/if}> {if $element['label'][0] !== '!'}{$element['label']}{/if}
						</label>
					</div>
					{else}

					{if  $element['label'][0] !== '!'}
					<label class="control-label" for="{$element['name']}">{$element['label']}</label>
					{/if}
					<div class="controls">
						{if $element['type'] === 'textarea'}
						<textarea name="{$element['name']}" class="{$element['class']}" id="{$element['name']}" rows="10">{$element['value']}</textarea>
						{elseif $element['type'] === 'select'}
						<select  name="{$element['name']}">
							{loop $element['values'] as $value => $text}
							<option value="{$value}" {if $value == $element['value']}selected{/if}>{$text}</option>
							{/loop}
						</select>
						{else}
						<input type="{$element['type']}" name="{$element['name']}{if (int) $element['files'] > 1}[]{/if}" value="{$element['value']}" class="{$element['class']}" id="{$element['name']}" {if (int) $element['files'] > 1}multiple{/if}>
						{/if}

						{if $element['error'] !== NULL}
						<p class="help-block error">{$element['error']}</p>
						{/if}
						{if $element['note'] !== NULL}
						<p class="help-block">{$element['note']}</p>
						{/if}
					</div>
					{/if}
				</div>
			{/loop}
			</fieldset>
		</div>
	{/loop}

		<div class="tab-pane" id="fotografie">
			<fieldset>
				<div class="control-group">
					<a href="" class="btn photo-picker">Pridať fotografie</a>
				</div>

				<ul class="thumbnails sortable">
				{loop $hotspot['photos'] as $p}
					<li class="span2">
						<div class="thumbnail">
							<h5>{$p['old_file']}</h5>
							<img src="{url photo 'thumb',$p['file'],'160x106'}" rel="tooltip" title="{$p['old_file']}" data-photoid="{$p['id']}">

							<div>
								<div class="btn-group pull-right">
									<a href="" class="btn btn-mini"><i class="icon icon-trash"></i></a>
								</div>

								<div class="clearfix"></div>
							</div>
						</div>
					</li>
				{/loop}
				</ul>
			</fieldset>
		</div>

		<div class="tab-pane" id="umiestnenie">
			<fieldset>
				<div class="hotspot-image-wrapper">
					<img src="{url photo 'photo',$photo['file'],'2000x2000'}" class="hotspot-image" data-width="{$photo['width']}" data-height="{$photo['height']}">
				</div>
			</fieldset>
		</div>
	</div>

	<div class="hidden">
	{loop $form['hidden'] as $hidden}
		<input type="hidden" name="{$hidden['name']}" value="{$hidden['value']}" />
	{/loop}
	</div>

	<div class="btn-group form-actions">
	{loop $form['buttons'] as $button}
		<button type="submit" class="btn {$button['class']}" name="{$button['name']}" class="{$button['class']}">{$button['value']}</button>
	{/loop}
	</div>

	{!$form['close']}

	{include PhotoPicker}
	{include GalleryPicker}
{/block}