<ion-content class="hm_theme_trans_bg" [ngClass]="lang=='ar' ? 'ar' : ''">
  <div class="hm_cancel_pop_div">
    <div class="hm_cancel_pop_main">
      <div class="hm_cancel_pop_upper">
        <img src="assets/img/hm_ques_mark.png">
        <p>{{'reject.Cancellation Reason'|translate}}</p>
      </div>
      <div class="hm_cancel_pop_lower">
        <ul>
          <ion-list radio-group [(ngModel)]="reason">
            <li>
              <div class="hm_cancel_radio">
                <ion-radio value="Pickup location too far"></ion-radio>
              </div>
              <div class="hm_cancel_reason">
                {{'reject.Pickup location too far'|translate}}
              </div>
              <div class="hm_clear"></div>
            </li>
            <li>
              <div class="hm_cancel_radio">
                <ion-radio value="Cannot serve at the requested time"></ion-radio>
              </div>
              <div class="hm_cancel_reason">
                {{'reject.Cannot serve at the requested time'|translate}}
              </div>
              <div class="hm_clear"></div>
            </li>

            <li>
              <div class="hm_cancel_radio">
                <ion-radio value="Other"></ion-radio>
              </div>
              <div class="hm_cancel_reason">
                {{'reject.Other'|translate}}
              </div>
              <div class="hm_clear"></div>
            </li>

          </ion-list>
        </ul>
        <div class="hm_cancel_bottom_bay">
          <li class="hm_cancel_cancel" (click)="dismiss()">{{'reject.Cancel'|translate}}</li>
          <li class="hm_cancel_submit" (click)="submit()">{{'reject.Submit'|translate}}</li>
        </div>
      </div>
    </div>
  </div>
</ion-content>