<app-main-header></app-main-header>

<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> -->
<div class=" ">
  <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 id="carouselExampleControls" class="carousel slide" data-ride="carousel" data-interval="false" *ngIf="!loader">
    <div class="carousel-inner">
      <div class="carousel-item h-100"   *ngFor="let image of imageSources;let i=index" [ngStyle]="{background: 'url(' + image.model_banner_image_url + ') no-repeat center  center'}" [ngClass]="{active:activeBanner===image.model_id}">
          <!-- <div class="carousel-item h-100"    [ngStyle]="{background: 'url(assets/images/Gixxer_SF.jpg) no-repeat center  center'}" > -->
        <!-- <img class="d-block w-100 h-100" src={{image.model_banner_image_url}} alt="First slide"> -->
        {{image.model_id}}
      </div>
      <div class="hero">
          <!-- <h4 class="title_name">{{model_name}}</h4> -->
        <button class="btn btn-primary btn-lg"  role="button" (click)="explore()">Explore</button>

      </div>

    </div>
    <a class="left carousel-control" href="#carouselExampleControls" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true" (click)="getModelName()"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carouselExampleControls" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true" (click)="getModelName()"></span>
      <span class="sr-only">Next</span>
    </a>
    <!-- <a class="left carousel-control" href="#carouselExampleControls" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true" (click)="goToPrev()"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carouselExampleControls" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true" (click)="goToNext()"></span>
      <span class="sr-only">Next</span>
    </a> -->
  </div>

</div>
<app-sidemenu></app-sidemenu>
