<app-main-header></app-main-header>
<div class="col-md-12 set_window">
  <div class="row">
    <div class="col-md-12 mt_25">
      <div class="col-md-6 float-left pad-l0" >
        <a routerLink="/threesixty-dashboard" class="wid3_font">
          <img src="assets/images/back.png" class="wid3">
          <span class="capi">{{model_name}}</span>
        </a>
      </div>
      <!-- <div class="box_panel text-center big_button big_button_1" [ngStyle]="{'background-color':color.color}" [ngClass]="(is_selected_color[j]=='selected')?'active':'' " *ngFor="let color of color_list;let j=index"> {{color.color_title}}</div>-->
      <div class="col-md-6 float-left">
        <div class="tab">
          <ul class="tab_list">
            <li [ngClass]="{'active_tab':selectedId==1}">
              <a  (click)="setTab('1')">Color</a>
            </li>
            <li [ngClass]="{'active_tab':selectedId==2}">
              <a  (click)="setTab('2')"> Accessories</a>
            </li>
          </ul>
        </div>
        <div class="zmdropdown">
          <select [(ngModel)]="vehicle_name" (ngModelChange)='vehicleChange($event)'>
            <!-- <option value="all">All</option> -->
            <option *ngFor="let varient of varient_list;let i = index;" [ngValue]="i">{{varient.title}}</option>
          </select>
        </div>
      </div>
    </div>
  </div>
  <div class="left_card" *ngIf="loader">
    <div class="inner_load">
      <svg version="1.1" id="L9" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
        viewBox="0 0 100 100" enable-background="new 0 0 0 0" xml:space="preserve">
        <path fill="#28a8e0" d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50">
          <animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="1s" from="0 50 50" to="360 50 50" repeatCount="indefinite"
          />
        </path>
      </svg>
      <p>Just a moment...</p>
    </div>
  </div>
  <div class="row" *ngIf="!loader && selectedId==1 " >
    <div class="col-md-4 mt_50 new_category">
      <div id="content">
        <div class="circle" *ngFor="let color of color_list;let j=index" [ngStyle]="{'background-color':color.color}" (click)="clickColor(j,color)">
          <div class="circle_inner " [ngStyle]="{'background-color':color.color}" [ngClass]="(is_selected_color[j]=='selected')?'active':'' ">
          </div>
          <!-- <div class="hover_title" [ngClass]="(is_selected_color[j]=='selected')?'active':'' " [ngStyle]="{'background-color':color.color}"> -->
              <div class="hover_title active" style="background-color: white">
            <p>{{color.color_title}}</p>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-8 mt_50" *ngIf="color_list.length>0">
      <div class="img_height">
        <img src={{image_url}} alt="{{model_name}}" class="lg-image" title="{{model_name}}">
      </div>
      <!-- <div class='text-center'><p class="model-name">{{model_name}} </p></div>    -->
    </div>

  </div>
  <div class="row" id="accessories" *ngIf="!loader && selectedId==2 ">
    <div class="col-md-12">
      <div class="row">
        <div class="col-md-6 float-left">

          <div class="accessories">
            <ul class="accessories_list">
              <li [ngClass]="{'active_accessories':selected_accessories==1}">
                <a (click)="setInnerTab('1')">Vehicle</a>
              </li>
              <li [ngClass]="{'active_accessories':selected_accessories==2}">
                <a (click)="setInnerTab('2')"> Riders</a>
              </li>
            </ul>

          </div>
        </div>
        <div class="col-md-6 float-left" *ngIf="selected_accessories==2">
          <select class="form-control category_select" id="sel1" (change)="selectCategory($event.target.value)"  [(ngModel)]="category_id">
            <option *ngFor="let category of ridersDataCategory;let i=index" value={{category.id}}> {{category.cat_title}}</option>
            </select>
        </div>
      </div>
    </div>
    <div class="col-md-12" *ngIf="!loader && selected_accessories==1 && bikersPreviewImage.length>0">
      <div class="biker">
        <div class="col-md-12 outer_margin">
          <div class="col-md-6 access_center">
            <div class="access_right">
              <div class="access_img">
                <img src={{bikersPreviewImage[0].image_url}} class="img-responsive" alt="Skid_plate" title="Skid_plate">
              </div>
            </div>
          </div>
          <div class="col-md-6 float-left">
            <div class="content_data">
            <p class="product_name">{{bikersPreviewImage[0].title}}</p>
            <!-- <p class="product_no">{{bikersPreviewImage[0].description}}</p>
            <h4 class="product_price">INR {{bikersPreviewImage[0].price}}/-</h4> -->
          </div>
          </div>
        </div>
        <div class="col-md-12 float-left">
          <!-- Top content -->
          <div class="top-content">
            <div class="container-fluid top_outer">
              <div id="carousel-example" class="carousel slide" data-ride="carousel" data-interval="false">
                <div class="carousel-inner row" role="listbox">
                  <div class="carousel-item scroll_img" *ngFor="let bikes of bikersData;let i=index;" [ngClass]="{'active':bikes.id==activeSlide}">
                    <img src={{bikes.image_url}} class="img-fluid mx-auto d-block" alt="{{bikes.image}}" (click)=loadPreview(bikes)>
                  </div>
                </div>
                <a class="carousel-control-prev" href="#carousel-example" role="button" data-slide="prev" *ngIf="bikersData.length>4">
                  <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                  <span class="sr-only">Previous</span>
                </a>
                <a class="carousel-control-next"  href="#carousel-example" role="button" data-slide="next" *ngIf="bikersData.length>4">
                  <span class="carousel-control-next-icon" aria-hidden="true"></span>
                  <span class="sr-only">Next</span>
                </a>

              </div>
            </div>
          </div>
        </div>

      </div>

    </div>
    <div class="col-md-12 float-left" *ngIf="bikersPreviewImage.length==0 && selected_accessories==1">

        <div class="no_record">
            <div class="col-md-12 float-left">
                <img src="assets/images/warning.png" alt="No Record" title="No Record">
            </div>
            <div class="col-md-12 float-left">
                <p>No Records Found</p>
            </div>





      </div>
    </div>
    <div class="col-md-12" *ngIf="!loader && selected_accessories==2 && ridersPreviewImage.length>0">

      <div class="rider">

          <div class="col-md-12 outer_margin">
              <div class="col-md-6 access_center">
                <div class="access_right">
                  <div class="access_img">
                    <img src={{ridersPreviewImage[0].image_url}} class="img-responsive" alt="Skid_plate" title="Skid_plate">
                  </div>
                </div>
              </div>
              <div class="col-md-6 float-left">
                <div class="content_data">
                <p class="product_name">{{ridersPreviewImage[0].title}}</p>
                <!-- <p class="product_no">{{ridersPreviewImage[0].description}}</p>
                <h4 class="product_price">INR {{ridersPreviewImage[0].price}}/-</h4> -->
              </div>
              </div>
            </div>



            <div class="col-md-12 float-left">
                <!-- Top content -->
                <div class="top-content">
                  <div class="container-fluid top_outer">
                    <div id="carousel-example" class="carousel slide" data-ride="carousel" data-interval="false">
                      <div class="carousel-inner row" role="listbox">
                        <div class="carousel-item scroll_img" *ngFor="let riders of ridersImage;let i=index;" [ngClass]="{'active':riders.id==activeInSlide}" (click)="ridersPreview(riders)">
                          <img src={{riders.image_url}} class="img-fluid mx-auto d-block" >
                        </div>
                      </div>
                      <a class="carousel-control-prev" href="#carousel-example" role="button" data-slide="prev" *ngIf="ridersImage.length>4">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                      </a>
                      <a class="carousel-control-next" href="#carousel-example" role="button" data-slide="next" *ngIf="ridersImage.length>4">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                      </a>
                    </div>
                  </div>
                </div>
              </div>
      </div>
    </div>
    <div *ngIf="ridersPreviewImage.length==0 && selected_accessories==2">
        <div class="no_record">
            <div class="col-md-12 float-left">
                <img src="assets/images/warning.png" alt="No Record" title="No Record">
            </div>
            <div class="col-md-12 float-left">
                <p>No Records Found</p>
            </div>





      </div>
    </div>
  </div>

