@model ThemeListModel

@using SmartStore.Web.Framework.UI;
@using SmartStore.Admin.Models.Themes;
@using SmartStore.Core.Themes;

@{
	ViewBag.Title = T("Admin.Configuration.Themes").Text;
}

@using (Html.BeginForm())
{
    <div class="section-header">
        <div class="title">
            <i class="fa fa-picture-o"></i>
            @T("Admin.Configuration.Themes")
        </div>
        <div class="options">
			@Html.Widget("admin_button_toolbar_before")

            <button type="submit" name="save" value="save" class="btn btn-primary">
                <i class="fa fa-check"></i>
                @T("Admin.Common.Save")
            </button>
			<a href='@Url.Action("ReloadThemes", new { storeId = Model.StoreId })' class="btn">
				<i class="fa fa-refresh"></i>
				@T("Admin.Configuration.Themes.Reload")
			</a>
			<a id="uploadpackage" href="#uploadpackage-window" data-toggle="modal" class="btn" role="button">
				<i class="fa fa-upload"></i>
				@T("Admin.Packaging.UploadTheme")
			</a>

			@Html.Widget("admin_button_toolbar_after")
        </div>
    </div>
	
	<div class="multi-store-scope well well-small">
		<table class="adminContent">
		<tr>
			<td class="adminTitle">
				@Html.SmartLabelFor(model => model.StoreId)
			</td>
			<td class="adminData">
				@Html.DropDownList("StoreId", Model.AvailableStores, new { onchange = "location.href = '" + @Url.Action("List") + "?storeId=' + this.value;" })
			</td>
		</tr>
		</table>
	</div>
    
    @Html.SmartStore().TabStrip().Name("themes-tab").Items(x =>
	{
		x.Add().Text(T("Admin.Configuration.Themes")).Content(ThemesTab()).Selected(true);
		x.Add().Text(T("Admin.Common.Settings")).Content(ThemeSettingsTab());
	})
}

@helper ThemesTab()
{
	if (Model.DesktopThemes.Count > 0)
	{
        @ThemeList(Model.DesktopThemes, T("Admin.Configuration.Themes.AvailableDesktopThemes"), false)
	}

	if (Model.MobileThemes.Count > 0)
	{
        @ThemeList(Model.MobileThemes, T("Admin.Configuration.Themes.AvailableMobileThemes"), true)
	}
    
    <script>
		$(function () {

			$('#theme-list').find(".equalized-column").equalizeColumns({ /*deep: true,*/ responsive: true });

            $("#themes-tab").on("click", ".set-as-defaulttheme", function (e) {
                var el = $(this);
                var name = el.data("name");
                var mobile = toBool(el.data("mobile"));

                var hidden;

                if (mobile) {
                    hidden = $('#@Html.FieldIdFor(x => x.DefaultMobileTheme)');
                }
                else {
                    hidden = $('#@Html.FieldIdFor(x => x.DefaultDesktopTheme)');
                }

                hidden.val(name);

                el.closest("form").submit();

                return false;
            });
        });
    </script>
}

