{if $hasBeenInitialized}
{include file="templates/pages/thememanager/manager.js"}
<div id="confirmSkinDialog" style="display: none;">
	Change my theme to <span class="selectedSkin"></span> and:<br />
	<ul>
		<li><input type="radio" checked="checked" id="useLayout_default" name="useLayout" value="default" /> <label for="useLayout_default">discard my layout changes and use <span class="selectedSkin"></span>'s default layout <strong><em>(recommended)</em></strong></label></li>
		<li><input type="radio" id="useLayout_user" name="useLayout" value="user" /> <label for="useLayout_user">leave the layout changes I have already made *</label></li>
	</ul>
	<p class="note">* If selected, your cart may not look like the theme in the preview.</p>
</div>
{/if}

<div id="theme-selection">
	<ul class="themes">
		{foreach from=$themeCollection item="theme"}
		<li class="theme {$theme.selectedTheme}" title="{$theme.name}">
			<div class="theme">
				<p class="title">{$theme.title}</p>
				<div class="controls {$theme.name}">
					<button class="preview_link" data-rel="preview_{$theme.name}" title="{$theme.title}"></button> <button class="activate" title="{$theme.title}"></button>
				</div>
				{if $theme.thumbnail_image}
					<a id="preview_{$theme.name}" href="{$theme.preview_image}" {$theme.rel_group_name} class="preview" title="{$theme.title}">
						<img class="thumbnail" data-theme="{$theme.name}" src="{$theme.thumbnail_image}" />
					</a>
				{else}
					<img class="thumbnail" data-theme="{$theme.name}" src="images/admin/theme-nothumbnail.jpg" />
				{/if}

				{foreach from=$theme.images item="image"}
					<a href="content/skins/{$theme.name}/{$image.path}" {$theme.rel_group_name} title="{$image.title}" class="preview"></a>
				{/foreach}
				<div class="reflection">
					<div class="fade"></div>
					<div class="mirror">
						{if $theme.thumbnail_image}
						<img class="thumbnail" src="{$theme.thumbnail_image}" />
						{else}
						<img class="thumbnail" data-theme="{$theme.name}" src="images/admin/theme-nothumbnail.jpg" />
						{/if}
					</div>
				</div>
				<span class="tags">{$theme.tag}</span>
			</div>
		</li>
		{/foreach}
	</ul>
	<div class="clear"></div>
	<form target="_blank" action="" id="downloadFrm"></form>
</div>