{{#if showHeader}}
  <div class="header">
    <h1>
      {{t "serverUrl.header.label" appName=settings.appName}}
    </h1>
    <p class="help-text">
      {{t "serverUrl.header.detail" appName=settings.appName}}
    </p>
  </div>
{{/if}}
<form class="horizontal-form container-fluid text-left" {{action "saveServerUrl" on="submit"}}>
  {{#unless popupMode}}
    <label for="server-url" class="acc-label">
      {{t "generic.url"}}
    </label>
  {{/unless}}
  <div class="input-group">
    <span class="input-group-addon bg-default">
      <label>{{scheme}}</label>
    </span>

    {{input-url
      classNames="form-control"
      id="server-url"
      isInvalid=(action (mut urlInvalid))
      urlWarning=(action (mut urlWarning))
      urlError=(action (mut urlError))
      value=serverUrl
    }}
  </div>
  <div>
    {{#if urlInvalid}}
      {{#each urlError as |error|}}
        <div class="banner bg-{{error.type}} mt-30">
          <div class="banner-icon">
            <i class="icon icon-info"></i>
          </div>
          <div class="banner-message">
            <p>
              {{t
                error.msg
                activeValue=serverUrl
                htmlSafe=true
              }}
            </p>
          </div>
        </div>
      {{/each}}
    {{/if}}
  </div>
  <div>
    {{#each urlWarning as |warning|}}
      <div class="banner bg-{{warning.type}} mt-30">
        <div class="banner-icon">
          <i class="icon icon-info"></i>
        </div>
        <div class="banner-message">
          <p>
            {{t
              warning.msg
              activeValue=serverUrl
              htmlSafe=true
            }}
          </p>
        </div>
      </div>
    {{/each}}
  </div>
  {{top-errors
    errors=errors
  }}
  {{save-cancel
    cancelDisabled=(not popupMode)
    editLabel="serverUrl.button.save"
    editing=true
    cancel=(action "cancel")
    save=(action "saveServerUrl")
    saveDisabled=(or urlInvalid (not serverUrl null))
  }}
</form>