<section class="col-md-6 text-center" id="cardetails">
  
  <!--Section heading-->
  <h2 class="h1-responsive font-weight-bold text-center mb-5 pt-4">Details</h2>

  <div class="col-lg-12 col-md-12 mb-4">
    <div class="view overlay z-depth-2 mb-2">
      <img  *ngIf="carItem.model.mTS; else defaultImg" src={{carItem?.model?.mTS}} class="img-fluid" alt="First sample image">
        <ng-template #defaultImg>
          <img  src='https://cpb-ap-se2.wpmucdn.com/global2.vic.edu.au/dist/b/17690/files/2014/03/url-2-2k4i0gj.jpeg' class="img-fluid" alt="First sample image">
        </ng-template>
      <a>
        <div class="mask waves-effect waves-light"></div>
      </a>
    </div>
  </div>

  <div class="row">
      <div class="col-lg-6 col-md-6 mb-4">
          <h4 class="mb-3 font-weight-bold dark-grey-text text-left">
            <strong>Exterior</strong>
          </h4>
          <div class="row text-left">
              <div class="col-3 col-sm-3">
                <img  *ngIf="carItem.model.mTS; else defaultExtImg" src={{carItem?.exterior?.color?.tI}} (click)="openDialog(carItem.exterior.color.tI)" class="img-fluid" alt="First sample image">
                <ng-template #defaultExtImg>
                  <img src='https://cpb-ap-se2.wpmucdn.com/global2.vic.edu.au/dist/b/17690/files/2014/03/url-2-2k4i0gj.jpeg' (click)="basicModal.show()" class="img-fluid" alt="First sample image">
                </ng-template>
              </div>
              <div class="col-9 col-sm-9">{{carItem?.exterior?.color?.des}}</div>
            </div>
        </div>

    <div class="col-lg-6 col-md-6 mb-4">
        <h4 class="mb-3 font-weight-bold dark-grey-text text-left">
          <strong>Interior</strong>
        </h4>
        <div class="row text-left">
            <div class="col-3 col-sm-3">
              <img  *ngIf="carItem.model.mTS; else defaultIntImg" src={{carItem?.exterior?.rim?.tI}}  (click)="openDialog(carItem.exterior.rim.tI)" class="img-fluid" alt="First sample image">
                <ng-template #defaultIntImg>
                  <img src='https://cpb-ap-se2.wpmucdn.com/global2.vic.edu.au/dist/b/17690/files/2014/03/url-2-2k4i0gj.jpeg' (click)="basicModal.show()" class="img-fluid" alt="First sample image">
                </ng-template>
            </div>
              <div class="col-9 col-sm-9">{{carItem?.exterior?.rim?.des}}</div>
          </div>
      </div>

  </div>
  <!--Grid row-->
</section>

<div mdbModal #basicModal="mdbModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myBasicModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close pull-right" aria-label="Close" (click)="basicModal.hide()">
          <span aria-hidden="true">×</span>
        </button>
        <img src={{popImg}} class="img-fluid" alt="First sample image">
      </div>
    </div>
  </div>
</div>



