@using Telerik.Sitefinity.Frontend.Mvc.Helpers;
@using Telerik.Sitefinity.Mvc;

@Html.QueryBuilderScriptReferences()

<server-data default-provider-name='@Html.DefaultProviderName(Telerik.Sitefinity.Modules.Libraries.LibrariesManager.GetManager())'>
</server-data>

<div class="alert alert-danger ng-hide" ng-show="errors.missingSelectedItems">@Html.Resource("MissingLibraries")</div>
<uib-tabset class="nav-tabs-wrapper">
    <uib-tab heading="@Html.Resource("Content")">
        <label>@Html.Resource("ItemsToDisplay")</label>

        <div class="form-group">
            <div class="row">
                <div class="col-xs-6">
                    <sf-provider-selector class="m-bottom-sm" sf-manager-type='Telerik.Sitefinity.Modules.Libraries.LibrariesManager'
                                          sf-provider-label='@Html.Resource("Provider")'
                                          ng-model="properties.ProviderName.PropertyValue">
                    </sf-provider-selector>
                </div>
            </div>
        </div>

        <div class="form-group">
            <div class="radio">
                <label for="allPublished" class="full-width">
                    <input id="allPublished" type="radio" ng-model="properties.ParentFilterMode.PropertyValue" value="All" />

                    @Html.Resource("AllLibraries")
                </label>
            </div>
            <div class="radio">
                <label for="selectedLibrariesOnly" class="full-width">
                    <input id="selectedLibrariesOnly" type="radio" ng-model="properties.ParentFilterMode.PropertyValue" value="Selected" />

                    @Html.Resource("FromSelectedLibraries")

                    <sf-list-selector sf-library-selector ng-show="properties.ParentFilterMode.PropertyValue=='Selected'" sf-master="true"
                                      sf-media-type="documents"
                                      sf-multiselect="true"
                                      sf-provider="properties.ProviderName.PropertyValue"
                                      sf-selected-ids="parentSelector.selectedItemsIds"
                                      sf-missing-selected-items="errors.missingSelectedItems"></sf-list-selector>
                </label>
            </div>
            <div class="radio form-inline">
                <label for="currentlyOpenLibrary">
                    <input id="currentlyOpenLibrary" type="radio" ng-model="properties.ParentFilterMode.PropertyValue" value="CurrentlyOpen" />

                    @Html.Resource("FromCurrentlyOpen")
                </label>
            </div>
            <div class="radio">
                <label for="selectedDocumentsOnly">
                    <input id="selectedDocumentsOnly" type="radio" ng-model="properties.ParentFilterMode.PropertyValue" value="NotApplicable" />

                    @Html.Resource("formAllDocuments", "Resources")
                </label>
            </div>
        </div>

        <div expander class="Options-arrows" expander-title='@Html.Resource("NarrowSelection")' start-expanded="{{properties.SelectionMode.PropertyValue=='FilteredItems'}}">
            <div class="radio">
                <label for="allItemsExpander" class="full-width">
                    <input id="allItemsExpander" type="radio" ng-model="properties.SelectionMode.PropertyValue" value="AllItems" />
                    @Html.Resource("AllPublishedDocuments")
                </label>
            </div>
            <div class="radio">
                <label for="filterItems" class="full-width">
                    <input id="filterItems" type="radio" ng-model="properties.SelectionMode.PropertyValue" value="FilteredItems" />
                    @Html.Resource("SelectionOfDocuments")
                    <sf-filter-selector sf-query-data="additionalFilters.value"
                                        sf-taxonomy-fields="@CustomFieldsHelpers.GetTaxonomyFields(typeof(Telerik.Sitefinity.Libraries.Model.Document))"
                                        sf-provider="properties.ProviderName.PropertyValue"
                                        ng-show="properties.SelectionMode.PropertyValue=='FilteredItems'" sf-date-groups="dateFilters.value"
                                        class="sf-filter-selector"></sf-filter-selector>
                </label>
            </div>
        </div>
    </uib-tab>

    <uib-tab heading='@Html.Resource("SelectFromAllDocuments", "Resources")' ng-show="properties.ParentFilterMode.PropertyValue=='NotApplicable'">
        <sf-document-selector sf-multiselect sf-deselectable
                              sf-provider="properties.ProviderName.PropertyValue"
                              sf-selected-items="selectedDocumentItemsSelector.selectedDocumentItemsIds"
                              sf-model="selectedDocumentItemsSelector.selectedDocumentItems"></sf-document-selector>
    </uib-tab>

    <uib-tab heading="@Html.Resource("ListSettings")">
        <div class="form-group">
            <div class="radio">
                <label for="usePaging">
                    <input id="usePaging" type="radio" ng-model="properties.DisplayMode.PropertyValue" value="Paging" />

                    <strong>@Html.Resource("UsePaging")</strong><br />

                    <span>
                        @Html.Raw(Html.Resource("DivideToItemPerPage")).ToString()
                        <input type='text' style='width: 40px' ng-disabled='properties.DisplayMode.PropertyValue!="Paging"' ng-model='properties.ItemsPerPage.PropertyValue' />
                    </span>
                </label>
            </div>
            <div class="radio">
                <label for="useLimit">
                    <input id="useLimit" type="radio" ng-model="properties.DisplayMode.PropertyValue" value="Limit" />

                    <strong>@Html.Resource("UseLimit")</strong><br />

                    <span>
                        @Html.Raw(Html.Resource("ShowLimitedItems")).ToString()
                        <input type='text' style='width: 40px' ng-disabled='properties.DisplayMode.PropertyValue!="Limit"' ng-model='properties.LimitCount.PropertyValue' />
                    </span>
                </label>
            </div>
            <div class="radio">
                <label for="allItems">
                    <input id="allItems" type="radio" ng-model="properties.DisplayMode.PropertyValue" value="All" />

                    <strong>@Html.Resource("NoLimitPaging")</strong><br />

                    <span>@Html.Resource("ShowAllItems")</span>
                </label>
            </div>
        </div>

        <div class="form-group">
            <div class="row">
                <div class="col-xs-6">
                    <label for="sortOptions">@Html.Resource("SortItems")</label>


                    <select id="sortOptions" ng-model="selectedSortOption" class="form-control" ng-change="updateSortOption(selectedSortOption)">
                        <option value="PublicationDate DESC"> @Html.Resource("LastPublished")</option>
                        <option value="LastModified DESC"> @Html.Resource("LastModified")</option>
                        <option value="Title ASC"> @Html.Resource("ByTitleAZ")</option>
                        <option value="Title DESC"> @Html.Resource("ByTitleZA")</option>
                        <option value="Custom"> @Html.Resource("AsSetInAdvancedMode")</option>
                    </select>
                </div>
            </div>
        </div>

        <div class="form-group">
            <label for="listTemplateName">@Html.Resource("ListTemplate")</label>

            <div class="row">
                <div class="col-xs-6">
                    <select id="listTemplateName" ng-model="properties.ListTemplateName.PropertyValue" class="form-control">
                        @foreach (var viewName in Html.GetViewNames(((Telerik.Sitefinity.Mvc.Proxy.MvcProxyBase)Model).GetController(), @"List\.(?<viewName>[\w\s]*)$"))
                        {
                            <option value="@viewName"> @viewName.SplitCamelCase()</option>
                        }
                    </select>
                </div>
            </div>
        </div>

        <expander expander-title='@Html.Resource("MoreOptions")'>
            <style-dropdown selected-class="properties.ListCssClass.PropertyValue" view-name="properties.ListTemplateName.PropertyValue"></style-dropdown>

            <div class="form-group">
                <label for="navCssClass">@Html.Resource("CssClasses")</label>
                <input type="text" id="navCssClass" ng-model="properties.ListCssClass.PropertyValue" class="form-control" />
            </div>
        </expander>
    </uib-tab>

    <uib-tab heading="@Html.Resource("SingleItemSettings")">
        <div class="form-group">
            <label>@Html.Resource("OpenSingleItem")</label>
            <div class="radio">
                <label for="samePage">
                    <input id="samePage" type="radio" ng-model="properties.OpenInSamePage.PropertyValue" value="True" />
                    <span>
                        @Html.Resource("ShowInSamePage")
                    </span>
                </label>
            </div>
            <div class="radio">
                <label for="existingPage">
                    <input id="existingPage" type="radio" ng-model="properties.OpenInSamePage.PropertyValue" value="False" />
                    @Html.Resource("ShowInExistingPage")
                </label>
                <div class="label-content">
                    <sf-list-selector sf-page-selector
                                      sf-selected-item-id="properties.DetailsPageId.PropertyValue"
                                      ng-hide="properties.OpenInSamePage.PropertyValue == 'True'"></sf-list-selector>
                </div>
            </div>
        </div>

        <div class="form-group m-top-md row">
            <div class="col-xs-6">
                <label for="detailTemplateName">@Html.Resource("DetailTemplate")</label>

                <select id="detailTemplateName" ng-model="properties.DetailTemplateName.PropertyValue" class="form-control">
                    @foreach (var viewName in Html.GetViewNames(((Telerik.Sitefinity.Mvc.Proxy.MvcProxyBase)Model).GetController(), @"Detail\.(?<viewName>[\w\s]*)$"))
                    {
                        <option value="@viewName"> @viewName.SplitCamelCase()</option>
                    }
                </select>
            </div>
        </div>

        <expander expander-title='@Html.Resource("MoreOptions")'>
            <style-dropdown selected-class="properties.DetailCssClass.PropertyValue" view-name="properties.DetailTemplateName.PropertyValue"></style-dropdown>

            <div class="form-group">
                <label for="cssClass">@Html.Resource("CssClasses")</label>
                <input type="text" id="cssClass" ng-model="properties.DetailCssClass.PropertyValue" class="form-control" />
            </div>
        </expander>
    </uib-tab>
</uib-tabset>