</div>
<!-- <div class="col-md-12  text-center mt_100"> -->
<!-- <button type="button" class="btn btn-primary big_button1" *ngFor="let varient of varient_list;let i=index" (click)="clickVarient(i)" [ngClass]="(is_selected[i]=='selected')?'active':'' "> {{varient.title}}</button> -->
<!-- <button type="button" class="btn btn-primary big_button1 active"  > {{varient_list[0].title}}</button>  -->
<!-- <button type="button" class="btn btn-primary big_button1 active"  > Bikers</button>
    <button type="button" class="btn btn-primary big_button1 active"  > Riders</button>  -->
<!-- </div> -->
<!-- <div class="col-md-12 float-right padl_0 scroll_bottombox">
  <div class="image_arr_box">
    <div class="img_drag_box">
      <img class="bot_img_cls drag_fixed_img" src="https://hyper-m.cygnusa.in/explore_assets/model/web/02_Yamaha-FZ-S-Ver.-3.png">
      <span class="mod_nme_cls">
        <h6>Bikers </h6>
      </span>

    </div>
    <div class="img_drag_box">
      <img class="bot_img_cls drag_fixed_img" src="https://hyper-m.cygnusa.in/explore_assets/model/web/02_Yamaha-FZ-S-Ver.-3.png">
      <span class="mod_nme_cls">
        <h6>Riders </h6>
      </span>


    </div>
  </div>

</div> -->

<app-footer></app-footer>
<app-sidemenu></app-sidemenu>
