{{#modal-dialog action=(action 'closeModal')}}
  <article class="card">
    <div class="text-content">
      <div class="content-header">
        <h4>
          {{i18n 'Send Email to Subscribers'}}
        </h4>
      </div>

      {{#if hasSentEmailToSubscribersSuccessfully}}
        <div class="item">
          <p>
            {{i18n 'Your email has been sent!'}}
          </p>
        </div>

        <div class="buttons">
          <button type="button" class="button" {{action 'closeModal'}}>
            {{t 'general.forms.close'}}
          </button>
        </div>
      {{else}}
        <div class="item">
          <p>
            {{styled-i18n 'Use this form to send a message to all %{subscriberCount} of your active subscribers.' 
              (hash subscriberCount=(commatized subscriberCount))
            }}
          </p>
        </div>

        <div class="item">
          <label for="email-message-title">
            <span class="required">{{i18n 'Message Title'}}</span>
          </label>

          {{input
            type='text'
            class='text'
            id='email-message-title'
            value=emailTitle
            required=true
            autofocus=true
            disabled=isSendingEmailToSubscribers}}
        </div>

        <div class="item">
          <label for="email-message-body">
            <span class="required">{{i18n 'Message Body'}}</span>
          </label>

          {{textarea
            class='text'
            id='email-message-body'
            value=emailBody
            required=true
            disabled=isSendingEmailToSubscribers}}
        </div>

        {{#if hasAttemptedClosingModalWithoutSending}}
          <div class="item">
            <p class="inline-warning">
              {{i18n 'You have an unsent draft. Closing this form will discard your changes.'}}
            </p>
          </div>
        {{else if hasSendingEmailToSubscribersErrored}}
          <div class="item">
            <p class="inline-warning">
              {{i18n 'Oops, something went wrong. Please try again.'}}
            </p>
          </div>
        {{/if}}

        <div class="buttons">
          <button type="button"
            class="button button--text"
            {{action 'closeModal'}}
            disabled={{isSendingEmailToSubscribers}}>

            {{t 'general.forms.cancel'}}
          </button>

          <button type="button"
            class="button {{if (or isSendingEmailToSubscribers isSendingEmailToSubscribersDisabled) 'button--disabled'}}"
            {{action 'sendEmailToSubscribers'}}
            disabled={{or isSendingEmailToSubscribers isSendingEmailToSubscribersDisabled}}>

            {{~#if isSendingEmailToSubscribers~}}
              {{i18n 'Sending Email...'}}
            {{~else~}}
              {{i18n "Send Email"}}
            {{~/if~}}
          </button>
        </div>
      {{/if}}
    </div>
  </article>
{{/modal-dialog}}
