<!--
Controller: ABListingCtrl
Required vars: mailingABList
-->

<span crm-ui-order="{var: 'myOrder', defaults: ['-created_date']}"></span>

<div crm-ui-accordion="{title: ts('Filter'), collapsed: true}">
  <form name="filterForm">
    <span>
      <input class="big crm-form-text" ng-model="filter.name" placeholder="{{:: ts('Name') }}"/>
    </span>
    <span>
      <select crm-ui-select style="width: 10em;" ng-model="filter.status">
        <option value="">{{:: ts('- Status -') }}</option>
        <option ng-repeat="o in fields.status.options" value="{{o.key}}">{{o.value}}</option>
      </select>
    </span>
    <span>
      <select crm-ui-select style="width: 20em;" ng-model="filter.testing_criteria">
        <option value="">{{:: ts('- Test Type -') }}</option>
        <option ng-repeat="o in fields.testing_criteria.options" value="{{o.key}}">{{o.value}}</option>
      </select>
    </span>
  </form>
</div>

<div ng-show="mailingABList.length">
  <table class="display">
    <thead>
    <tr>
      <th><a crm-ui-order-by="[myOrder, 'name']">{{:: ts('Name') }}</a></th>
      <th><a crm-ui-order-by="[myOrder, 'status']">{{:: ts('Status') }}</a></th>
      <th><a crm-ui-order-by="[myOrder, 'testing_criteria']">{{:: ts('Test Type') }}</a></th>
      <th><a crm-ui-order-by="[myOrder, 'created_date']">{{:: ts('Created') }}</a></th>
      <th></th>
    </tr>
    </thead>
    <tbody>
    <tr ng-repeat="mailingAB in mailingABList | filter:filter | orderBy:myOrder.get()">
      <td>{{mailingAB.name}}</td>
      <td>{{crmMailingABStatus.getByName(mailingAB.status).label}}</td>
      <td>{{crmMailingABCriteria.get(mailingAB.testing_criteria).label}}</td>
      <td>{{mailingAB.created_date}}</td>
      <td>
        <a class="action-item crm-hover-button" ng-href="#/abtest/{{mailingAB.id}}" ng-show="mailingAB.status == 'Draft'">{{:: ts('Continue') }}</a>
        <a class="action-item crm-hover-button" ng-href="#/abtest/{{mailingAB.id}}" ng-show="mailingAB.status != 'Draft'">{{:: ts('Results') }}</a>
      </td>
    </tr>
    </tbody>
  </table>
</div>

<div ng-show="mailingABList.length === 0" class="messages status no-popup">
  <i class="crm-i fa-info-circle" aria-hidden="true"></i>
  {{:: ts('You have no A/B mailings') }}
</div>


<div class="crm-submit-buttons">
  <br>
  <a ng-href="#/abtest/new" class="button"><span><i class="crm-i fa-flask" aria-hidden="true"></i> {{:: ts('New A/B Test') }}</span></a>
</div>
