@using SmartStore.Web.Framework.UI;
@model LanguageModel

@Html.ValidationSummary(false)
@Html.HiddenFor(model => model.Id)
@Html.SmartStore().TabStrip().Name("language-edit").Style(TabsStyle.Tabs).Position(TabsPosition.Top).Items(x =>
{
	x.Add().Text(T("Admin.Common.Info").Text).Content(TabInfo()).Selected(true);
	x.Add().Text(T("Admin.Common.Stores").Text).Content(TabStores());

    //generate an event
	EngineContext.Current.Resolve<IEventPublisher>().Publish(new TabStripCreated(x, "language-edit", this.Html, this.Model));
})

@helper TabInfo()
{
<table id="LanguageEditTable" class="adminContent">
    <tr>
        <td class="adminTitle">
            @Html.SmartLabelFor(model => model.Name)
        </td>
        <td class="adminData">
            @Html.EditorFor(model => model.Name)
            @Html.ValidationMessageFor(model => model.Name)
        </td>
    </tr>
    <tr>
        <td class="adminTitle">
            @Html.SmartLabelFor(model => model.LanguageCulture)
        </td>
        <td class="adminData">
            @Html.DropDownListFor(x => x.LanguageCulture, Model.AvailableCultures)
            @Html.ValidationMessageFor(model => model.LanguageCulture)
        </td>
    </tr>
    <tr>
        <td class="adminTitle">
            @Html.SmartLabelFor(model => model.UniqueSeoCode)
        </td>
        <td class="adminData">
			@Html.DropDownListFor(x => x.UniqueSeoCode, Model.AvailableTwoLetterLanguageCodes)
            @Html.ValidationMessageFor(model => model.UniqueSeoCode)
        </td>
    </tr>
    <tr>
        <td class="adminTitle">
            @Html.SmartLabelFor(model => model.FlagImageFileName)
        </td>
        <td class="adminData">
			<select name="FlagImageFileName" data-placeholder="@T("Common.Unspecified")">
				<option></option>
				@foreach (var item in Model.AvailableFlags)
				{
					var select = item.Value.IsCaseInsensitiveEqual(Model.FlagImageFileName);
					<option value="@item.Value" @(select ? "selected='selected'" : "")>@item.Text</option>
				}
			</select>
            @Html.ValidationMessageFor(model => model.FlagImageFileName)
        </td>
    </tr>
    <tr>
        <td class="adminTitle">
            @Html.SmartLabelFor(model => model.Rtl)
        </td>
        <td class="adminData">
            @Html.EditorFor(model => model.Rtl)
            @Html.ValidationMessageFor(model => model.Rtl)
        </td>
    </tr>
    <tr>
        <td class="adminTitle">
            @Html.SmartLabelFor(model => model.Published)
        </td>
        <td class="adminData">
            @Html.EditorFor(model => model.Published)
            @Html.ValidationMessageFor(model => model.Published)
        </td>
    </tr>
    <tr>
        <td class="adminTitle">
            @Html.SmartLabelFor(model => model.DisplayOrder)
        </td>
        <td class="adminData">
            @Html.EditorFor(model => model.DisplayOrder)
            @Html.ValidationMessageFor(model => model.DisplayOrder)
        </td>
    </tr>
</table>
}

@helper TabStores()
{
    <script type="text/javascript">
    	$(document).ready(function () {

    		$("#@Html.FieldIdFor(model => model.LimitedToStores)").click(toggleStoreMapping);

    	    toggleStoreMapping();

    		// init flags select
    	    $('#LanguageEditTable').find('select[name=FlagImageFileName]').select2({
    	    	allowClear: true,
    	    	minimumResultsForSearch: 16,
    	    	formatResult: flagSelectItemFormatting,
    	    	formatSelection: flagSelectItemFormatting
    	    });

    	    function flagSelectItemFormatting(item) {
    	    	var flagUrl = '@Url.Content("~/Content/Images/flags/")';

    	    	try {
    	    		if (item.text.length > 0) {
    	    			var option = $(item.element),
    	    				html = '<div class="select2-image-item">';

    	    			// item.element is undefined for selection formatting
    	    			if (option.length === 0) {
    	    				option = $('select[name="FlagImageFileName"]').find('option[value="' + item.id + '"]');
    	    			}

    	    			if (option.length !== 0) {
    	    				html += '<div class="icon-container"><img alt="" src="' + flagUrl + option.val() + '" /></div>';
    	    			}

    	    			html += '<span>' + item.text + '</span></div>';

    	    			return html;
    	    		}
    	    	}
    	    	catch (e) { }

    	    	return item.text;
    	    }
        });


        function toggleStoreMapping() {
        	if ($('#@Html.FieldIdFor(model => model.LimitedToStores)').is(':checked')) {
        		$('#pnl-available-stores').show();
        	}
        	else {
        		$('#pnl-available-stores').hide();
        	}
        }
    </script>

    <table class="adminContent">
        <tr>
            <td class="adminTitle">
                @Html.SmartLabelFor(model => model.LimitedToStores)
            </td>
            <td class="adminData">
                @Html.EditorFor(model => model.LimitedToStores)
                @Html.ValidationMessageFor(model => model.LimitedToStores)
            </td>
        </tr>
        <tr id="pnl-available-stores">
            <td class="adminTitle">
                @Html.SmartLabelFor(model => model.AvailableStores)
            </td>
            <td class="adminData">
                @if (Model.AvailableStores != null && Model.AvailableStores.Count > 0)
                {
                    foreach (var store in Model.AvailableStores)
                    {
					<label class="checkbox">
						<input type="checkbox" name="SelectedStoreIds" value="@store.Id" checked="@(Model.SelectedStoreIds != null && Model.SelectedStoreIds.Contains(store.Id))" />
						<span>@store.Name</span>
					</label>						
                    }
                }
                else
                {
                    <div>@T("Admin.Configuration.Stores.NoStoresDefined")</div>
                }</td>
        </tr>
    </table>
}