<div ng-controller="Admin.SecurityCalendarCredentialsConfigurationController">
    <panel-view header="{{'admin.security.calendarCredentialsConfiguration.title' | translate}}" collapsible="false">
        <div class="row">
            <div class="col-lg-4">
                <label translate>
                    admin.security.calendarCredentialsConfiguration.accountConfigForm.account
                </label>
            </div>
            <div class="col-lg-4">
                <label translate>
                    admin.security.calendarCredentialsConfiguration.accountConfigForm.password
                </label>
            </div>
        </div>
        <ng-form name="calendarCredentialsConfigurationForm_{{$index}}" ng-repeat="invalidCreator in invalidOutlookFolderCreators">
            <fieldset>
                <div class="row">
                    <div class="col-lg-4">
                        <input class="form-control" type="text" value="{{invalidCreator.systemEmailAddress}}"
                                ng-model="invalidCreator.systemEmailAddress"
                                ng-disabled="validateInProgress[$index] || saveInProgress[$index]" required>
                        <span class="text-danger" ng-if="validOutlookFolderCreatorCredentials[$index] === 'ERROR'">
                            <i class="fa fa-times"></i>
                            <span translate>
                                admin.security.calendarCredentialsConfiguration.message.credentials.error
                            </span>
                        </span>
                        <span class="text-danger" ng-if="validOutlookFolderCreatorCredentials[$index] === 'NOT_VALID'">
                            <i class="fa fa-times"></i>
                            <span translate>
                                admin.security.calendarCredentialsConfiguration.message.credentials.invalid
                            </span>
                        </span>
                        <span class="text-success" ng-if="validOutlookFolderCreatorCredentials[$index] === 'VALID'">
                            <i class="fa fa-check"></i>
                            <span translate>
                                admin.security.calendarCredentialsConfiguration.message.credentials.valid
                            </span>
                        </span>
                    </div>
                    <div class="col-lg-4">
                        <input class="form-control" type="password" value="{{invalidCreator.systemPassword}}"
                                ng-model="invalidCreator.systemPassword" ng-disabled="validateInProgress[$index] || saveInProgress[$index]"
                                placeholder="{{'admin.security.calendarCredentialsConfiguration.accountConfigForm.password.placeholder' | translate}}"
                                required>
                    </div>
                    <div class="col-lg-4">
                        <button class="btn btn-sm btn-primary" ng-click="validateOutlookFolderCreator(invalidCreator, $index)"
                                ng-disabled="calendarCredentialsConfigurationForm_{{$index}}.$invalid || validateInProgress[$index] || saveInProgress[$index]">
                        <span translate>
                            admin.security.calendarCredentialsConfiguration.accountConfigForm.validate.button
                        </span>
                        </button>
                        <button class="btn btn-sm btn-primary" ng-click="saveOutlookFolderCreator(invalidCreator, $index)"
                                ng-disabled="calendarCredentialsConfigurationForm_{{$index}}.$invalid || validateInProgress[$index] || saveInProgress[$index]">
                        <span translate>
                            admin.security.calendarCredentialsConfiguration.accountConfigForm.save.button
                        </span>
                        </button>
                    </div>
                </div>
            </fieldset>
        </ng-form>
    </panel-view>
</div>