<div class="card">
  <div class="card-header separator">
    <div class="card-title" translate>Status</div>
  </div>

  <div class="card-block">
    <form name="forms.terminalForm">
      <div class="row">
        <div class="col-md-4 col-sm-3" ng-if="vm.supportedFunctionalities.IN_SESSION">
          <div class="form-group">
            <label class="small" translate>In session</label>
            <p ng-bind="vm.session.inSession | translate"></p>
          </div>
        </div>
        <div ng-if="vm.supportedFunctionalities.SESSION_START">
          <div class="col-md-4 col-sm-5">
            <div class="form-group">
              <label class="small" translate>Session start</label>
              <span ng-if="vm.session.inSession === 'Yes'">
                <p ng-bind="vm.session.sessionStartTime | absoluteDate"></p>
              </span>
              <p ng-if="vm.session.inSession !== 'Yes'">-</p>
            </div>
          </div>
          <div class="col-md-4 col-sm-4">
            <div class="form-group">
              <label class="small" translate>Session IP address</label>
              <span ng-if="vm.session.inSession === 'Yes'">
                <p ng-bind="vm.session.ipAddress"></p>
              </span>
              <p ng-if="vm.session.inSession !== 'Yes'">-</p>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <!--vm.session.iccid field is shared by ICCID and MSISDN we are changing only label-->
        <div class="col-md-4" ng-if="vm.supportedFunctionalities.ICCID">
          <div class="form-group">
            <label class="small" translate>ICCID</label>
            <p ng-bind="vm.session.iccid"></p>
          </div>
        </div>

        <!--TODO remove  MSISDN from supportedFunctionalities on BE -->
        <div
          class="col-md-4"
          ng-if="
            vm.supportedFunctionalities.MSISDN &&
            !vm.supportedFunctionalities.ICCID &&
            vm.provider !== 'ericsson'
          "
        >
          <div class="form-group">
            <label class="small" translate>MSISDN</label>
            <p ng-bind="vm.session.iccid"></p>
          </div>
        </div>

        <div class="col-md-4" ng-if="vm.supportedFunctionalities.SIM_STATUS_FIELD">
          <div class="form-group">
            <label for="simStatus" class="small" translate>SIM status</label>
            <div class="row">
              <div class="col-xs-9">
                <div class="c8y-select-wrapper">
                  <select
                    class="form-control"
                    id="simStatus"
                    ng-model="vm.currentStatus"
                    ng-disabled="!vm.isAdmin"
                    ng-change="vm.setSimStatus(vm.currentStatus)"
                  >
                    <option
                      ng-repeat="status in vm.statusMap.statuses"
                      ng-disabled="status.readOnly"
                      ng-bind="status.text | translate"
                      ng-selected="status.status === currentStatus"
                      value="{{ status.status }}"
                    ></option>
                  </select>
                  <span></span>
                </div>
              </div>
              <div class="col-xs-3">
                <i
                  c8y-icon="{{ vm.statusIcon }}"
                  ng-class="vm.statusClass"
                  class="l-h-input icon-20"
                ></i>
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-4" ng-if="vm.supportedFunctionalities.FIXED_IP">
          <div class="form-group">
            <label class="small" translate>Fixed IP address</label>
            <p ng-bind="vm.session.fixedIpAddress"></p>
          </div>
        </div>
      </div>

      <div class="row">
        <div class="col-md-4" ng-if="vm.shouldShowSmsUsage()">
          <div class="form-group">
            <label class="small" translate>SMS usage</label>
            <p>
              {{ vm.getSmsUsageValue() }}
              <button
                class="btn-help btn-help--sm"
                type="button"
                aria-label="{{ 'Help' | translate }}"
                uib-popover="{{ vm.getLastMonthSmsUsageTooltip() }}"
                popover-placement="right"
                popover-trigger="'focus'"
                popover-append-to-body="true"
              ></button>
            </p>
          </div>
        </div>
        <div class="col-md-4" ng-if="vm.shouldShowDataUsage()">
          <div class="form-inline">
            <label class="small" translate>Data usage (MB)</label>
            <p>
              {{ vm.getDataUsageValue() }}
              <button
                class="btn-help btn-help--sm"
                type="button"
                aria-label="{{ 'Help' | translate }}"
                uib-popover="{{ vm.getDataUsageTooltip() }}"
                popover-placement="right"
                popover-trigger="'focus'"
                popover-append-to-body="true"
              ></button>
            </p>
          </div>
        </div>
        <div class="col-md-4" ng-if="vm.shouldShowVoiceUsage()">
          <div class="form-group">
            <label class="small" translate>Voice usage (sec)</label>
            <p class="wide-linebreak-tooltip">
              {{ vm.getVoiceUsageValue() }}
              <button
                class="btn-help btn-help--sm"
                type="button"
                aria-label="{{ 'Help' | translate }}"
                uib-popover="{{ vm.getVoiceUsageTooltip() }}"
                popover-placement="right"
                popover-trigger="'focus'"
                popover-append-to-body="true"
              ></button>
            </p>
          </div>
        </div>
      </div>

      <div class="row">
        <div class="col-md-4" ng-if="vm.supportedFunctionalities.DISCONNECT_SIM_FROM_SESSION">
          <div class="form-group">
            <label class="small" translate>Disconnect from session</label>
            <p class="wide-linebreak-tooltip">
              <button
                class="btn btn-danger"
                type="button"
                aria-label="{{ 'Disconnects SIM card from the session.' | translate }}"
                uib-tooltip="{{ 'Disconnects SIM card from the session.' | translate }}"
                tooltip-popup-delay="500"
                tooltip-placement="right"
                tooltip-append-to-body="true"
                ng-click="vm.disconnectSimFromSession()"
                ng-disabled="vm.session.inSession !== 'Yes'"
              >
                {{ 'Disconnect' | translate }}
              </button>
            </p>
          </div>
        </div>
      </div>

      <div class="row" ng-if="vm.session.customFields">
        <div
          class="col-md-4"
          ng-if="vm.session.customFields.length > 0"
          ng-repeat="customField in vm.session.customFields"
        >
          <div class="form-group">
            <label class="small">{{ customField.name | translate }}</label>
            <p ng-bind="customField.value || '-'"></p>
          </div>
        </div>
      </div>
    </form>
  </div>
</div>
