<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="row 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>
    <div class="col-md-12 mt_25">
      <ul class="list-unstyled video-list-thumbs row">
        <li class="col-lg-12 col-sm-12 col-xs-12" *ngIf="data_check">
            <!-- <img src="assets/images/no-video.gif"> -->
            <p class="text-center">Videos are Current Not Available</p>
          </li>
        <li class="col-lg-2 col-sm-4 col-xs-6" *ngFor="let videos of video;let j=index;">
          <div class="video_box">
            <div class="img">
              <img src="{{videos.thumb_url}}" data-toggle="modal"  [attr.data-target]= "'#videoModal_' + videos.contentid" alt="Barca" class="img-responsive"
                />
            </div>
            
           
            <h2>{{videos.title}}</h2>
            <!-- Modal -->
            <div id="videoModal_{{videos.contentid}}" data-backdrop="static" class="modal fade" role="dialog">
              <div class="modal-dialog">

                <!-- Modal content-->
                <div class="modal-content">
                    <div class="container">
                  <div class="col-md-10 float-left p0"><h2>{{videos.title}}</h2></div>  
                  <div class="col-md-2 float-right p0"> <button type="button" class="close" data-dismiss="modal" (click) ="closeVideo(videos.contentid)">&times;</button>
                      </div>  
                    </div>                
                  <div class="modal-body">
                   <video controls #videoplayer id="videoplayers_{{videos.contentid}}">
                     <source src="{{videos.file_url}}" type="video/mp4" id="cartoonVideo">
                   </video>
                  </div>
                
                </div>

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

      </ul>
    </div>
  </div>
</div>
<app-footer></app-footer>
<app-sidemenu></app-sidemenu>