<div class="l-admin-content">
    <div ng-form="$ctrl.form" tooltip-position="left">
        <div class="admin-form">
            <span class="ui-title">{{::InitializationText.Title_Address}}</span>
            <label class="ui-field" tooltip="SettingsTooltips.ExternalUrl">
                <span class="ui-field-label">{{::InitializationText.Label_ExternalUrl}}</span>
                <input required type="url"
                       ng-model="$ctrl.externalUrl"
                       name="url"
                       class="ui-input-box ui-field-input" />
                <span title="{{::InitializationText.Error_InvalidUrl}}" class="ui-validation ui-indicator-medium ui-indicator-error"></span>
            </label>
        </div>

        <div class="admin-form" ng-form="$ctrl.databaseForm">
            <span class="admin-form-description">{{::InitializationText.Label_CreateNewDatabaseDescription}}</span>

            <sql-server-configuration ng-model="$ctrl.databaseConfig.ServerConfig"
                                      ng-change="$ctrl.onServerConfigChange()">
            </sql-server-configuration>

            <impersonation ng-form="$ctrl.impersonationForm"
                           ng-model="$ctrl.databaseConfig.ElevatedCredentials"
                           ng-model-options="{ updateOn: 'default blur', debounce: { default: 500 } }"
                           ng-change="$ctrl.onImpersonationConfigChange()"
                           impersonate-label="{{::InitializationText.Label_CreateWithImpersonation}}">
            </impersonation>
            <label class="ui-field" tooltip="InitializationTooltips.NewDatabase">
                <span class="ui-field-label">{{::InitializationText.Label_Database}}</span>
                <input type="text"
                       ng-model="$ctrl.databaseConfig.DatabaseName"
                       ng-model-options="{ updateOn: 'default blur', debounce: { default: 500 } }"
                       name="databaseName"
                       ng-change="$ctrl.onDatabaseChange()"
                       class="ui-input-box ui-field-input"/>

                <spinner-medium ng-if="$ctrl.databaseTestResult.isPending"></spinner-medium>
                <span ng-if="$ctrl.databaseValidation.Status == Zap.DataSources.Status.Pass" title="{{$ctrl.databaseValidation.Message}}" class="ui-indicator-medium ui-indicator-tick"></span>
                <span ng-if="$ctrl.databaseValidation.Status == Zap.DataSources.Status.Warning" title="{{$ctrl.databaseValidation.Message}}" class="ui-indicator-medium ui-indicator-warning"></span>
                <span ng-if="$ctrl.databaseValidation.Status == Zap.DataSources.Status.Fail" title="{{$ctrl.databaseValidation.Message}}" class="ui-indicator-medium ui-indicator-error"></span>
            </label>
        </div>

        <div class="admin-form">
            <div class="ui-title">{{::SettingsText.Label_Licensing_ProductKey}}</div>

            <label class="ui-radio" ng-if="$ctrl.isDefaultLicenseAvailable" tooltip="SettingsTooltips.DefaultLicense">
                <input type="radio" ng-model="$ctrl.licenseType" ng-value="{{::Zap.LicenseType.Default}}">
                <span class="ui-radio-label">{{::SettingsText.LicenseType_Default}}</span>
            </label>

            <label class="ui-radio" tooltip="SettingsTooltips.ProductKey">
                <input type="radio" ng-model="$ctrl.licenseType" ng-value="{{::Zap.LicenseType.Custom}}">
                <span class="ui-radio-label">{{::SettingsText.LicenseType_Custom}}</span>
            </label>

            <div class="ui-field ui-indented" tooltip="SettingsTooltips.ProductKey" ng-disabled="$ctrl.licenseType != Zap.LicenseType.Custom">
                <input type="text"
                       ng-model="$ctrl.clientGuid"
                       name="license"
                       ng-change="$ctrl.onLicenseChange()"
                       custom-validation="{ isLicensed: $ctrl.licenseType == Zap.LicenseType.Default || $ctrl.licenseInfo.value.IsLicensed }"
                       class="ui-input-box ui-field-input" />
                <spinner-medium ng-if="$ctrl.licenseInfo.isPending"></spinner-medium>
                <span ng-if="!$ctrl.licenseInfo.isPending && $ctrl.form.license.$dirty">
                    <span ng-if="$ctrl.licenseInfo.value.IsLicensed" class="ui-indicator-medium ui-indicator-tick"></span>
                    <span ng-if="$ctrl.licenseType == Zap.LicenseType.Custom && (!$ctrl.licenseInfo.value.Exists || !$ctrl.licenseInfo.value.IsLicensed)" title="{{$ctrl.licenseInfo.value.Error}}" class="ui-indicator-medium ui-indicator-error"></span>
                </span>
            </div>

            <span ng-click="$ctrl.toggleLicenseDetails()" ng-if="$ctrl.licenseInfo.value.Exists" class="ui-subtitle admin-license-details-header">{{::SettingsText.Label_LicenseDetails}}</span>
            <div class="ui-field admin-license-details" ng-if="$ctrl.showLicenseDetails">
                <table class="grid-view grid-view-autoWidth">
                    <thead>
                        <tr>
                            <th>{{::SettingsText.Label_LicenseRestrictionType}}</th>
                            <th>{{::SettingsText.Label_LicenseRestrictionDetails}}</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="restriction in $ctrl.licenseInfo.value.Restrictions">
                            <td>{{::restriction.RestrictionType}}</td>
                            <td title="{{::restriction.Tooltip}}" ng-bind-html="::restriction.Details"></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <authentication-config config="$ctrl.authConfig" license="$ctrl.licenseInfo.value" class="admin-form" login-redirect-uri="$ctrl.loginRedirectUri" post-logout-redirect-uri="$ctrl.postLogoutRedirectUri"></authentication-config>

        <div class="admin-form">
            <div class="ui-title">{{::CoreSettingsText.cApplicationMetrics}}</div>
            <label tooltip="SettingsTooltips.ReportProductUsage" class="ui-checkbox ui-text">
                <input type="checkbox" ng-model="$ctrl.reportProductUsage">
                <span>{{::CoreSettingsText.pReportProductUsage}}</span>
            </label>
        </div>

        <div class="admin-form buttonContainer">
            <spinner-medium ng-if="$ctrl.saving.isPending"></spinner-medium>
            <span ng-if="$ctrl.saving.value.Status == Zap.DataSources.Status.Pass" title="{{$ctrl.saving.value.Message}}" class="ui-indicator-medium ui-indicator-tick"></span>
            <span ng-if="$ctrl.saving.value.Status == Zap.DataSources.Status.Warning" title="{{$ctrl.saving.value.Message}}" class="ui-indicator-medium ui-indicator-warning"></span>
            <span ng-if="$ctrl.saving.value.Status == Zap.DataSources.Status.Fail" title="{{$ctrl.getErrorMessage($ctrl.saving.value.Message)}}" class="ui-indicator-medium ui-indicator-error"></span>
            <button ng-click="$ctrl.save()" ng-disabled="!$ctrl.canSave" class="button-raised button-primary">{{::InitializationText.Label_Create}}</button>
        </div>
    </div>
</div>
