<div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="selfHosteEnvironmentTitle">
  <div class="modal-dialog" role="document">
    <form class="modal-content" (ngSubmit)="submit()">
      <div class="modal-body">
        <div class="box">
          <h1 class="box-header" id="selfHosteEnvironmentTitle">
            {{ "selfHostedEnvironment" | i18n }}
          </h1>
          <div class="box-content">
            <div class="box-content-row" appBoxRow>
              <label for="baseUrl">{{ "baseUrl" | i18n }}</label>
              <input
                id="baseUrl"
                type="text"
                name="BaseUrl"
                aria-describedby="baseUrlHelp"
                [(ngModel)]="baseUrl"
                placeholder="{{ 'ex' | i18n }} https://bitwarden.company.com"
                appInputVerbatim
              />
            </div>
          </div>
          <div id="baseUrlHelp" class="box-footer">
            {{ "selfHostedEnvironmentFooter" | i18n }}
          </div>
        </div>
        <div class="box">
          <h2 class="box-header">
            <button type="button" (click)="toggleCustom()" [attr.aria-expanded]="showCustom">
              <i
                class="bwi bwi-lg"
                aria-hidden="true"
                [ngClass]="{ 'bwi-angle-right': !showCustom, 'bwi-angle-down': showCustom }"
              ></i>
              {{ "customEnvironment" | i18n }}
            </button>
          </h2>
          <div
            role="group"
            attr.aria-label="{{ 'customEnvironment' | i18n }}"
            aria-describedby="customEnvironmentHelp"
            class="box-content"
            [hidden]="!showCustom"
          >
            <div class="box-content-row" appBoxRow>
              <label for="webVaultUrl">{{ "webVaultUrl" | i18n }}</label>
              <input
                id="webVaultUrl"
                type="text"
                name="WebVaultUrl"
                [(ngModel)]="webVaultUrl"
                appInputVerbatim
              />
            </div>
            <div class="box-content-row" appBoxRow>
              <label for="apiUrl">{{ "apiUrl" | i18n }}</label>
              <input id="apiUrl" type="text" name="ApiUrl" [(ngModel)]="apiUrl" appInputVerbatim />
            </div>
            <div class="box-content-row" appBoxRow>
              <label for="identityUrl">{{ "identityUrl" | i18n }}</label>
              <input
                id="identityUrl"
                type="text"
                name="IdentityUrl"
                [(ngModel)]="identityUrl"
                appInputVerbatim
              />
            </div>
            <div class="box-content-row" appBoxRow>
              <label for="notificationsUrl">{{ "notificationsUrl" | i18n }}</label>
              <input
                id="notificationsUrl"
                type="text"
                name="NotificationsUrl"
                [(ngModel)]="notificationsUrl"
                appInputVerbatim
              />
            </div>
            <div class="box-content-row" appBoxRow>
              <label for="iconsUrl">{{ "iconsUrl" | i18n }}</label>
              <input
                id="iconsUrl"
                type="text"
                name="IconsUrl"
                [(ngModel)]="iconsUrl"
                appInputVerbatim
              />
            </div>
          </div>
          <div id="customEnvironmentHelp" class="box-footer" [hidden]="!showCustom">
            {{ "customEnvironmentFooter" | i18n }}
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="submit" class="primary" appA11yTitle="{{ 'save' | i18n }}">
          <i class="bwi bwi-save-changes bwi-lg bwi-fw" aria-hidden="true"></i>
        </button>
        <button type="button" data-dismiss="modal">{{ "close" | i18n }}</button>
      </div>
    </form>
  </div>
</div>
