<div id="outer" class="outer-wrapper" ng-controller="TeiidPrefsController as vm">

    <!-- page content -->
    <div class="prefs-page-help-control">
        <page-help-control
            help-id="teiid-preferences"
            container-id="outer" />
    </div>

    <div id="teiid-pref-progress-bar" ng-show="vm.loading">
        <uib-progressbar class="progress-striped active" value="dynamic" type="info"></uib-progressbar>
    </div>

    <p ng-show="! vm.loading && vm.error" translate="teiid-preferences.StatusErrorLabel">
        <br/>'{{vm.error}}'
    </p>

    <div ng-show="! vm.loading">

        <form class="form-horizontal">

            <div id="teiid-pref-administration" class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title" translate="teiid-preferences.Administration" />
                </div>

                <div class="panel-body">
                    <div class="control-group row">
                        <div class="col-sm-2">
                            <label class="help-label teiid-pref-help">
                                <span class="fa fa-info-circle" uib-tooltip="{{:: 'teiid-preferences.help.adminUserName' | translate}}"
                                      tooltip-class="custom-tooltip" tooltip-append-to-body="true"></span>
                            </label>
                            <label class="control-label pull-right" for="adminUser" translate="shared.UserNameLabel"></label>
                        </div>
                        <div class="controls col-sm-9">
                            <input type="text" id="teiid-pref-adminUser" class="form-control" ng-model="vm.teiid.adminUser"
                                placeholder="{{:: 'teiid-preferences.adminUserNamePlaceholder' | translate}}"
                                required>
                        </div>
                    </div>

                    <div class="control-group row">
                        <div class="col-sm-2">
                            <label class="help-label teiid-pref-help">
                                <span class="fa fa-info-circle" uib-tooltip="{{:: 'teiid-preferences.help.adminPassword' | translate}}"
                                      tooltip-class="custom-tooltip" tooltip-append-to-body="true"></span>
                            </label>
                            <label class="control-label pull-right" for="adminPasswd" translate="shared.PasswordLabel"></label>
                        </div>
                        <div class="controls col-sm-9">
                            <input type="password" id="teiid-pref-adminPasswd" class="form-control" ng-model="vm.teiid.adminPasswd"
                                placeholder="{{:: 'teiid-preferences.adminPasswordPlaceholder' | translate}}"
                                required>
                        </div>
                    </div>

                    <div class="teiid-pref-test-button row">
                        <div class=col-sm-2></div>
                        <button class="btn btn-default col-sm-2" ng-click="vm.submitCredentials()" ng-disabled="!(vm.needsUpdate()===true)"
                            translate="teiid-preferences.UpdateBtn">
                        </button>
                        <button class="btn btn-default col-sm-2" ng-click="vm.ping('admin')"
                            translate="teiid-preferences.TestAdminConnection">
                        </button>
                        <div class="col-sm-12">
                            <span ng-class="vm.pingAdminResultStyleClass" style="font-size:1.75em"></span>
                            <span class="teiid-pref-pingResult">{{vm.adminPingResult}}</span>
                        </div>
                    </div>
                </div>
            </div>

            <div id="teiid-pref-jdbc" class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        JDBC
                    </h3>
                </div>

                <div class="panel-body">
                    <div class="control-group row">
                        <div class="col-sm-2">
                            <label class="help-label teiid-pref-help">
                                <span class="fa fa-info-circle" uib-tooltip="{{:: 'teiid-preferences.help.jdbcUserName' | translate}}"
                                      tooltip-class="custom-tooltip" tooltip-append-to-body="true"></span>
                            </label>
                            <label class="control-label pull-right" for="jdbcUser" translate="shared.UserNameLabel"></label>
                        </div>
                        <div class="controls col-sm-9">
                            <input type="text" id="teiid-pref-jdbcUser" class="form-control" ng-model="vm.teiid.jdbcUser"
                                placeholder="{{:: 'teiid-preferences.jdbcUserNamePlaceholder' | translate}}"
                                required>
                        </div>
                    </div>

                    <div class="control-group row">
                        <div class="col-sm-2">
                            <label class="help-label teiid-pref-help">
                                <span class="fa fa-info-circle" uib-tooltip="{{:: 'teiid-preferences.help.jdbcPassword' | translate}}"
                                      tooltip-class="custom-tooltip" tooltip-append-to-body="true"></span>
                            </label>
                            <label class="control-label pull-right" for="jdbcPasswd" translate="shared.PasswordLabel"></label>
                        </div>
                        <div class="controls col-sm-9">
                            <input type="password" id="teiid-pref-jdbcPasswd" class="form-control" ng-model="vm.teiid.jdbcPasswd"
                                placeholder="{{:: 'teiid-preferences.jdbcPasswordPlaceholder' | translate}}"
                                required>
                        </div>
                    </div>

                    <div class="control-group row">
                        <div class="col-sm-2">
                            <label class="help-label teiid-pref-help">
                                <span class="fa fa-info-circle" uib-tooltip="{{:: 'teiid-preferences.help.jdbcSecure' | translate}}"
                                      tooltip-class="custom-tooltip" tooltip-append-to-body="true"></span>
                            </label>
                            <label class="control-label pull-right" for="jdbcSecure" translate="teiid-preferences.jdbcSecureLabel"></label>
                        </div>
                        <div class="controls col-sm-9">
                            <input type="checkbox" id="teiid-pref-jdbcSecure" class="form-control"
                                ng-model="vm.teiid.jdbcSecure">
                        </div>
                    </div>

                    <div class="teiid-pref-test-button row">
                        <div class=col-sm-2></div>
                        <button class="btn btn-default col-sm-2" ng-click="vm.submitCredentials()" ng-disabled="!(vm.needsUpdate()===true)"
                            translate="teiid-preferences.UpdateBtn">
                        </button>
                        <button class="btn btn-default col-sm-2" ng-click="vm.ping('jdbc')"
                            translate="teiid-preferences.TestJdbcConnection">
                        </button>
                        <div class="col-sm-12">
                            <span ng-class="vm.pingJdbcResultStyleClass" style="font-size:1.75em"></span>
                            <span class="teiid-pref-pingResult">{{vm.jdbcPingResult}}</span>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
