<div ng-controller="trackerRegistrationCtrl">
  <div class="row">
    <div class="col-sm-6 col-sm-offset-3">
      <div class="alert alert-info" ng-show="temporaryRegistration && forms.trackerForm.$pristine">
        <p class="pull-right">
          <a
            title="{{ 'Cancel' | translate }}"
            href=""
            ng-click="cancelTempRegistration()"
            class="btn btn-xs btn-default"
            translate
          >
            Cancel
          </a>
          <a
            title="{{ 'Load' | translate }}"
            href=""
            ng-click="confirmTempRegistration()"
            class="btn btn-xs btn-default"
            translate
          >
            Load
          </a>
        </p>
        <span translate>
          You are about to load registration data saved on {{ temporaryRegistration.timestamp }}. Do you want to proceed?
        </span >
      </div>
    </div>
    <div class="clearfix"></div>
    <form name="forms.trackerForm" class="col-lg-6" novalidate>
      <h3>
        <i c8y-icon="plug"></i>
        {{ 'New tracker registration' | translate }}
      </h3>

      <div class="row">
        <div class="col-sm-6">
          <div class="form-group">
            <label class="control-label" translate>
              Select model
            </label>

            <div class="tracker-selection">
              <div class="radio" ng-repeat="trackerModel in trackerModels">
                <label
                  data-tracker-model="{{ trackerModel.name }}"
                  ng-style="{'background-image': 'url(' + trackerModel.image + ')'}"
                >
                  <input
                    type="radio"
                    name="modelRadio"
                    ng-model="registration.currentTrackerName"
                    ng-change="updateTrackerData()"
                    value="{{ trackerModel.name }}"
                  />
                  <span>
                    {{ trackerModel.displayName || trackerModel.name }}
                  </span>
                </label>
              </div>
            </div>
          </div>
        </div>

        <div class="col-sm-6">
          <div class="btn-group form-group" ng-show="isThereActionChoice()">
            <label class="control-label" translate>
              Action
            </label>
            <div class="row">
              <div class="col-lg-12" ng-repeat="actionButton in actionButtons">
                <div class="radio">
                  <label>
                    <input
                      type="radio"
                      name="actionRadio"
                      ng-value="actionButton.action"
                      ng-model="registration.action"
                      ng-click="setActionStatus()"
                    />
                    {{ actionButton.name }}
                  </label>
                </div>
              </div>
            </div>
          </div>

          <div class="form-group" ng-if="shouldDisplayField('userPhoneNumber')">
            <label class="control-label" translate>
              Your phone number
            </label>
            <div ng-class="{'has-error': invalid('userPhoneNumber')}">
              <input
                placeholder="{{ 'e.g. +49 9 876 543 210`LOCALIZE`' | translate }}"
                required
                name="userPhoneNumber"
                class="form-control"
                ng-model="registration.tracker.userPhoneNumber"
                ng-change="onRegistrationChange()"
                type="text"
                autocomplete="false"
                ng-pattern="/^(0{2}|\+)[0-9]{8,15}$/"
                tooltip="{{ validationHints(forms.trackerForm.userPhoneNumber) }}"
              />
            </div>
          </div>

          <div class="form-group" ng-if="shouldDisplayField('trackerPassword')">
            <label class="control-label" translate>
              Tracker password
            </label>
            <div>
              <input
                placeholder="{{ 'e.g. my_password' | translate }}"
                required
                name="trackerPassword"
                class="form-control"
                ng-model="registration.tracker.trackerPassword"
                ng-change="onRegistrationChange()"
                autocomplete="false"
                type="password"
              />
            </div>
          </div>

          <div class="form-group" ng-if="shouldDisplayField('trackerPhoneNumber')">
            <label class="control-label" translate>
              Tracker phone number
            </label>
            <div ng-class="{'has-error': invalid('trackerPhoneNumber')}">
              <input
                placeholder="{{ 'e.g. +49 9 876 543 210`LOCALIZE`' | translate }}"
                required
                name="trackerPhoneNumber"
                class="form-control"
                ng-model="registration.tracker.trackerPhoneNumber"
                ng-change="onRegistrationChange()"
                autocomplete="false"
                type="text"
                ng-pattern="/^(0{2}|\+)[0-9]{8,15}$/"
                tooltip="{{ validationHints(forms.trackerForm.trackerPhoneNumber) }}"
              />
            </div>
          </div>

          <div class="form-group" ng-if="shouldDisplayField('trackerIMEI')">
            <label class="control-label" translate>
              Tracker IMEI
            </label>
            <div ng-class="{'has-error': invalid('trackerIMEI')}">
              <input
                required
                name="trackerIMEI"
                class="form-control"
                ng-model="registration.tracker.trackerIMEI"
                ng-change="onRegistrationChange()"
                autocomplete="false"
                type="text"
                ng-pattern="getTrackerIMEIPattern()"
                tooltip="{{ validationHints(forms.trackerForm.trackerIMEI) }}"
              />
            </div>
          </div>

          <div class="form-group" ng-if="shouldDisplayField('trackerAPN')">
            <label class="control-label" translate>
              Tracker APN
            </label>
            <div ng-class="{'has-error': invalid('trackerAPN')}">
              <input
                placeholder="{{ 'e.g.' | translate }} internet"
                required
                name="trackerAPN"
                class="form-control"
                ng-model="registration.tracker.trackerAPN"
                ng-change="onRegistrationChange()"
                autocomplete="false"
                type="text"
                tooltip="{{ validationHints(forms.trackerForm.trackerAPN) }}"
              />
            </div>
          </div>

          <div class="form-group" ng-if="shouldDisplayField('trackerDomainName')">
            <label class="control-label" translate>
              Tracker domain name
            </label>
            <div ng-class="{'has-error': invalid('trackerDomainName')}">
              <input
                placeholder="{{ 'e.g.' | translate }} tracker.cumulocity.com"
                required
                name="trackerDomainName"
                class="form-control"
                ng-model="registration.tracker.trackerDomainName"
                ng-change="onRegistrationChange()"
                autocomplete="false"
                type="text"
                tooltip="{{ validationHints(forms.trackerForm.trackerDomainName) }}"
              />
            </div>
          </div>

          <div class="form-group" ng-if="shouldDisplayFirstSendButton()">
            <button
              class="btn btn-default"
              type="button"
              ng-click="sendFirstConfigurationBatch()"
              ng-disabled="forms.trackerForm.$invalid"
            >
              <span
                title="{{ 'Send configuration SMS' | translate }}"
                translate
                ng-if="shouldDisplayFirstSendButton() && !shouldDisplaySecondSendButton()"
              >
                Send configuration SMS
              </span>
              <span
                title="{{ 'Resend configuration SMS' | translate }}"
                translate
                ng-if="shouldDisplaySecondSendButton()"
              >
                Resend configuration SMS
              </span>
            </button>

            <button
              class="btn btn-default"
              type="button"
              ng-show="registration.status > 0"
              ng-click="onClickResetRegistrationData()"
            >
              <span
                title="{{ 'Reset registration data' | translate }}"
                translate
                ng-if="registration.status !== 4"
              >
                Reset registration data
              </span>
              <span
                title="{{ 'Register another tracker' | translate }}"
                translate
                ng-if="registration.status === 4"
              >
                Register another tracker
              </span>
            </button>
          </div>

          <div ng-if="shouldDisplaySecondSendButton()">
            <div class="alert alert-warning">
              <p translate>
                A confirmation SMS was sent to the number provided in the previous step. Before completing the configuration make sure that you have received it.
              </p>
            </div>
            <a
              title="{{ 'Complete configuration' | translate }}"
              class="btn btn-primary"
              ng-click="sendSecondConfigurationBatch()"
              translate
            >
              Complete configuration
            </a>
          </div>
        </div>
      </div>
    </form>
    <div class="col-lg-6">
      <h3>
        <i c8y-icon="check-circle"></i>
        {{ 'Pending tracker registrations' | translate }}
      </h3>
      <c8y-refresh-btn></c8y-refresh-btn>

      <table class="table table-hover" data-ng-show="newDeviceRequests.length">
        <tr data-ng-repeat="d in newDeviceRequests | orderBy: listOrderExpression">
          <td class="text-center" style="width:30px">
            <i c8y-icon="{{ statusIcon(d) }}" data-ng-class="statusClass(d)"></i>
          </td>
          <td class="word-break">
            {{ d.id }}
            <small class="text-muted m-r-8">
              <strong>{{ 'Status' | translate }}:</strong> {{ d.status | humanize | translate }}
            </small>
          </td>
          <td class="text-right">
            <a
              title="{{ 'Cancel' | translate }}"
              class="btn btn-xs btn-danger showOnHover"
              data-ng-click="onClickCancel(d)"
            >
              <i c8y-icon="times""></i>
              {{ 'Cancel' | translate }}
            </a>
            <a
              title="{{ 'Accept' | translate }}"
              class="btn btn-xs btn-success"
              data-ng-click="onClickAccept(d)"
              data-ng-show="d.status==newDeviceRequestsStatus.PENDING_ACCEPTANCE"
            >
              <i c8y-icon="check-circle"></i>
              {{ 'Accept' | translate }}
            </a>
          </td>
        </tr>
      </table>

      <c8y-load-more></c8y-load-more>
    </div>
  </div>
</div>
