kfmc_website/src/app/External-Page/external-page-content/external-page-content.component.html

<ng-template [ngIf]="authSer.arabicTemplate" [ngIfElse]="englishTemplate">
    <div class="externalPageContentt-w">
        <div class="container">
          <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-none d-md-block">
                              <h5>{{report.title}}</h5>
                              <p [innerHtml] = "report.description"></p>
                              <button class="more">المزيد</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> <button class="moreEvent-w">المزيد</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}}</p>
                      </div>
                    </a>
                  </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">
                    <div class="advertisimentServices-w text-center">
                      <h1>خدمات إعلانيه</h1>
                        <div class="body">
                          <owl-carousel
                              [options]="{items: 3, dots: false, navigation: true}"
                              [items]="firstAdvertisiment"
                              [carouselClasses]="['owl-theme', 'row', 'sliding']">
                              <div class="item" *ngFor="let image of firstAdvertisiment;let i = index">
                                  <div class="thumbnail-image">
                                    <img src="{{authSer.pathImg + image.photo}}" />
                                  </div>
                              </div>
                          </owl-carousel>
                          <owl-carousel
                              [options]="{items: 3, dots: false, navigation: true}"
                              [items]="secondAdvertisiment"
                              [carouselClasses]="['owl-theme', 'row', 'sliding']">
                              <div class="item" *ngFor="let image of secondAdvertisiment;let i = index">
                                  <div class="thumbnail-image">
                                    <img src="{{authSer.pathImg + image.photo}}" />
                                  </div>
                              </div>
                          </owl-carousel>
                       </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>
                                    <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>
                                    <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">
                            <h1> إحصائيات شهر  {{recordsOfMonth.statistics_month}}</h1>
                            <div class="body">
                              <ul class="list-unstyled">
                                <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>{{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>
</ng-template>


<ng-template #englishTemplate>
  <div class="externalPageContentt-w">
      <div class="container">
        <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-none d-md-block">
                            <h5>{{report.title_en}}</h5>
                            <p [innerHtml] = "report.description_en"></p>
                            <button class="more">More</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">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">
                    <div class="advertisimentServices-w text-center">
                      <h1>Advertising services</h1>
                      <div class="body">
                         
                      </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">
      
                          </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">
                              <h1> Stqtistics Month {{recordsOfMonth.statistics_month_en}}</h1>
                              <div class="body">
                                <ul class="list-unstyled" style="direction:ltr">
                                  <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>{{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>
</ng-template>