<div class="custom_loader_wrapper" *ngIf="loader">
    <div class="custom_loader_ring"></div>
</div>
<header class="provider_header">
  <div class="row">
    <div class="col-md-6">
      <h4>{{'currency.Forex Currency Rate' | translate}}</h4>
    </div>
    <div class="col-md-6 textRight relative">
        <button class="logout" (click)="goToPage('forex')">
            <img src="assets/images/asset_home.png">
          {{'currency.Home' | translate}}</button>
        <button class="logout" (click)="logout()">
            <img src="assets/images/asset_logout.png">
          {{'currency.Logout' | translate}}</button>
        <img src="assets/images/asset_logo1.png">
    </div>
  </div>
</header>
<section>
  <div class="provider_content">
    <h3>{{'currency.Currency & Rates' | translate}}</h3>
    <div class="provider_inner_content">
        <div class="alert alert-danger alert-dismissible" *ngIf="error">
            <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
            <strong>{{'currency.Warning' | translate}}!</strong> {{responseMsg}}
        </div>
        <div class="alert alert-success alert-dismissible" *ngIf="success">
            <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
            <strong>{{'currency.Success' | translate}}!</strong>{{'currency.Currency assigned successfully' | translate}} 
          </div> 
          <form [formGroup]="currencyForm" novalidate (ngSubmit)="currency_assign()">
      <div class="row">
        <div class="col-md-6">
          <div class="row">
            <div class="col-md-12">
                <p>{{'currency.Currency' | translate}}</p>
            </div>
          </div>
          <div class="row">
              <div class="col-md-4">
                  <div class="currency_div">
                      <ul *ngIf="currencyList">
                          <li *ngFor="let currency of avaliableList" (click)="currency_add(currency)" [ngClass]="{active:CheckClass(currency.id, 'add')}">{{currency.name}}</li>
                      </ul>
                    </div>
              </div>
              <div class="col-md-4 textCenter">
                <button class="add_btn" (click)="currency_push()">{{'currency.Add' | translate}}<img src="assets/images/right.png"></button><br>
                <button class="add_btn" (click)="currency_pop()"><img src="assets/images/left.png">{{'currency.Remove' | translate}}</button>
              </div>
              <div class="col-md-4">
                  <div class="currency_div">
                      <ul *ngIf="selectedList">
                          <li *ngFor="let currency of selectedList" (click)="currency_remove(currency)" [ngClass]="{active:CheckClass(currency.id, 'remove')}">{{currency.name}}</li>
                      </ul>                     
                    </div>
              </div>
          </div>
        </div>
        
        <div class="col-md-2"></div>
        <div class="col-md-4">
            
            <div class="row">
                <div class="col-md-12">
                    <p>{{'currency.Save' | translate}}Rates</p>
                </div>
              </div>
              
              <div formArrayName="currency">
              <div class="row">
                <div class="col-md-6" *ngFor="let address of formData.controls; let i=index" [formGroupName]="i">
                  <h6>{{selectedList[i].name}}</h6>
                   <input class="" type="hidden" formControlName="currency_id">
                  <input class="" type="number" formControlName="rate">                                          
                    <div  class="s_error" *ngIf="!currencyForm.controls.currency.controls[i].controls.rate.valid && bookSubmit">
                        <div class="s_validation" *ngIf="currencyForm.controls.currency.controls[i].controls.rate.hasError('required')">{{vs.errorList.required}} </div>
                    </div>
                </div>
              </div>
            </div>
              <input type="hidden" formControlName="provider_id"/>
              <!-- <div class="row">
                  <div class="col-md-6">
                    <h6>Euro</h6>
                    <input class="" type="number">
                  </div>
                  <div class="col-md-6">
                      <h6>Dirham</h6>
                      <input class="" type="number">
                  </div>
                </div> -->
            
        </div>
      </div>
      <div class="row" *ngIf="selectedList.length > 0">
        <div class="col">
          <div class="add_provider_btn_bay textCenter">
            <button class="save_btn ">{{'currency.Save' | translate}}</button>
            <button class="cancel_btn" (click)="cancelClick()" type="button">{{'currency.Cancel' | translate}}</button>
            <div class="clear"></div>
          </div>
        </div>
      </div>
    </form>
    </div>
  </div>




  <!-- <form [formGroup]="passengerForm" novalidate (ngSubmit)="booking(passengerForm, payment)">
      <div class="container-fluid">
          <div class="row">
              <div class="col-md-8">
                  <div class="information_div">
                      <h4>Passenger Details</h4>
                      
                      <ul formArrayName="passenger">
                          <li *ngFor="let address of passengerForm.controls.passenger.controls; let i=index" [formGroupName]="i">
                              <div class="row">
                                  <div class="col-md-6">
                                      <h6>Name</h6>
                                      <input class="input_detail" formControlName="name" placeholder="Enter passenger name" type="text">                                            
                                      <div  class="s_error" *ngIf="!passengerForm.controls.passenger.controls[i].controls.name.valid && bookSubmit">
                                          <div class="s_validation" *ngIf="passengerForm.controls.passenger.controls[i].controls.name.hasError('required')">{{vs.errorList.required}} </div>
                                      </div>
                                  </div>
                                  <div class="col-md-6">
                                      <h6>Age</h6>
                                      <input class="input_detail" formControlName="age" placeholder="Enter passenger age" type="number">
                                      <div class="s_error" *ngIf="!passengerForm.controls.passenger.controls[i].controls.age.valid && passengerForm.controls.passenger.controls[i].controls.age.touched">
                                              <div class="s_validation" *ngIf="passengerForm.controls.passenger.controls[i].controls.age.errors?.min">{{vs.errorList.min}} 3</div>
                                              <div class="s_validation" *ngIf="passengerForm.controls.passenger.controls[i].controls.age.errors?.max">{{vs.errorList.max}} 60</div>
                                          </div>
                                      <div  class="s_error" *ngIf="!passengerForm.controls.passenger.controls[i].controls.age.valid && bookSubmit">
                                          <div class="s_validation" *ngIf="passengerForm.controls.passenger.controls[i].controls.age.hasError('required')">{{vs.errorList.required}} </div>
                                      </div>
                                  </div>
                              </div>
                              <div class="row">                                        
                                  <div class="col-md-6">
                                      <h6>Gender</h6>
                                      <div class="radio_container clearfix">
                                          <span for="22" class="radio_block" *ngIf="getGender_state(i,'F')">
                                          <input type="radio" id="22_1" class="radio_btn" value="Male" formControlName="gender">
                                          <label for="22_1" class="radio_css " value="Male">Male</label>
                                      </span>
                                          <span for="23" class="radio_block" *ngIf="getGender_state(i,'M')">
                                          <input type="radio" id="23_1" class="radio_btn" value="Female" formControlName="gender">
                                          <label for="23_1" class="radio_css " value="Female">Female</label>
                                      </span>
                                      </div>
                                  </div>
                                  <div class="col-md-6">&nbsp;</div>
                              </div>
                          </li>
                      </ul>
                  </div>
              </div>
          </div>
      </div>
  </form> -->
</section>