@helper ThemeList(IList<ThemeManifestModel> themes, string caption, bool mobile)
{
	<fieldset class="">
		<legend style="border: none">@caption</legend>

		<ul id="theme-list" class="unstyled clearfix">
			@foreach (var theme in themes)
			{
				var isActive = theme.IsActive;
				var isBroken = theme.State != ThemeManifestState.Active;
				
				<li class="theme-item equalized-column@(isActive ? " active" : "")@(isBroken ? " broken" : "")" data-equalized-deep="true" @Html.Attr("title", theme.Description.EmptyNull(), theme.Description.HasValue())>
					<div class="theme-thumbnail-wrapper">
						<div class="theme-thumbnail" style="background-image: url('@Url.Content(theme.PreviewImageUrl)')"></div>
					</div>

					<div class="theme-data">
						<h4 data-equalized-part="title">
							@(theme.Title ?? theme.Name)
							@if (theme.BaseTheme.HasValue())
							{
								<small title='@T("Admin.Configuration.Themes.IsBasedOn"): @theme.BaseTheme'>
									<i class="fa fa-@(isBroken ? "chain-broken" : "chain") fa-flip-horizontal"></i>
									@theme.BaseTheme
								</small>
							}
						</h4>
						<div data-equalized-part="data" class="theme-info">
							@if (theme.Author.HasValue())
							{
								<span>@T("Admin.Configuration.Themes.Author"): </span><span class="muted">@theme.Author, </span>
							}
							<span>@T("Admin.Configuration.Themes.Version"): </span><span class="muted">@theme.Version</span>
						</div>
						<div class="theme-buttons clearfix">
							@if (!theme.IsActive)
							{
								<a href="#" class="btn btn-primary set-as-defaulttheme@(isBroken ? " invisible" : "")" data-mobile="@theme.IsMobileTheme" data-name="@theme.Name">
									@T("Admin.Common.Activate")
								</a>
							}
							else
							{
								<a href="#" class="btn disabled">
									<i class="fa fa-check"></i>
									@T("Common.Active")
								</a>
							}
							
							@if (!isBroken)
							{	
								<div class="btn-group pull-right">
									@if (!theme.IsMobileTheme)
									{
										<a href='@Url.Action("Preview", "Theme", new { theme = theme.Name, storeId = Model.StoreId })' class="btn tooltip-toggle" title="@T("Admin.Configuration.Themes.Preview")">
											<i class="fa fa-fw fa-eye"></i>
										</a>
									}
									@if (theme.IsConfigurable)
									{
										<a href='@Url.Action("Configure", "Theme", new { theme = theme.Name, storeId = Model.StoreId })' class="btn tooltip-toggle" title="@T("Admin.Common.Configure")">
											<i class="fa fa-fw fa-paint-brush"></i>
										</a>
									}
								</div>									
							}

						</div>
					</div>

					@if (isBroken)
					{
						<div class="theme-broken-badge" title='@T("Admin.Configuration.Themes.MissingBaseTheme", theme.BaseTheme).Text'>
							<i class="fa fa-exclamation"></i>
						</div>
					}
				</li>
			}
		</ul>

	</fieldset>
}

@helper ThemeSettingsTab()
{
	<script>
		$(function () {
			$("#@Html.FieldIdFor(model => model.AllowCustomerToSelectTheme)").on('click', toggleThemeChooser);
			toggleThemeChooser();
		});

		function toggleThemeChooser() {
			if ($('#@Html.FieldIdFor(model => model.AllowCustomerToSelectTheme)').is(':checked')) {
				$('#pnlSaveThemeChoiceInCookie').show();
			}
			else {
				$('#pnlSaveThemeChoiceInCookie').hide();
			}
		}
	</script>

    @Html.HiddenFor(x => x.DefaultDesktopTheme)
    @Html.HiddenFor(x => x.DefaultMobileTheme)
    
    @Html.ValidationSummary(false)
    <table class="adminContent">
		<tr>
			<td class="adminTitle">
				@Html.SmartLabelFor(model => model.AllowCustomerToSelectTheme)
			</td>
			<td class="adminData">
				@Html.EditorFor(model => model.AllowCustomerToSelectTheme)
				@Html.ValidationMessageFor(model => model.AllowCustomerToSelectTheme)
			</td>
		</tr>
		<tr id="pnlSaveThemeChoiceInCookie">
			<td class="adminTitle">
				@Html.SmartLabelFor(model => model.SaveThemeChoiceInCookie)
			</td>
			<td class="adminData">
				@Html.EditorFor(model => model.SaveThemeChoiceInCookie)
				@Html.ValidationMessageFor(model => model.SaveThemeChoiceInCookie)
			</td>
		</tr>
        <tr>
            <td class="adminTitle">
                @Html.SmartLabelFor(model => model.MobileDevicesSupported)
            </td>
            <td class="adminData">
                @Html.EditorFor(model => model.MobileDevicesSupported)
                @Html.ValidationMessageFor(model => model.MobileDevicesSupported)
            </td>
        </tr>
        <tr>
            <td colspan="2" class="adminSeparator">
                <hr />
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <div class="alert alert-info fade in">
                    <button class="close" data-dismiss="alert">x</button>
                    <h4>@T("Admin.Configuration.Themes.Options.Title")</h4>
                    <p>@T("Admin.Configuration.Themes.Options.Info")</p>
                </div>
            </td>
        </tr>
        <tr>
            <td class="adminTitle">
                @Html.SmartLabelFor(model => model.BundleOptimizationEnabled)
            </td>
            <td class="adminData">
                @Html.DropDownListFor(model => model.BundleOptimizationEnabled, Model.AvailableBundleOptimizationValues)
                @Html.ValidationMessageFor(model => model.BundleOptimizationEnabled)
            </td>
        </tr>
    </table> 
}

@Html.Action("UploadPackage", "Packaging", new { isTheme = true })