{{#if this.flashText}}
  <div id="modal-alert" role="alert" class="alert alert-{{this.flashClass}}">
    {{#if this.flashLink}}
      <div class="input-group invite-link">
        <label for="invite-link">{{html-safe this.flashText}}
          {{i18n "user.invited.invite.instructions"}}</label>
        <div class="link-share-container">
          <Input
            name="invite-link"
            class="invite-link"
            @value={{this.invite.link}}
            readonly={{true}}
          />
          <CopyButton
            @selector="input.invite-link"
            @copied={{action "copied"}}
          />
        </div>
      </div>
    {{else}}
      {{html-safe this.flashText}}
    {{/if}}
  </div>
{{/if}}

<DModalBody
  @title={{if
    this.editing
    "user.invited.invite.edit_title"
    "user.invited.invite.new_title"
  }}
>
  <form>
    {{#if this.editing}}
      <div class="input-group invite-link">
        <label for="invite-link">{{i18n
            "user.invited.invite.instructions"
          }}</label>
        <div class="link-share-container">
          <Input
            name="invite-link"
            class="invite-link"
            @value={{this.invite.link}}
            readonly={{true}}
          />
          <CopyButton
            @selector="input.invite-link"
            @copied={{action "copied"}}
          />
        </div>
      </div>
    {{/if}}

    <div class="input-group input-email">
      <label for="invite-email">
        {{d-icon "envelope"}}
        {{#if this.isEmail}}
          {{i18n "user.invited.invite.restrict_email"}}
        {{else if this.isDomain}}
          {{i18n "user.invited.invite.restrict_domain"}}
        {{else}}
          {{i18n "user.invited.invite.restrict"}}
        {{/if}}
      </label>
      <div class="invite-email-container">
        <Input
          id="invite-email"
          @value={{this.buffered.emailOrDomain}}
          placeholder={{i18n "user.invited.invite.email_or_domain_placeholder"}}
        />
        {{#if this.capabilities.hasContactPicker}}
          <DButton
            @icon="address-book"
            @action={{action "searchContact"}}
            @class="btn-primary open-contact-picker"
          />
        {{/if}}
      </div>
    </div>

    {{#if this.isLink}}
      <div class="input-group invite-max-redemptions">
        <label for="invite-max-redemptions">{{d-icon "users"}}{{i18n
            "user.invited.invite.max_redemptions_allowed"
          }}</label>
        <Input
          id="invite-max-redemptions"
          @type="number"
          @value={{this.buffered.max_redemptions_allowed}}
          min="1"
          max={{this.maxRedemptionsAllowedLimit}}
        />
      </div>
    {{/if}}

    {{#if this.isEmail}}
      <div class="input-group invite-custom-message">
        <label for="invite-message">{{i18n
            "user.invited.invite.custom_message"
          }}</label>
        <Textarea id="invite-message" @value={{this.buffered.custom_message}} />
      </div>
    {{/if}}

    {{#if this.canArriveAtTopic}}
      <div class="input-group invite-to-topic">
        <label for="invite-topic">{{d-icon "hand-point-right"}}{{i18n
            "user.invited.invite.invite_to_topic"
          }}</label>
        <TopicChooser
          @value={{this.buffered.topicId}}
          @content={{this.topics}}
          @onChange={{action "onChangeTopic"}}
          @options={{hash additionalFilters="status:public"}}
        />
      </div>
    {{else if this.buffered.topicTitle}}
      <div class="input-group invite-to-topic">
        <label for="invite-topic">{{d-icon "hand-point-right"}}{{i18n
            "user.invited.invite.invite_to_topic"
          }}</label>
        <Input
          name="invite-topic"
          class="invite-topic"
          @value={{this.buffered.topicTitle}}
          readonly={{true}}
        />
      </div>
    {{/if}}

    {{#if this.canInviteToGroup}}
      <div class="input-group invite-to-groups">
        <label>{{d-icon "users"}}{{i18n
            "user.invited.invite.add_to_groups"
          }}</label>
        <GroupChooser
          @content={{this.allGroups}}
          @value={{this.buffered.groupIds}}
          @labelProperty="name"
          @onChange={{action (mut this.buffered.groupIds)}}
        />
      </div>
    {{/if}}

    {{#if this.currentUser.staff}}
      <div class="input-group invite-expires-at">
        <FutureDateInput
          @displayLabelIcon="far-clock"
          @displayLabel={{i18n "user.invited.invite.expires_at"}}
          @customShortcuts={{this.timeShortcuts}}
          @clearable={{true}}
          @input={{this.buffered.expires_at}}
          @onChangeInput={{action (mut this.buffered.expires_at)}}
        />
      </div>
    {{else}}
      <div class="input-group input-expires-at">
        <label>{{d-icon "far-clock"}}{{this.expiresAtLabel}}</label>
      </div>
    {{/if}}
  </form>
</DModalBody>

<div class="modal-footer">
  <DButton
    @icon="link"
    @label="user.invited.invite.save_invite"
    @class="btn-primary save-invite"
    @action={{action "saveInvite"}}
  />

  <DButton
    @icon="envelope"
    @label={{if
      this.invite.emailed
      "user.invited.reinvite"
      "user.invited.invite.send_invite_email"
    }}
    @class="btn-primary send-invite"
    @action={{action "saveInvite" true}}
    @title={{unless
      this.isEmail
      "user.invited.invite.send_invite_email_instructions"
    }}
    @disabled={{not this.isEmail}}
  />
</div>