<div class="card" ng-if="vm.smss.length > 0 || vm.isAdmin">
  <div class="card-header separator">
    <div class="card-title">{{ 'SMS' | translate }}</div>
  </div>

  <ul class="list-group">
    <li
      class="list-group-item d-flex collapsible"
      ng-class="{ expanded: sms.isOpen }"
      ng-repeat="sms in vm.smss"
      ng-click="sms.isOpen = !sms.isOpen"
    >
      <div class="list-item-actions">
        <button type="button" title="{{ 'Expand' | translate }}" class="collapse-btn">
          <i c8y-icon="chevron-down"></i>
        </button>
      </div>

      <div class="list-item-icon">
        <i c8y-icon="envelope-o"></i>
      </div>

      <div class="list-item-body">
        <div class="row">
          <div class="col-sm-3">
            <label class="small" translate>SMS ID</label>
            <br class="visible-sm" />
            <span ng-bind="sms.smsId"></span>
          </div>
          <div class="col-sm-4">
            <label class="small" translate>Date sent</label>
            <br class="visible-sm" />
            <span>{{ sms.dateSent | absoluteDate }}</span>
          </div>
          <div class="col-sm-4">
            <label class="small" translate>Date received</label>
            <br class="visible-sm" />
            <span>{{ sms.dateReceived | absoluteDate }}</span>
          </div>
          <div class="col-sm-1 text-right">
            <div class="text-left visible-xs">
              <label class="small" translate>Status</label>
              {{ sms.status | translate }}
              <i
                ng-if="sms.status === 'Delivered' || sms.status === 'Received'"
                class="text-success"
                c8y-icon="check"
              ></i>
              <i ng-if="sms.status === 'Pending'" class="text-info" c8y-icon="ellipsis-h"></i>
              <i
                ng-if="sms.status === 'Failed'"
                class="text-danger"
                c8y-icon="exclamation-circle"
              ></i>
            </div>
            <div class="hidden-xs">
              <i
                ng-if="sms.status === 'Delivered' || sms.status === 'Received'"
                class="text-success"
                c8y-icon="check"
                uib-tooltip="{{ sms.status | translate }}"
                tooltip-popup-delay="500"
                tooltip-append-to-body="true"
              ></i>
              <i
                ng-if="sms.status === 'Pending'"
                class="text-info"
                c8y-icon="ellipsis-h"
                uib-tooltip="{{ sms.status | translate }}"
                tooltip-popup-delay="500"
                tooltip-append-to-body="true"
              ></i>
              <i
                ng-if="sms.status === 'Failed'"
                class="text-danger"
                c8y-icon="exclamation-circle"
                uib-tooltip="{{ sms.status | translate }}"
                tooltip-popup-delay="500"
                tooltip-append-to-body="true"
              ></i>
            </div>
          </div>
        </div>
      </div>

      <div uib-collapse="!sms.isOpen">
        <div class="d-flex">
          <div class="list-item-icon"></div>
          <div class="list-item-body">
            <div class="row m-t-8 m-b-8">
              <span style="width: 35px" class="visible-xs pull-left"></span>
              <div class="col-sm-4">
                <label class="small" translate>Sent from</label>
                <small ng-bind="sms.from"></small>
                <br />
                <label class="small" translate>Sent to</label>
                <small ng-bind="sms.to"></small>
                <br />
                <label class="small" translate>Message type</label>
                <small ng-bind="sms.type"></small>
              </div>
              <div class="col-sm-8">
                <label class="small" translate>Message text</label>
                <p>{{ sms.text }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </li>
  </ul>

  <div class="card-block">
    <div class="legend form-block" translate>Send SMS</div>
    <form name="forms.messageForm" ng-if="vm.isAdmin">
      <div
        class="form-group"
        ng-class="{ 'has-error': invalid('mText') }"
        uib-tooltip="{{ vm.validationHints(forms.messageForm.mText) }}"
        tooltip-popup-delay="500"
        tooltip-append-to-body="true"
      >
        <label title="{{ 'SMS content' | translate }}">
          <textarea
            aria-label="{{ 'SMS content' | translate }}"
            required
            ng-model="vm.message.text"
            name="mText"
            class="form-control form-group"
            rows="3"
          ></textarea>
        </label>
      </div>

      <div class="form-group">
        <button
          class="btn btn-primary"
          type="submit"
          title="{{ 'Send' | translate }}"
          ng-disabled="forms.messageForm.$invalid"
          ng-click="vm.sendSms(vm.message)"
        >
          {{ 'Send' | translate }}
        </button>
      </div>
    </form>
  </div>
</div>
