<ng-template [ngIf]="authSer.arabicTemplate" [ngIfElse]="englishTemplate">
    <div class="externalPageContentt-w">
        <div class="container">
          <div class="contentPage-w">
            <div class="row">

              <div class="col-12">
                <div class="sliderNews-w">
                  <div id="demo" class="carousel slide" data-ride="carousel">
                    <ul class="carousel-indicators">
                        <li *ngFor="let report of reports; let i = index" data-target="#demo" [attr.data-slide-to]="i" [ngClass]="i == 0 ? 'active' : ''"></li>
                    </ul>
                    <div class="carousel-inner">
                        <div class="carousel-item" *ngFor="let report of reports; let i = index" [ngClass]="i == 0 ? 'active' : ''">
                          <img src="{{authSer.pathImg + report['photo'].photo}}" />
                          <div class="carousel-caption d-md-block">
                              <h5>{{report.title}}</h5>
                              <p [innerHtml] = "report.description"></p>
                              <button class="more hvr-grow" (click)="goPageNew(report)">تفاصيل الخبر</button>
                              <button class="moreNews hvr-grow" (click)="moreNewsPage()">المزيد من الأخبار</button>
                          </div>
                        </div>
                    </div>
                  </div>
                </div>
              </div>
        
              <div class="col-12">
                <div class="eventPart-w">
                  <div id="demo1" class="carousel slide" data-ride="carousel">
                      <div class="carousel-inner">
                          <div class="carousel-item" *ngFor="let event of events; let i = index" [ngClass]="i == 0 ? 'active' : ''">
                              <div class="carousel-caption">
                                  <p><img src="../../../assets/image/eventX.png" /> <span> حدث :</span> {{event.name}}</p>
                              </div>   
                          </div>
                          <button class="moreEvent-w" (click)="oneventTable()">المزيد</button>
                      </div>
                  </div> 
                </div>
              </div>
        
              <div class="col-12">
                <div class="externalServices-w">
                  <div class="row">
                    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12" *ngFor="let service of services; let i = index">
                      <div class="animated" style="position:relative">
                        <a (click)="onGetService(service)" style="cursor:pointer">
                            <div class="item text-center">
                              <img src="{{authSer.pathImg + service.photo}}" />
                              <p>{{service.name}}</p>
                            </div>
                        </a>
                        <span class="one"></span>
                        <span class="two"></span>
                        <span class="three"></span>
                        <span class="four"></span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
  
              <div class="col-12">
                <div class="lectureService-w">
                  <div class="row">
                    
                    <div class="col-12 col-sm-12 col-md-4 col-lg-4 "><!-- hidden-xs -->
                      <div class="advertisimentServices-w text-center">
                        <h1>خدمات إعلانيه</h1>
                        <div class="body">
                          <div id="carouselExample" class="carousel slide" data-ride="carousel" data-interval="9000">
                            <div class="carousel-inner row w-100 mx-auto" role="listbox">
                                <div class="carousel-item cslide" *ngFor="let image of firstAdvertisiment;let i = index" [ngClass]="i == 0 ? 'active' : '' ">
                                    <img class="img-fluid mx-auto d-block" src="{{authSer.pathImg + image.photo}}" alt="slide 1">
                                </div>
                            </div>
                            <a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev">
                                <i class="fa fa-chevron-left fa-lg text-muted"></i>
                                <span class="sr-only">Previous</span>
                            </a>
                            <a class="carousel-control-next text-faded" href="#carouselExample" role="button" data-slide="next">
                                <i class="fa fa-chevron-right fa-lg text-muted"></i>
                                <span class="sr-only">Next</span>
                            </a>
                          </div>
  
                          <div id="carouselExample2" class="carousel slide" data-ride="carousel" data-interval="9000">
                            <div class="carousel-inner row w-100 mx-auto" role="listbox">
                              <div class="carousel-item cslide" *ngFor="let slide2 of secondAdvertisiment;let i = index" [ngClass]=" i == 0 ? 'active' : '' ">
                                  <img class="img-fluid mx-auto d-block" src="{{authSer.pathImg + slide2.photo}}" alt="slide 1">
                              </div>
                            </div>
                            <a class="carousel-control-prev" href="#carouselExample2" role="button" data-slide="prev">
                                <i class="fa fa-chevron-left fa-lg text-muted"></i>
                                <span class="sr-only">Previous</span>
                            </a>
                            <a class="carousel-control-next text-faded" href="#carouselExample2" role="button" data-slide="next">
                                <i class="fa fa-chevron-right fa-lg text-muted"></i>
                                <span class="sr-only">Next</span>
                            </a>
                          </div>
  
  
                        </div>
                      </div>
                    </div>

                    <div class="col-12 col-sm-12 col-md-8 col-lg-8">
                      <div class="visitingTime-w">
                        <h1>مواعيد الزياره</h1>
                        <div class="row">
                          <div class="col-12 col-sm-12 col-md-6 col-lg-6">
                            <div class="monthRecord-w text-center">
                              <h1>أقسام التنويم</h1>
                              <div class="body">
                                <ul class="list-unstyled">
                                  <li><img src="../../../assets/image/Path 82.png" /><span style="color:green">{{hypnosisSections.open_time}}</span></li>
									<i class="fa fa-chevron-left fa-lg text-muted"></i>
                                  <li><img src="../../../assets/image/Path 82.png" /><span style="color:red">{{hypnosisSections.close_time}}</span></li>
                                </ul>
                              </div>
                            </div>
                          </div>
                          <div class="col-12 col-sm-12 col-md-6 col-lg-6">
                            <div class="achiev text-center">
                              <h1>العنايه المركزه</h1>
                              <div class="body">
                                <ul class="list-unstyled">
                                  <li><img src="../../../assets/image/Path 82.png" /><span style="color:green">{{intensiveCare.open_time}}</span></li>
									<i class="fa fa-chevron-left fa-lg text-muted"></i>
                                  <li><img src="../../../assets/image/Path 82.png" /><span style="color:red">{{intensiveCare.close_time}}</span></li>
                                </ul>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>

                  </div>
                </div>
              </div>
  
  
            <div class="col-12">
                <div class="recordsContent-w">
                  <div class="row">

                      <div class="col-12 col-sm-12 col-md-5">
                        <div class="datePicker-w">
                          <h1>تقويم الأحداث</h1>
                          <div class="body">
                            <app-external-events></app-external-events>
                          </div>
                        </div>
                      </div>

                      <div class="col-12 col-sm-12 col-md-7 col-lg-7">
                        <h1>إحصائيات عامه وإنجازات</h1>
                        <div class="row">
                          <div class="col-12 col-sm-12 col-md-6">
                            <div class="records">
                              <span class="rightArrow-w" (click)="prevMonth()"><i class="fas fa-angle-right"></i></span>
                              <h1> إحصائيات شهر  {{recordsOfMonth.statistics_month}}</h1>
                              <span class="leftArrow-w" (click)="nextMonth()"><i class="fas fa-angle-left"></i></span>
                              <div class="body">
                                <div class="spinnerContainer-w" *ngIf="showSmallSpinner">
                                  <div class="loader">

                                  </div>
                                </div>
                                <ul class="list-unstyled">
                                  <li *ngIf="checkStatisticShow">لا يوجد إحصائيات لعرضها الأن</li>
                                  <li *ngFor="let static of recordsOfMonth['statistics_values']; let i = index"> <span>{{static.value}}</span>{{static.name}}</li>
                                </ul>
                              </div>
                            </div>
                          </div>
                          <div class="col-12 col-sm-12 col-md-6">
                            <div class="medical">
                              <h1>إنجاز طبي</h1>
                              <div class="body">
                                <div id="demo2" class="carousel slide" data-ride="carousel">
                                  <ul class="carousel-indicators">
                                      <li *ngFor="let achievement of achievements; let i = index" data-target="#demo2" [attr.data-slide-to]="i" [ngClass]="i == 0 ? 'active' : ''"></li>
                                  </ul>
                                  <div class="carousel-inner">
                                      <div class="carousel-item" *ngFor="let achievement of achievements; let i = index" [ngClass]="i == 0 ? 'active' : ''">
                                          <div class="carousel-caption">
                                              <p [innerHtml]="achievement.description"></p>
                                          </div>   
                                      </div>
                                  </div>
                                </div> 
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>

                    </div>
                </div>
              </div>
  
              <div class="col-12">
                <div class="maps">
                  <h1>إتصل بنا</h1>
                  <agm-map [latitude]="lat" [longitude]="lng">
                      <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
                  </agm-map>
                </div>
              </div>
        
            </div>
          </div>
        </div>
      </div>
