<div class="modal-header">
    <button type="button" class="close closebtn" data-ng-click="cancel()" aria-hidden="true">&times;</button>
    <h1 class="modal-title">{{'Image slider' | translate}}</h1>
</div>
<div class="modal-body">
    <form>
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-12">
                    <!-- Template -->
                    <div class="form-group">
                        <label class="control-label">{{'Template' | translate}}</label>
                        <wizdom365-template-picker template-url="data.templateUrl" directory-path="ImageSlider/Templates/ViewTemplates"></wizdom365-template-picker>
                    </div>
                    <div class="row">
                        <div class="form-group col-sm-9">
                            <label for="webUrl" class="control-label">{{'Site of picture library' | translate}}</label>
                            <input class="form-control" id="webUrl" type="text" ng-model="data.webUrl" ng-disabled="true" />
                            <p class="wt-fieldInfo">{{"Choose the site of your picture library" | translate}}</p>
                        </div>
                        <div class="form-group col-sm-3">
                            <label class="control-label">&nbsp;</label>
                            <div class="imageSliderSiteUrlActions">
                                <button class="form-control btn btn-default" ng-click="chooseSpSite('webUrl');">{{'Browse...' | translate}}</button>
                            </div>
                        </div>
                    </div>
                    <!-- Folder url -->
                    <div class="row">
                        <div class="form-group col-sm-6">
                            <label for="folderUrl" class="control-label">{{'Picture library' | translate}}</label>
                            <input class="form-control" id="folderUrl" type="text" ng-disabled="pictureLibraryInputDisabled" ng-model="data.folderUrl" />
                            <p class="wt-fieldInfo">{{"Choose your picture library" | translate}}</p>
                        </div>
                        <div class="form-group col-sm-6">
                            <label class="control-label">&nbsp;</label>
                            <div class="imageSliderFolderUrlActions">
                                <button class="form-control btn btn-default" type="button" ng-click="enablePictureLibraryInput()" ng-attr-title="{{'Click to manually edit relative URL' | translate}}" ng-disabled="!pictureLibraryInputDisabled">
                                    {{'Edit' | translate}}
                                </button>
                                <button class="form-control btn btn-default" ng-click="chooseSpSite('folderUrl');">{{'Browse...' | translate}}</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
			<div class="row">
				<div class="col-sm-12">
					<div class="form-group">
						<label for="orderBy" class="control-label">{{"Sort by" | translate}}</label>
						<select class="form-control" ng-model="data.orderBy">
							<option value="">{{"Select" | translate}}</option>
							<option ng-repeat="fieldName in fieldNames track by $index">{{fieldName}}</option>
						</select>
					</div>
				</div>
			</div>
            <div class="row">
                <div class="col-sm-12">
                    <div class="form-group">
                        <label for="rowLimit" class="control-label">{{"Max number of images" | translate}}</label>
                        <input type="number" id="rowLimit" class="form-control" ng-model="data.rowLimit" />
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12">
                    <div class="form-group">
                        <label for="imgHeight" class="control-label">{{"Image height" | translate}}</label>
                        <input class="form-control" type="text" id="imgHeight" ng-model="data.imgHeight" />
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-sm-12">
                    <div class="advancedSettingsExpander" ng-click="isAdvancedSettingsOpen = !isAdvancedSettingsOpen">
                        <span class="advancedSettingsExpanderArrow"><i class="ms-Icon" ng-class="isAdvancedSettingsOpen == true ? 'ms-Icon--ChevronDownMed' : 'ms-Icon--ChevronRightMed'"></i></span>
                        <span class="advancedSettingsExpanderText">{{'Advanced' | translate}}</span>
                    </div>
                    <div class="advancedSettingsDeviderLine" ng-show="isAdvancedSettingsOpen"></div>
                </div>
            </div>
            <!-- Advanced settings start -->
            <div class="advancedSettings" ng-show="isAdvancedSettingsOpen" id="advancedSettings">
				
                <div class="row">
                    <div class="col-sm-12">
                        <div class="form-group">
                            <label for="imgWidth" class="control-label">{{"Image width" | translate}}</label>
                            <input class="form-control" type="text" id="imgWidth" ng-model="data.imgWidth" />
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-12">
                        <div class="form-group">
                            <label class="control-label">{{'Rotation speed' | translate}}</label>
                            <input type="number" class="form-control" ng-model="data.speed" />
                            <p class="wt-fieldInfo">
                                {{'Write rotation speed in milliseconds (1s=1000ms)' | translate}}<br />
                                {{'Default rotation speed is 10000 milliseconds' | translate}}
                            </p>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-12">
                        <div class="form-group">
                            <label for="linkField" class="control-label">{{'Column for image links' | translate}}</label>
                            <!--<input class="form-control" id="linkField" type="text" ng-model="data.linkField" />-->
                            <select class="form-control" ng-model="data.linkField">
                                <option value="">{{"Select" | translate}}</option>
                                <option ng-repeat="fieldName in fieldNames track by $index">{{fieldName}}</option>
                            </select>
                            <p class="wt-fieldInfo">
                                {{'Name of the column in the image library where you insert links for the images' | translate}}
                            </p>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-12">
                        <p>
                            <a href="#">{{'Info' | translate}}</a>
                            <br />
                            {{"Image Slider Note" | translate}}
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
<div class="modal-footer bootstrap-wrapper">
    <button class="btn btn-success wiz-btn-padding" ng-click="updateConfig();">{{"Ok" | translate}}</button>
    <button class="btn btn-default wiz-btn-padding" ng-disabled="loading" ng-click="cancel();">{{"Cancel" | translate}}</button>
</div>