<div class="config-setup-tool-element">
  <div class="cor-loader" ng-if="!config"></div>
  <div ng-show="config && config['SUPER_USERS']">
    <form id="configform" name="configform">

    <!-- Basic Configuration -->
    <div class="co-panel">
      <div class="co-panel-heading">
        <i class="fa fa-gears"></i> Basic Configuration
      </div>
      <div class="co-panel-body">
        <table class="config-table">
          <tr>
            <td>Enterprise Logo URL:</td>
            <td>
              <span class="config-string-field" binding="config.ENTERPRISE_LOGO_URL"
                    placeholder="http://example.com/logo.png"></span>
              <div class="help-text">
                Enter the full URL to your company's logo.
              </div>
            </td>
            <td>
              <img class="registry-logo-preview" ng-src="{{ config.ENTERPRISE_LOGO_URL }}">
            </td>
          </tr>
          <tr>
            <td class="non-input">Contact Information:</td>
            <td colspan="2">
              <span class="config-contacts-field" binding="config.CONTACT_INFO"></span>
              <div class="help-text" style="margin-top: 10px;">
                Information to show in the Contact Page. If none specified, CoreOS contact information
                is displayed.
              </div>
            </td>
          </tr>
          <tr>
            <td class="non-input">User Creation:</td>
            <td colspan="2">
              <div class="co-checkbox">
                <input id="ftuc" type="checkbox" ng-model="config.FEATURE_USER_CREATION">
                <label for="ftuc">Enable Open User Creation</label>
              </div>
              <div class="help-text">
                 If enabled, user accounts can be created by anyone.
                 Users can always be created in the users panel under this superuser view.
              </div>
            </td>
          </tr>
          <tr>
            <td class="non-input">Encrypted Client Password:</td>
            <td colspan="2">
              <div class="co-checkbox">
                <input id="ftet" type="checkbox" ng-model="config.FEATURE_REQUIRE_ENCRYPTED_BASIC_AUTH">
                <label for="ftet">Require Encrypted Client Passwords</label>
              </div>
              <div class="help-text">
                 If enabled, users will not be able to login from the Docker command
                 line with a non-encrypted password and must generate an encrypted
                 password to use.
              </div>
              <div class="help-text" ng-if="config.AUTHENTICATION_TYPE == 'LDAP'">
                This feature is <strong>highly recommended</strong> for setups with LDAP authentication, as Docker currently stores passwords in <strong>plaintext</strong> on user's machines.
              </div>
            </td>
          </tr>
        </table>
      </div>
    </div>

    <!-- Server Configuration -->
    <div class="co-panel">
      <div class="co-panel-heading">
        <i class="fa fa-cloud"></i> Server Configuration
      </div>
      <div class="co-panel-body">
        <table class="config-table">
          <tr>
            <td>Server Hostname:</td>
            <td>
              <span class="config-string-field" binding="config.SERVER_HOSTNAME"
                    placeholder="Hostname (and optional port if non-standard)"
                    pattern="{{ HOSTNAME_REGEX }}"></span>
              <div class="help-text">
                 The HTTP host (and optionally the port number if a non-standard HTTP/HTTPS port) of the location
                  where the registry will be accessible on the network
              </div>
            </td>
          </tr>
          <tr>
            <td>SSL:</td>
            <td>
              <div class="co-checkbox">
                <input id="enable-ssl" type="checkbox" ng-model="config.PREFERRED_URL_SCHEME"
                       ng-true-value="https" ng-false-value="http">
                <label for="enable-ssl">Enable SSL</label>
              </div>
              <div class="help-text" style="margin-bottom: 10px">
                 A valid SSL certificate and private key files are required to use this option.
              </div>

              <table class="config-table"  ng-if="config.PREFERRED_URL_SCHEME == 'https'">
                <tr>
                  <td class="non-input">Certificate:</td>
                  <td>
                    <span class="config-file-field" filename="ssl.cert"></span>
                    <div class="help-text">
                      The certificate must be in PEM format.
                    </div
                  </td>
                </tr>
                <tr>
                  <td class="non-input">Private key:</td>
                  <td>
                    <span class="config-file-field" filename="ssl.key"></span>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
        </table>

      </div>
    </div>

    <!-- Redis -->
    <div class="co-panel">
      <div class="co-panel-heading">
        <img src="/static/img/redis-small.png"> redis
      </div>
      <div class="co-panel-body">
        <div class="description">
            <p>A <a href="http://redis.io" target="_blank">redis</a> key-value store is required for real-time events and build logs.</p>
        </div>

        <table class="config-table">
          <tr>
            <td>Redis Hostname:</td>
            <td>
              <span class="config-string-field" binding="mapped.redis.host"
                    placeholder="The redis server hostname"
                    pattern="{{ HOSTNAME_REGEX }}"
                    validator="validateHostname(value)">></span>
            </td>
          </tr>
          <tr>
            <td>Redis port:</td>
            <td>
              <span class="config-numeric-field" binding="mapped.redis.port" default-value="6379"></span>
              <div class="help-text">
                Access to this port and hostname must be allowed from all hosts running
                the enterprise registry
              </div>
            </td>
          </tr>
          <tr>
            <td>Redis password:</td>
            <td>
              <input class="form-control" type="password" ng-model="mapped.redis.password"
                     placeholder="Optional password for connecting to redis">
            </td>
          </tr>
        </table>
      </div>
    </div> <!-- /Redis -->

    <!-- Registry Storage -->
    <div class="co-panel">
      <div class="co-panel-heading">
        <i class="fa fa-download"></i> Registry Storage
      </div>
      <div class="co-panel-body">
        <div class="description">
          <p>
            Registry images can be stored either locally or in a remote storage system.
            <strong>A remote storage system is required for high-avaliability systems.</strong>
          </p>

          <table class="config-table">
            <tr>
              <td class="non-input">Storage Engine:</td>
              <td>
                <select ng-model="config.DISTRIBUTED_STORAGE_CONFIG.local[0]">
                  <option value="LocalStorage">Locally mounted directory</option>
                  <option value="S3Storage">Amazon S3</option>
                  <option value="GoogleCloudStorage">Google Cloud Storage</option>
                  <option value="RadosGWStorage">Ceph Object Gateway (RADOS)</option>
                </select>
              </td>
            </tr>

            <!-- Fields -->
            <tr ng-repeat="field in STORAGE_CONFIG_FIELDS[config.DISTRIBUTED_STORAGE_CONFIG.local[0]]">
              <td>{{ field.title }}:</td>
              <td>
                <span class="config-string-field"
                      binding="config.DISTRIBUTED_STORAGE_CONFIG.local[1][field.name]"
                      placeholder="{{ field.placeholder }}"
                      ng-if="field.kind == 'text'"></span>
                <div class="co-checkbox" ng-if="field.kind == 'bool'">
                  <input id="dsc-{{ field.name }}" type="checkbox"
                         ng-model="config.DISTRIBUTED_STORAGE_CONFIG.local[1][field.name]">
                  <label for="dsc-{{ field.name }}">{{ field.placeholder }}</label>
                </div>
                <div class="help-text" ng-if="field.help_url">
                  See <a href="{{ field.help_url }}" target="_blank">Documentation</a> for more information
                </div>
              </td>
            </tr>
          </table>

        </div>
      </div>
    </div>

    <!-- E-mail -->
    <div class="co-panel">
      <div class="co-panel-heading">
        <i class="fa fa-envelope"></i> E-mail
      </div>
      <div class="co-panel-body">
        <div class="description">
          <p>Valid e-mail server configuration is required for notification e-mails and the ability of
          users to reset their passwords.</p>
        </div>

        <div class="co-checkbox">
          <input id="ftmail" type="checkbox" ng-model="config.FEATURE_MAILING">
          <label for="ftmail">Enable E-mails</label>
        </div>

        <table class="config-table" ng-if="config.FEATURE_MAILING">
          <tr>
            <td>SMTP Server:</td>
            <td>
              <span class="config-string-field" binding="config.MAIL_SERVER"
                    placeholder="SMTP server for sending e-mail"
                    pattern="{{ HOSTNAME_REGEX }}"
                    validator="validateHostname(value)">></span>
            </td>
          </tr>
          <tr>
            <td>SMTP Server Port:</td>
            <td>
              <span class="config-numeric-field" binding="config.MAIL_PORT"
                    default-value="587"></span>
            </td>
          </tr>
          <tr>
            <td>TLS:</td>
            <td>
              <div class="co-checkbox">
                <input id="mut" type="checkbox" ng-model="config.MAIL_USE_TLS">
                <label for="mut">Use TLS</label>
              </div>
            </td>
          </tr>
          <tr>
            <td>Mail Sender:</td>
            <td>
              <input class="form-control" type="email" ng-model="config.MAIL_DEFAULT_SENDER"
                     placeholder="E-mail address"></span>
              <div class="help-text">
                E-mail address from which all e-mails are sent. If not specified,
                <code>support@quay.io</code> will be used.
              </div>
            </td>
          </tr>
          <tr>
            <td>Authentication:</td>
            <td>
              <div class="co-checkbox">
                <input id="uma" type="checkbox" ng-model="config.MAIL_USE_AUTH">
                <label for="uma">Requires Authentication</label>
              </div>

              <table class="config-table" ng-if="config.MAIL_USE_AUTH">
                <tr>
                  <td>Username:</td>
                  <td>
                    <span class="config-string-field" binding="config.MAIL_USERNAME"
                          placeholder="Username for authentication"></span>
                  </td>
                </tr>
                <tr>
                  <td>Password:</td>
                  <td>
                    <input class="form-control" type="password"
                          ng-model="config.MAIL_PASSWORD"
                          placeholder="Password for authentication"></span>
                  </td>
                </tr>
              </table>
            </td>
          </tr>

        </table>
      </div>
    </div> <!-- /E-mail -->

    <!-- Authentication -->
    <div class="co-panel">
      <div class="co-panel-heading">
        <i class="fa fa-users"></i> Authentication
      </div>
      <div class="co-panel-body">
        <div class="description">
          <p>
            Authentication for the registry can be handled by either the registry itself or LDAP.
            External authentication providers (such as GitHub) can be used on top of this choice.
          </p>
        </div>

        <div class="alert alert-warning" ng-if="config.AUTHENTICATION_TYPE == 'LDAP' && !config.FEATURE_REQUIRE_ENCRYPTED_BASIC_AUTH">
          It is <strong>highly recommended</strong> to require encrypted client passwords. LDAP passwords used in the Docker client will be stored in <strong>plaintext</strong>!
          <a href="javascript:void(0)" ng-click="config.FEATURE_REQUIRE_ENCRYPTED_BASIC_AUTH = true">Enable this requirement now</a>.
        </div>

        <div class="alert alert-success" ng-if="config.AUTHENTICATION_TYPE == 'LDAP' && config.FEATURE_REQUIRE_ENCRYPTED_BASIC_AUTH">
          Note: The "Require Encrypted Client Passwords" feature is currently enabled which will
          prevent LDAP passwords from being saved as plaintext by the Docker client.
        </div>

        <table class="config-table">
          <tr>
            <td class="non-input">Authentication:</td>
            <td>
              <select ng-model="config.AUTHENTICATION_TYPE">
                <option value="Database">Local Database</option>
                <option value="LDAP">LDAP</option>
              </select>
            </td>
          </tr>
        </table>

        <table class="config-table" ng-if="config.AUTHENTICATION_TYPE == 'LDAP'">
          <tr>
            <td>LDAP URI:</td>
            <td>
              <span class="config-string-field" binding="config.LDAP_URI"
                    pattern="ldap(s)?://.+"></span>
              <div class="help-text">
              The full LDAP URI, including the ldap:// or ldaps:// prefix.
              </div>
            </td>
          </tr>
          <tr>
            <td>Administrator DN:</td>
            <td><span class="config-string-field" binding="config.LDAP_ADMIN_DN"></span></td>
          </tr>
          <tr>
            <td>Base DN:</td>
            <td><span class="config-list-field" item-title="DN" binding="config.LDAP_BASE_DN"></span></td>
          </tr>
          <tr>
            <td>Administrator Password:</td>
            <td><span class="config-string-field" binding="config.LDAP_ADMIN_PASSWD"></span></td>
          </tr>
          <tr>
            <td>E-mail Attribute:</td>
            <td><span class="config-string-field" binding="config.LDAP_EMAIL_ATTR"></span></td>
          </tr>
          <tr>
            <td>UID Attribute:</td>
            <td><span class="config-string-field" binding="config.LDAP_UID_ATTR"></span></td>
          </tr>
          <tr>
            <td>User RDN:</td>
            <td><span class="config-list-field" item-title="RDN" binding="config.LDAP_USER_RDN"></span></td>
          </tr>
        </table>
      </div>
    </div> <!-- /Authentication -->

    <!-- GitHub Authentication -->
    <div class="co-panel">
      <div class="co-panel-heading">
        <i class="fa fa-github"></i> GitHub (Enterprise) Authentication
      </div>
      <div class="co-panel-body">
        <div class="description">
          <p>
            If enabled, users can use GitHub or GitHub Enterprise to authenticate to the registry.
          </p>
          <p>
            <strong>Note:</strong> A registered GitHub (Enterprise) OAuth application is required.
            View instructions on how to
            <a href="https://coreos.com/docs/enterprise-registry/github-app/" target="_blank">
              Create an OAuth Application in GitHub
            </a>
          </p>
        </div>

        <div class="co-checkbox">
          <input id="ftghl" type="checkbox" ng-model="config.FEATURE_GITHUB_LOGIN">
          <label for="ftghl">Enable GitHub Authentication</label>
        </div>

        <table class="config-table" ng-if="config.FEATURE_GITHUB_LOGIN">
          <tr>
            <td>GitHub:</td>
            <td>
              <select ng-model="mapped.GITHUB_LOGIN_KIND">
                <option value="hosted">GitHub.com</option>
                <option value="enterprise">GitHub Enterprise</option>
              </select>
            </td>
          </tr>
          <tr ng-if="mapped.GITHUB_LOGIN_KIND == 'enterprise'">
            <td>GitHub Endpoint:</td>
            <td>
              <span class="config-string-field"
                    binding="config.GITHUB_LOGIN_CONFIG.GITHUB_ENDPOINT"
                    placeholder="https://my.githubserver"
                    pattern="{{ GITHOST_REGEX }}">
              </span>
              <div class="help-text">
                The GitHub Enterprise endpoint. Must start with http:// or https://.
              </div>
            </td>
          </tr>
          <tr>
            <td>OAuth Client ID:</td>
            <td>
              <span class="config-string-field" binding="config.GITHUB_LOGIN_CONFIG.CLIENT_ID">
              </span>
            </td>
          </tr>
          <tr>
            <td>OAuth Client Secret:</td>
            <td>
              <span class="config-string-field" binding="config.GITHUB_LOGIN_CONFIG.CLIENT_SECRET">
              </span>
            </td>
          </tr>
          <tr>
            <td>Organization Filtering:</td>
            <td>
              <div class="co-checkbox">
                <input id="ftghlof" type="checkbox"
                       ng-model="config.GITHUB_LOGIN_CONFIG.ORG_RESTRICT">
                <label for="ftghlof">Restrict By Organization Membership</label>
              </div>

              <div class="help-text" style="margin-bottom: 20px;">
                If enabled, only members of specified GitHub
                <span ng-if="mapped.GITHUB_LOGIN_KIND == 'enterprise'">Enterprise</span> organizations will be allowed to login via GitHub
                <span ng-if="mapped.GITHUB_LOGIN_KIND == 'enterprise'">Enterprise</span>.
              </div>

              <span class="config-list-field"
                    item-title="Organization ID"
                    binding="config.GITHUB_LOGIN_CONFIG.ALLOWED_ORGANIZATIONS"
                    ng-if="config.GITHUB_LOGIN_CONFIG.ORG_RESTRICT">
              </span>
            </td>
          </tr>
        </table>
      </div>
    </div> <!-- /GitHub Authentication -->

    <!-- Google Authentication -->
    <div class="co-panel">
      <div class="co-panel-heading">
        <i class="fa fa-google"></i> Google Authentication
      </div>
      <div class="co-panel-body">
        <div class="description">
          <p>
            If enabled, users can use Google to authenticate to the registry.
          </p>
          <p>
            <strong>Note:</strong> A registered Google OAuth application is required.
            Visit the
            <a href="https://console.developers.google.com" target="_blank">
              Google Developer Console
            </a>
            to register an application.
          </p>
        </div>

        <div class="co-checkbox">
          <input id="ftgoa" type="checkbox" ng-model="config.FEATURE_GOOGLE_LOGIN">
          <label for="ftgoa">Enable Google Authentication</label>
        </div>

        <table class="config-table" ng-if="config.FEATURE_GOOGLE_LOGIN">
          <tr>
            <td>OAuth Client ID:</td>
            <td>
              <span class="config-string-field" binding="config.GOOGLE_LOGIN_CONFIG.CLIENT_ID">
              </span>
            </td>
          </tr>
          <tr>
            <td>OAuth Client Secret:</td>
            <td>
              <span class="config-string-field" binding="config.GOOGLE_LOGIN_CONFIG.CLIENT_SECRET">
              </span>
            </td>
          </tr>
        </table>
      </div>
    </div> <!-- /Google Authentication -->

    <!-- Build Support -->
    <div class="co-panel">
      <div class="co-panel-heading">
        <i class="fa fa-tasks"></i> Dockerfile Build Support
      </div>
      <div class="co-panel-body">
        <div class="description">
           If enabled, users can submit Dockerfiles to be built and pushed by the Enterprise Registry.
        </div>

        <div class="co-checkbox">
          <input id="ftbs" type="checkbox" ng-model="config.FEATURE_BUILD_SUPPORT">
          <label for="ftbs">Enable Dockerfile Build</label>
        </div>

        <div ng-if="config.FEATURE_BUILD_SUPPORT" style="margin-top: 10px">
          <strong>Note: Build workers are required for this feature.</strong>
           See <a href="https://coreos.com/docs/enterprise-registry/build-support/" target="_blank">Adding Build Workers</a> for instructions on how to setup build workers.
        </div>
      </div>
    </div> <!-- /Build Support -->

    <!-- GitHub Trigger -->
    <div class="co-panel" ng-if="config.FEATURE_BUILD_SUPPORT" style="margin-top: 20px;">
      <div class="co-panel-heading">
        <i class="fa fa-github"></i> GitHub (Enterprise) Build Triggers
      </div>
      <div class="co-panel-body">
        <div class="description">
          <p>
            If enabled, users can setup GitHub or GitHub Enterprise triggers to invoke Registry builds.
          </p>
          <p>
            <strong>Note:</strong> A registered GitHub (Enterprise) OAuth application (<strong>separate from GitHub Authentication</strong>) is required.
            View instructions on how to
            <a href="https://coreos.com/docs/enterprise-registry/github-app/" target="_blank">
              Create an OAuth Application in GitHub
            </a>
          </p>
        </div>

        <div class="co-checkbox">
          <input id="ftgb" type="checkbox" ng-model="config.FEATURE_GITHUB_BUILD">
          <label for="ftgb">Enable GitHub Triggers</label>
        </div>

        <table class="config-table" ng-if="config.FEATURE_GITHUB_BUILD">
          <tr>
            <td>GitHub:</td>
            <td>
              <select ng-model="mapped.GITHUB_TRIGGER_KIND">
                <option value="hosted">GitHub.com</option>
                <option value="enterprise">GitHub Enterprise</option>
              </select>
            </td>
          </tr>
          <tr ng-if="mapped.GITHUB_TRIGGER_KIND == 'enterprise'">
            <td>GitHub Endpoint:</td>
            <td>
              <span class="config-string-field"
                    binding="config.GITHUB_TRIGGER_CONFIG.GITHUB_ENDPOINT"
                    placeholder="https://my.githubserver"
                    pattern="{{ GITHOST_REGEX }}">
              </span>
              <div class="help-text">
                The GitHub Enterprise endpoint. Must start with http:// or https://.
              </div>
            </td>
          </tr>
          <tr>
            <td>OAuth Client ID:</td>
            <td>
              <span class="config-string-field" binding="config.GITHUB_TRIGGER_CONFIG.CLIENT_ID">
              </span>
            </td>
          </tr>
          <tr>
            <td>OAuth Client Secret:</td>
            <td>
              <span class="config-string-field" binding="config.GITHUB_TRIGGER_CONFIG.CLIENT_SECRET">
              </span>
            </td>
          </tr>
        </table>
      </div>
    </div> <!-- /GitHub Trigger -->

    <!-- BitBucket Trigger -->
    <div class="co-panel" ng-if="config.FEATURE_BUILD_SUPPORT" style="margin-top: 20px;">
      <div class="co-panel-heading">
        <i class="fa fa-bitbucket"></i> BitBucket Build Triggers
      </div>
      <div class="co-panel-body">
        <div class="description">
          <p>
            If enabled, users can setup BitBucket triggers to invoke Registry builds.
          </p>
          <p>
            <strong>Note:</strong> A registered BitBucket OAuth application is required.
            View instructions on how to
            <a href="https://coreos.com/docs/enterprise-registry/bitbucket-app/" target="_blank">
              Create an OAuth Application in BitBucket
            </a>
          </p>
        </div>

        <div class="co-checkbox">
          <input id="ftbbb" type="checkbox" ng-model="config.FEATURE_BITBUCKET_BUILD">
          <label for="ftbbb">Enable BitBucket Triggers</label>
        </div>

        <table class="config-table" ng-if="config.FEATURE_BITBUCKET_BUILD">
          <tr>
            <td>OAuth Consumer Key:</td>
            <td>
              <span class="config-string-field" binding="config.BITBUCKET_TRIGGER_CONFIG.CONSUMER_KEY">
              </span>
            </td>
          </tr>
          <tr>
            <td>OAuth Consumer Secret:</td>
            <td>
              <span class="config-string-field" binding="config.BITBUCKET_TRIGGER_CONFIG.CONSUMER_SECRET">
              </span>
            </td>
          </tr>
        </table>
      </div>
    </div> <!-- /BitBucket Trigger -->

    <!-- GitLab Trigger -->
    <div class="co-panel" ng-if="config.FEATURE_BUILD_SUPPORT" style="margin-top: 20px;">
      <div class="co-panel-heading">
        <i class="fa fa-git-square"></i> GitLab Build Triggers
      </div>
      <div class="co-panel-body">
        <div class="description">
          <p>
            If enabled, users can setup GitLab triggers to invoke Registry builds.
          </p>
          <p>
            <strong>Note:</strong> A registered GitLab OAuth application is required.
            Visit the
            <a href="{{ config.GITLAB_TRIGGER_CONFIG.GITLAB_ENDPOINT || 'https://gitlab.com' }}/admin/applications" target="_blank">
              GitLab applications admin panel
            </a>
            to create a new application.
          </p>
          <p>The callback URL to use is:&nbsp;&nbsp;
              <code>{{ config.PREFERRED_URL_SCHEME || 'http' }}://{{ config.SERVER_HOSTNAME || 'localhost' }}/oauth2/gitlab/callback/trigger</code>
          </p>
        </div>

        <div class="co-checkbox">
          <input id="ftglb" type="checkbox" ng-model="config.FEATURE_GITLAB_BUILD">
          <label for="ftglb">Enable GitLab Triggers</label>
        </div>

        <table class="config-table" ng-if="config.FEATURE_GITLAB_BUILD">
          <tr>
            <td>GitLab:</td>
            <td>
              <select ng-model="mapped.GITLAB_TRIGGER_KIND">
                <option value="hosted">GitLab.com</option>
                <option value="enterprise">GitLab CE/EE</option>
              </select>
            </td>
          </tr>
          <tr ng-if="mapped.GITLAB_TRIGGER_KIND == 'enterprise'">
            <td>GitLab Endpoint:</td>
            <td>
              <span class="config-string-field"
                    binding="config.GITLAB_TRIGGER_CONFIG.GITLAB_ENDPOINT"
                    placeholder="https://my.gitlabserver"
                    pattern="{{ GITHOST_REGEX }}">
              </span>
              <div class="help-text">
                The GitLab Enterprise endpoint. Must start with http:// or https://.
              </div>
            </td>
          </tr>
          <tr>
            <td>OAuth Client ID:</td>
            <td>
              <span class="config-string-field" binding="config.GITLAB_TRIGGER_CONFIG.CLIENT_ID">
              </span>
            </td>
          </tr>
          <tr>
            <td>OAuth Client Secret:</td>
            <td>
              <span class="config-string-field" binding="config.GITLAB_TRIGGER_CONFIG.CLIENT_SECRET">
              </span>
            </td>
          </tr>
        </table>
      </div>
    </div> <!-- /GitLab Trigger -->

    </form>

    <!-- Save Bar -->
    <div class="cor-floating-bottom-bar">
      <button class="btn" ng-class="mapped.$hasChanges ? 'btn-primary' : 'btn-success'"
              ng-click="checkValidateAndSave()" ng-show="configform.$valid">
        <i class="fa fa-lg" ng-class="mapped.$hasChanges ? 'fa-dot-circle-o' : 'fa-check-circle'"></i>
        <span ng-if="mapped.$hasChanges">Save Configuration Changes</span>
        <span ng-if="!mapped.$hasChanges">Configuration Saved</span>
      </button>
      <button class="btn btn-warning" ng-click="checkValidateAndSave()" ng-show="!configform.$valid"
              ng-click="checkValidateAndSave()">
        <i class="fa fa-lg fa-sort"></i>
        {{ configform.$error['required'].length }} configuration field<span ng-show="configform.$error['required'].length != 1">s</span> remaining
      </button>
    </div>

    <!-- Modal message dialog -->
    <div class="modal co-dialog fade initial-setup-modal" id="validateAndSaveModal">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title">
              Checking your settings
            </h4>
          </div>
          <div class="modal-body">
            <div class="service-verification">
              <div class="service-verification-row" ng-repeat="serviceInfo in validating">
                <span class="quay-spinner" ng-show="serviceInfo.status == 'validating'"></span>
                <i class="fa fa-lg fa-check-circle" ng-show="serviceInfo.status == 'success'"></i>
                <i class="fa fa-lg fa-warning" ng-show="serviceInfo.status == 'error'"></i>
                <span class="service-title">{{ serviceInfo.service.title }}</span>

                <div class="service-verification-error" ng-show="serviceInfo.status == 'error'">{{ serviceInfo.errorMessage }}</div>
              </div>
            </div>
          </div>

          <!-- Footer: Saving configuration -->
          <div class="modal-footer working" ng-show="savingConfiguration">
            <span class="cor-loader-inline"></span> Saving Configuration...
          </div>

          <!-- Footer: Validating -->
          <div class="modal-footer working"
               ng-show="!savingConfiguration && validationStatus(validating) == 'validating'">
            <span class="cor-loader-inline"></span> Validating settings...

            <button class="btn btn-default" ng-click="cancelValidation()">
              Stop Validating
            </button>
          </div>

          <!-- Footer: Valid Config -->
          <div class="modal-footer"
               ng-show="!savingConfiguration && validationStatus(validating) == 'success'">
            <span class="left-align">
              <i class="fa fa-check"></i>
              Configuration Validated
            </span>

            <button class="btn btn-primary"
                    ng-click="saveConfiguration()"
                    ng-disabled="savingConfiguration">
                    <i class="fa fa-upload" style="margin-right: 10px;"></i>Save Configuration
            </button>
          </div>

          <!-- Footer: Invalid Config -->
          <div class="modal-footer"
               ng-show="!savingConfiguration && validationStatus(validating) == 'failed'">
            <span class="left-align">
              <i class="fa fa-warning"></i>
              Problem Detected
            </span>

            <button class="btn btn-default" data-dismiss="modal">
              Continue Editing
            </button>
          </div>

        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

  </div>
</div>