</ng-template>


<ng-template #englishTemplate>
  <div class="externalPageContentt-w">
      <div class="container">
        <div class="row">
          <div class="contentPage-w">
            <div class="col-12">
                <div class="sliderNews-w">
                  <div id="demo" class="carousel slide" data-ride="carousel">
                      <ul class="carousel-indicators">
                          <li *ngFor="let report of reports; let i = index" data-target="#demo" [attr.data-slide-to]="i" [ngClass]="i == 0 ? 'active' : ''"></li>
                      </ul>
                      <div class="carousel-inner">
                          <div class="carousel-item" *ngFor="let report of reports; let i = index" [ngClass]="i == 0 ? 'active' : ''">
                            <img src="{{authSer.pathImg + report['photo'].photo}}" />
                            <div class="carousel-caption d-none d-md-block">
                                <h5>{{report.title_en}}</h5>
                                <p [innerHtml] = "report.description_en"></p>
                                <button class="more hvr-grow" (click)="goPageNew(report)" style="left:10px;">Read More</button>
                                <button class="moreNews hvr-grow" (click)="moreNewsPage()">More From News</button>
                            </div>
                          </div>
                      </div>
                  </div>
                </div>
              </div>
        
              <div class="col-12">
                <div class="eventPartEn-w">
                    <div id="demo1" class="carousel slide" data-ride="carousel">
                        <div class="carousel-inner">
                            <div class="carousel-item" *ngFor="let event of events; let i = index" [ngClass]="i == 0 ? 'active' : ''">
                                <div class="carousel-caption">
                                    <p> <img src="../../../assets/image/eventX.png" />  <span> event :</span>  {{event.name_en}}</p> <button class="moreEventEn-w"  (click)="oneventTable()">More </button>
                                </div>   
                            </div>
                        </div>
                    </div> 
                </div>
              </div>
        
              <div class="col-12">
                <div class="externalServices-w">
                  <div class="row">
                    <div class="col-6 col-sm-6 col-md-3 col-lg-3" *ngFor="let service of services; let i = index">
                      <a href="{{service.link}}">
                        <div class="item text-center">
                          <img src="{{authSer.pathImg + service.photo}}" />
                          <p>{{service.name_en}}</p>
                        </div>
                      </a>
                    </div>
                  </div>
                </div>
              </div>
      
      
        <div class="col-12" style="direction:ltr">
            <div class="lectureService-w">
              <div class="row">
                <div class="col-12 col-sm-12 col-md-4 col-lg-4 hidden-xs">
                  <div class="advertisimentServices-w text-center">
                    <h1>Advertising services</h1>
                      <div class="body">
                      <div id="carouselExample" class="carousel slide" data-ride="carousel" data-interval="9000">
                        <div class="carousel-inner row w-100 mx-auto" role="listbox">
                            <div class="carousel-item col-md-4" *ngFor="let image of firstAdvertisiment;let i = index" [ngClass]="i == 0 ? 'active' : '' ">
                                <img class="img-fluid mx-auto d-block" src="{{authSer.pathImg + image.photo}}" alt="slide 1">
                            </div>
                        </div>
                        <a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev">
                            <i class="fa fa-chevron-left fa-lg text-muted"></i>
                            <span class="sr-only">Previous</span>
                        </a>
                        <a class="carousel-control-next text-faded" href="#carouselExample" role="button" data-slide="next">
                            <i class="fa fa-chevron-right fa-lg text-muted"></i>
                            <span class="sr-only">Next</span>
                        </a>
                      </div>

                      <div id="carouselExample2" class="carousel slide" data-ride="carousel" data-interval="9000">
                        <div class="carousel-inner row w-100 mx-auto" role="listbox">
                          <div class="carousel-item col-md-4" *ngFor="let slide2 of secondAdvertisiment;let i = index" [ngClass]=" i == 0 ? 'active' : '' ">
                              <img class="img-fluid mx-auto d-block" src="{{authSer.pathImg + slide2.photo}}" alt="slide 1">
                          </div>
                        </div>
                        <a class="carousel-control-prev" href="#carouselExample2" role="button" data-slide="prev">
                            <i class="fa fa-chevron-left fa-lg text-muted"></i>
                            <span class="sr-only">Previous</span>
                        </a>
                        <a class="carousel-control-next text-faded" href="#carouselExample2" role="button" data-slide="next">
                            <i class="fa fa-chevron-right fa-lg text-muted"></i>
                            <span class="sr-only">Next</span>
                        </a>
                      </div>

                    </div>
                  </div>
                </div>
                <div class="col-12 col-sm-12 col-md-8 col-lg-8">
                  <div class="visitingTime-w">
                    <h1>Dates of the visit</h1>
                    <div class="row">
                      <div class="col-12 col-sm-12 col-md-6 col-lg-6">
                        <div class="monthRecord-w text-center">
                          <h1>Hypnosis Sections</h1>
                          <div class="body">
                            <ul class="list-unstyled">
                              <li><img src="../../../assets/image/Path 82.png" /><span style="color:green">{{hypnosisSections.open_time}}</span></li>
                              <li><img src="../../../assets/image/Path 82.png" /><span style="color:red">{{hypnosisSections.close_time}}</span></li>
                            </ul>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-12 col-md-6 col-lg-6">
                        <div class="achiev text-center">
                          <h1>Intensive care</h1>
                          <div class="body">
                            <ul class="list-unstyled">
                              <li><img src="../../../assets/image/Path 82.png" /><span style="color:green">{{intensiveCare.open_time}}</span></li>
                              <li><img src="../../../assets/image/Path 82.png" /><span style="color:red">{{intensiveCare.close_time}}</span></li>
                            </ul>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
      
      
          <div class="col-12">
              <div class="recordsContent-w">
                <div class="row">
                    <div class="col-12 col-sm-12 col-md-5">
                      <div class="datePicker-w">
                        <h1>Events Calendar</h1>
                        <div class="body">
                            <app-external-events></app-external-events>
                        </div>
                      </div>
                    </div>
                    <div class="col-12 col-sm-12 col-md-7 col-lg-7">
                      <h1>General Statistics and Achievements</h1>
                      <div class="row">
                        <div class="col-12 col-sm-12 col-md-6">
                          <div class="records">
                            <span class="rightArrow-w" (click)="nextMonth()"><i class="fas fa-angle-right"></i></span>
                            <h1> Stqtistics Month {{recordsOfMonth.statistics_month_en}}</h1>
                            <span class="leftArrow-w" (click)="prevMonth()"><i class="fas fa-angle-left"></i></span>
                            <div class="body">
                              <div class="spinnerContainer-w" *ngIf="showSmallSpinner">
                                <div class="loader">

                                </div>
                              </div>
                              <ul class="list-unstyled" style="direction:ltr">
                                <li *ngIf="checkStatisticShow">No Statistics To Show !</li>
                                <li *ngFor="let static of recordsOfMonth['statistics_values']; let i = index"> {{static.name_en}} <span>{{static.value}}</span></li>
                              </ul>
                            </div>
                          </div>
                        </div>
                        <div class="col-12 col-sm-12 col-md-6">
                          <div class="medical">
                            <h1>Medical achievement</h1>
                            <div class="body">
                              <div id="demo2" class="carousel slide" data-ride="carousel">
                                <ul class="carousel-indicators">
                                    <li *ngFor="let achievement of achievements; let i = index" data-target="#demo2" [attr.data-slide-to]="i" [ngClass]="i == 0 ? 'active' : ''"></li>
                                </ul>
                                <div class="carousel-inner">
                                    <div class="carousel-item" *ngFor="let achievement of achievements; let i = index" [ngClass]="i == 0 ? 'active' : ''">
                                        <div class="carousel-caption">
                                            <p [innerHtml]="achievement.description_en"></p>
                                        </div>   
                                    </div>
                                </div>
                              </div> 
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
              </div>
            </div>
      
            <div class="col-12">
              <div class="maps">
                <h1>Contact Us</h1>
                  <agm-map [latitude]="lat" [longitude]="lng">
                    <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
                  </agm-map>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
</ng-template>


