<div id="bootstrap-theme" crm-dialog="crmSearchTask">
  <form name="crmSearchTaskMailingForm" ng-controller="crmSearchTaskMailing as $ctrl">
    <div class="alert alert-info">
      <p>{{:: ts('Compose and send a mass-mailing to the %1 selected contacts (you will be able to add or exclude additional groups of contacts in the next step).', {1: $ctrl.ids.length}) }}</p>
    </div>
    <label for="crm-search-task-mailing-name">{{:: ts('Mailing Name') }} <span class="crm-marker">*</span></label>
    <input required class="form-control" id="crm-search-task-mailing-name" ng-model="$ctrl.name">
    <br>
    <div ng-if="!$ctrl.run" class="alert" ng-class="{'alert-success': $ctrl.recipientCount === $ctrl.ids.length, 'alert-danger': $ctrl.recipientCount === 0, 'alert-warning': $ctrl.recipientCount !== 0 && $ctrl.recipientCount &lt; $ctrl.ids.length}">
      <div ng-if="!$ctrl.recipientCount && $ctrl.recipientCount !== 0">
        <i class="crm-i fa-spinner fa-spin"></i>
        {{:: ts('Checking recipients...') }}
      </div>
      <div ng-if="$ctrl.recipientCount === 0">
        <i class="crm-i fa-exclamation-triangle"></i>
        {{:: ts('None of the selected contacts are eligible to receive mailings (due to lack of email address or unsubscribe status).') }}
      </div>
      <div ng-if="$ctrl.recipientCount && $ctrl.recipientCount &lt; $ctrl.ids.length">
        <i class="crm-i fa-exclamation-triangle"></i>
        {{:: ts('%1 of the selected contacts cannot receive mailings (due to lack of email address or unsubscribe status).', {1: $ctrl.ids.length - $ctrl.recipientCount}) }}
      </div>
      <div ng-if="$ctrl.recipientCount === $ctrl.ids.length">
        <i class="crm-i fa-check-circle"></i>
        {{:: ts('All of the selected contacts have active email addresses.') }}
      </div>
    </div>
    <div ng-if="$ctrl.run && !$ctrl.addContacts" class="crm-search-task-progress">
      <h5>{{:: ts('Creating mailing...') }}</h5>
      <crm-search-batch-runner entity="'Group'" action="create" params="$ctrl.run" success="$ctrl.afterGroupCreate(result)" error="$ctrl.onError()" ></crm-search-batch-runner>
    </div>
    <div ng-if="$ctrl.addContacts" class="crm-search-task-progress">
      <h5>{{:: ts('Adding contacts...') }}</h5>
      <crm-search-batch-runner entity="'GroupContact'" action="save" params="$ctrl.addContacts" ids="$ctrl.ids" id-field="contact_id" success="$ctrl.onSuccess(result)" error="$ctrl.onError()" ></crm-search-batch-runner>
    </div>
    <crm-dialog-button text="ts('Cancel')" icons="{primary: 'fa-times'}" on-click="$ctrl.cancel()" disabled="$ctrl.run" />
    <crm-dialog-button text="ts('Create Mailing')" icons="{primary: 'fa-paper-plane'}" on-click="$ctrl.submit()" disabled="!$ctrl.recipientCount || $ctrl.run || !crmSearchTaskMailingForm.$valid" />
  </form>
</div>
