{strip}

<div class="admin themes">
	<div class="header">
		<h1> {tr}Themes Manager{/tr}</h1>
	</div>

	<div class="body">
		{if $approve}
			<div id="themeapprove">
				<h1>{tr}Confirm Selection{/tr}</h1>
				<p>{tr}The settings you have chosen has not been applied to the site yet. This allows you to test the styles before applying them to your site. To accept the change, please click on the accept button below{/tr}<p>
				<a class="btn btn-primary" href="{$smarty.const.THEMES_PKG_URL}admin/admin_themes_manager.php?site_style={$smarty.request.site_style}&amp;style_variation={$smarty.request.style_variation}&amp;site_style_layout={$smarty.request.site_style_layout}&amp;approved=1">{biticon ipackage="icons" iname="dialog-ok"}{tr}Accept{/tr}</a>
				<a class="btn pull-right" href="{$smarty.const.THEMES_PKG_URL}admin/admin_themes_manager.php">{biticon ipackage="icons" iname="process-stop" }{tr}Cancel{/tr}</a>
			</div>
		{/if}

		{jstabs}
			{jstab title="Site Theme"}
				{legend legend="Pick Site Theme"}
					{foreach from=$stylesList item=s}
						<legend {if $style eq $s.style}class="highlight"{/if}>
							{if $style eq $s.style}
								{biticon ipackage="icons" iname="dialog-ok" iexplain="Current Theme"}&nbsp;
							{/if}
							<a href="{$smarty.const.THEMES_PKG_URL}admin/admin_themes_manager.php?site_style={$s.style}">{$s.style|replace:"_":" "}</a>
						</legend>

						{if $s.style_info.preview}
							<a class="floatright" href="{$smarty.const.THEMES_PKG_URL}admin/admin_themes_manager.php?site_style={$s.style}">
								<img class="thumb" src="{$s.style_info.preview}" alt="{tr}Theme Preview{/tr}" title="{$s.style}" />
							</a>
						{/if}

						<a class="btn btn-primary" href="{$smarty.const.THEMES_PKG_URL}admin/admin_themes_manager.php?site_style={$s.style}">{tr}Select{/tr} {$s.style|replace:"_":" "}</a>
						{$s.style_info.description}
						{if $s.alternate}
							<h3>{tr}Variations of this style{/tr}</h3>
							<ul>
								{foreach from=$s.alternate key=variation item=d}
									<li><a href="{$smarty.const.THEMES_PKG_URL}admin/admin_themes_manager.php?site_style={$s.style}&amp;style_variation={$variation}">{$variation|replace:"_":" "}</a></li>
								{/foreach}
							</ul>
						{/if}
					{/foreach}
				{/legend}
			{/jstab}

			{jstab title="Icon Theme"}
				{legend legend="Pick Icon Theme"}
					<p class="help">
						Icon sets must follow the <a class="external" href="https://specifications.freedesktop.org/icon-naming-spec/latest/">freedesktop Icon Naming Specification</a>. The active set is <strong>tango</strong>, sourced from <a class="external" href="https://gitlab.com/tango-project/tango-icon-theme">Tango3</a> (stored in <code>externals/Tango3</code>). Place additional iconsets in <code>util/iconsets/</code>.
					</p>
					<p class="help">
						If you are a developer and you want to view a list of available icons, you can do this with the {smartlink ititle="Icon Browser" ifile="icon_browser.php"}.
					</p>

					<ul>
						{foreach from=$iconThemes item=s}
							<li class="item">
								<legend {if $style eq $s.style}class="highlight"{/if}>
									{if $gBitSystem->getConfig(site_icon_style) eq $s.style}
										{biticon ipackage="icons" iname="dialog-ok" iexplain="Current Theme"}&nbsp;
									{/if}
									<a href="{$smarty.const.THEMES_PKG_URL}admin/admin_themes_manager.php?site_icon_style={$s.style}">{$s.style|replace:"_":" "}</a>
								</legend>

								{if $s.style_info.preview}
									<a href="{$smarty.const.THEMES_PKG_URL}admin/admin_themes_manager.php?site_icon_style={$s.style}">
										<img class="thumb" src="{$s.style_info.preview}" alt="{tr}Theme Preview{/tr}" title="{$s.style}" />
									</a>
								{/if}

								{$s.style_info.description}

								<h3>{tr}Sample icons{/tr}</h3>
								{foreach from=$sampleIcons item=icon}
									{biticon ipackage=icons istyle=$s.style iname=$icon isize="large" iexplain=$icon}
								{/foreach}

								{if $smarty.const.DEFAULT_ICON_STYLE eq $s.style}
									<br /><span class="highlight">{tr}This icon style is the default. If an icon is not found in the selected icon theme, the icon from here will be used instead{/tr}</span>
								{/if}
								<div class="clear"></div>
							</li>
						{/foreach}
					</ul>
				{/legend}
			{/jstab}
		{/jstabs}
	</div> <!-- end .body -->
</div>  <!-- end .themes -->

{/strip}