<div class="group-imap-email-settings">
  <form class="groups-form form-horizontal groups-form-imap">
    <div>
      <div class="control-group">
        <label for="imap_server">{{i18n
            "groups.manage.email.credentials.imap_server"
          }}</label>
        <Input
          @type="text"
          name="imap_server"
          @value={{this.form.imap_server}}
          tabindex="8"
          {{on "change" (action "resetSettingsValid")}}
        />
      </div>

      <label for="enable_ssl_imap">
        <Input
          @type="checkbox"
          @checked={{this.form.imap_ssl}}
          id="enable_ssl_imap"
          tabindex="11"
          {{on "change" (action "resetSettingsValid")}}
        />
        {{i18n "groups.manage.email.credentials.imap_ssl"}}
      </label>
    </div>

    <div>
      <div class="control-group">
        <label for="imap_port">{{i18n
            "groups.manage.email.credentials.imap_port"
          }}</label>
        <Input
          @type="text"
          name="imap_port"
          @value={{this.form.imap_port}}
          tabindex="9"
          {{on "change" (action "resetSettingsValid" this.form.imap_port)}}
        />
      </div>
    </div>

    <div>
      <div class="control-group group-imap-mailboxes">
        {{#if this.mailboxes}}
          <label for="imap_mailbox_name">{{i18n
              "groups.manage.email.mailboxes.synchronized"
            }}</label>
          <ComboBox
            @name="imap_mailbox_name"
            @id="imap_mailbox"
            @value={{this.group.imap_mailbox_name}}
            @valueProperty="value"
            @content={{this.mailboxes}}
            @tabindex="10"
            @onChange={{action (mut this.group.imap_mailbox_name)}}
            @options={{hash none="groups.manage.email.mailboxes.disabled"}}
          />
        {{/if}}
      </div>

    </div>
  </form>

  <div class="control-group">
    <div class="group-imap-prefill-options">
      {{i18n "groups.manage.email.prefill.title"}}
      <a
        id="prefill_imap_gmail"
        href
        {{on "click" (fn this.prefillSettings "gmail")}}
      >{{i18n "groups.manage.email.prefill.gmail"}}</a>
    </div>
  </div>

  {{#unless this.mailboxSelected}}
    <div class="alert alert-error imap-no-mailbox-selected">
      {{i18n "groups.manage.email.imap_mailbox_not_selected"}}
    </div>
  {{/unless}}

  <div class="control-group buttons">
    <DButton
      @disabled={{or this.missingSettings this.testingSettings}}
      @class="btn-primary test-imap-settings"
      @action={{action "testImapSettings"}}
      @icon="cog"
      @label="groups.manage.email.test_settings"
      @tabindex="12"
      @title="groups.manage.email.settings_required"
    />

    <ConditionalLoadingSpinner
      @size="small"
      @condition={{this.testingSettings}}
    />

    {{#if this.imapSettingsValid}}
      <span class="imap-settings-ok">
        {{d-icon "check-circle"}}
        {{i18n "groups.manage.email.imap_settings_valid"}}
      </span>
    {{/if}}
  </div>

  {{#if this.group.imap_updated_at}}
    <div class="group-email-last-updated-details for-imap">
      <small>
        {{i18n "groups.manage.email.last_updated"}}
        <strong>{{format-date
            this.group.imap_updated_at
            leaveAgo="true"
          }}</strong>
        {{i18n "groups.manage.email.last_updated_by"}}
        <LinkTo
          @route="user"
          @model={{this.group.imap_updated_by.username}}
        >{{this.group.imap_updated_by.username}}</LinkTo>
      </small>
    </div>
  {{/if}}
</div>