

    <ng-template [ngIf]="authSer.arabicTemplate" [ngIfElse]="englishTemplate">    
        <div class="servicesContent-w">
            <div class="container">
                <div class="row">
                    
                    <div class="col-12 col-md-4">
                        <div class="row">
                            <div class="col-12 col-md-6" *ngFor="let service of externalServices">
                                <div class="serviceItem-w">
                                    <a href="{{service.link}}" target="_blank">
                                            onExtraPage         <img src="{{authSer.pathImg + service.photo}}" />
                                        <p>{{service.name}}</p>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
    
                    <div class="col-12 col-md-8">
                        <div class="slider">
                            <ngb-carousel>
                                <ng-template *ngFor="let report of reportsData" ngbSlide>
                                    <img src="{{authSer.pathImg + report.photo}}" alt="Random first slide">
                                    <div class="carousel-caption">
                                    <p>{{report.description}} <a class="extra" (click)="onExtraPage(report.id)">المزيد</a></p>
                                    </div>
                                </ng-template>
                            </ngb-carousel>
                        </div>
                    </div>
    
                </div>
            </div>
        </div>
            
        <div class="eventPart-w">
            <div class="container">
                <div class="event">
                    <div class="row">
                        <div class="col-12 col-sm-12 ol-md-4">
                        </div>
                        <div class="col-12 col-sm-12 col-md-4">
                            <p class="now"> <img src="../../../assets/image/live.png" />  يعرض الأن :<span>{{live_event ? live_event.name : 'لايوجد حدث حاليا'}}</span></p>
                        </div>
                        <div class="col-12 col-sm-12 col-md-4">
                            <p class="next"> <img src="../../../assets/image/back.png"> يعرض لاحقاً :<span>{{next_lecture ? next_lecture.name : 'لايوجد حدث حاليا'}}</span></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
            
        <div class="contentsData-w">
            <div class="container">
                <div class="row">
                    <div class="col-12 col-sm-12 col-md-4">
                        <div class="joinUs-w">
                            <div class="joinHeader-w">
                                إنضم إلينا
                            </div>
                            <div class="joinHeading-w">
                                <h2>ترحيب بالإنضمام للمجمع الطبي</h2>
                            </div>
                            <div class="dataContent">
                                <div class="row">
                                    <div class="col-12 col-md-4">
                                        <div class="joinUs-photo">
                                            <img src="{{authSer.pathImg + joinUs.photo}}" /> 
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-8">
                                        <div class="profileData-w">
                                            <p>    الموظف :<span>{{joinUs.name}}</span></p>
                                            <p>   الإداره :<span>{{joinUs.adminstration_name ? joinUs.adminstration_name : 'لايوجد'}}</span></p>
                                            <p>   التاريخ :<span>{{joinUs.date}}</span></p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        </div>
                     <div class="col-12 col-md-8">
                        <div class="sharingEvent-w">
                            <div class="sharingHeader-w">
                                <h2>مشاركه اللحظات</h2>
                            </div>
                            <div class="row">
                                <div class="col-12 col-md-6">
                                    <div class="congeratolation">
                                        <h2>التهاني</h2>
                                    </div>
                                    <div class="content">
                                        <p>الموظف : <span>{{congratulations.created_by_name}}</span></p>
                                        <p class="event">{{congratulations.name}}</p>
                                        <p>التاريخ : <span>{{congratulations.event_time ? congratulations.event_time : 'لايوجد'}}</span></p>
                                    </div>
                                </div>
                                <div class="col-12 col-md-6">
                                    <div class="sadDead-w">
                                        <h2>التعازي</h2>
                                    </div>
                                    <div class="content">
                                        <p>الموظف : <span>{{condolences.created_by_name}}</span></p>
                                        <p class="event">{{condolences.name}}</p>
                                        <p>التاريخ : <span>{{condolences.event_time ? condolences.event_time : 'لايوجد'}}</span></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
            </div>
        </div>
            
        <div class="secondServices-w">
            <div class="container">
                <div class="row">
                    <div class="col-12 col-sm-6 col-md-4" *ngFor="let ser of internalServices">
                        <div class="contentSecondSer-w">
                            <div class="headerSer-w">
                                {{ser.name}}
                            </div>
                            <div class="contentSer">
                                <div class="row">
                                    <div class="col-6 col-md-3"  *ngFor="let field of ser['fields']">
                                        <div class="fieldData-w text-center">
                                            <img src="{{authSer.pathImg ? authSer.pathImg + field.photo : authSer.iconImg}}" />
                                            <p>{{field.name ? field.name : 'إضافه خدمه'}}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
            
        <div class="tabs">
            <div class="container">
                <div class="row">
                    <div class="col-12 col-md-8">
                        <div class="lastTab-w">
                            <div class="headerTab-w">
                                أخر التعاميم
                            </div>
                            <div class="menuTab-w">
                                <ul class="list-unstyled">
                                    <li (click)="onGetData(0)">التعاميم الداخليه</li>
                                    <li (click)="onGetData(1)">التعاميم الخارجيه</li>
                                    <li (click)="onGetData(2)">السياسات</li>
                                </ul>
                            </div>
                            <div class="menuTabContent-w">
                                <h2 class="text-center" *ngIf="checkShowData">لايوجد بيانات الأن لعرضها</h2>
                                <ol>
                                    <li *ngFor="let data of tabsData">{{data.name}}</li>
                                </ol>
                                <button class="btn btn-primary" (click)="onPageCir()" style="margin:0 auto; display:block; background-color:#bda380; width:150px">المزيد</button>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-md-4">
                        <div class="recods">
                            <div class="headerRecords-w">
                                إحصائيات عامه - إنجازات
                            </div>
                            <div class="recordsContent-w">
                                <ol>
                                    <li *ngFor="let achiev of achievements; let i = index" (click)="open(achiev,i)" style="cursor: pointer;">  
                                        <p>{{achiev.title}}</p>     
                                        <div *ngIf="i == expandedIndex">  
                                            <div class="collapse">  
                                                <div>  
                                                    <p>{{achiev.title}}</p>  
                                                    <p>{{achiev.descripton}}</p>  
                                                </div>  
                                            </div>  
                                        </div>                                  
                                    </li>
                                </ol>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </ng-template>


    <ng-template #englishTemplate>
        <div class="servicesContent-w">
            <div class="container">
                <div class="row">
                    
                    <div class="col-12 col-md-4">
                        <div class="row">
                            <div class="col-12 col-md-6" *ngFor="let service of externalServices">
                                <div class="serviceItem-w">
                                    <a href="{{service.link}}" target="_blank">
                                        <img src="{{authSer.pathImg + service.photo}}" />
                                        <p>{{service.name_en}}</p>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
    
                    <div class="col-12 col-md-8">
                        <div class="slider">
                            <ngb-carousel>
                                <ng-template *ngFor="let report of reportsData" ngbSlide>
                                    <img src="{{authSer.pathImg + report.photo}}" alt="Random first slide">
                                    <div class="carousel-caption">
                                    <p>{{report.description_en}} <a class="extra" (click)="onExtraPage(report.id)">المزيد</a></p>
                                    </div>
                                </ng-template>
                            </ngb-carousel>
                        </div>
                    </div>
    
                </div>
            </div>
        </div>
    
        <div class="eventPart-w hide">
            <div class="container">
                <div class="event">
                    <div class="row">
                        <div class="col-12 col-sm-12 ol-md-4">
                        </div>
                        <div class="col-12 col-sm-12 col-md-4">
                            <p class="now"> <img src="../../../assets/image/live.png" />   Live Now :<span>{{live_event ? live_event.name : ' now event now '}}</span></p>
                        </div>
                        <div class="col-12 col-sm-12 col-md-4">
                            <p class="next"> <img src="../../../assets/image/back.png"> Soon :<span>{{next_lecture ? next_lecture.name : 'now event now'}}</span></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    
        <div class="contentsData-w">
            <div class="container">
                <div class="row">
                    <div class="col-12 col-sm-12 col-md-4">
                        <div class="joinUs-w"  [className]=" arabicTemplate ? '' : 'joinUsEn-w' ">
                            <div class="joinHeader-w">
                                 Join Us
                            </div>
                            <div class="joinHeading-w">
                                <h2>Welcome to join the medical center</h2>
                            </div>
                            <div class="dataContent">
                                <div class="row">
                                    <div class="col-12 col-md-4">
                                        <div class="joinUs-photo">
                                            <img src="{{authSer.pathImg + joinUs.photo}}" /> 
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-8">
                                        <div class="profileData-w">
                                            <p> Employee : <span>{{joinUs.name_en}}</span></p>
                                            <p> Administration : <span>{{joinUs.adminstration_name_en ? joinUs.adminstration_name_en : 'not found'}}</span></p>
                                            <p> Date : <span>{{joinUs.date ? joinUs.date : 'not found'}}</span></p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                     </div>
                     <div class="col-12 col-md-8">
                        <div class="sharingEvent-w">
                            <div class="sharingHeader-w">
                                <h2>Share moments</h2>
                            </div>
                            <div class="row">
                                <div class="col-12 col-md-6">
                                    <div class="congeratolation">
                                        <h2>Congratulations</h2>
                                    </div>
                                    <div class="content">
                                        <p>Employee : <span>{{congratulations.created_by_name}}</span></p>
                                        <p class="event">{{congratulations.name_en}}</p>
                                        <p>Date : <span>{{congratulations.event_time ? congratulations.event_time : 'not found'}}</span></p>
                                    </div>
                                </div>
                                <div class="col-12 col-md-6">
                                    <div class="sadDead-w">
                                        <h2>Condolences</h2>
                                    </div>
                                    <div class="content">
                                        <p>Empolyee : <span>{{condolences.created_by_name}}</span></p>
                                        <p class="event">{{condolences.name_en}}</p>
                                        <p>Date : <span>{{condolences.event_time ? condolences.event_time : 'not found'}}</span></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                     </div>
                </div>
               
            </div>
        </div>
    
        <div class="secondServices-w">
            <div class="container">
                <div class="row">
                    <div class="col-12 col-sm-6 col-md-4" *ngFor="let ser of internalServices">
                        <div class="contentSecondSer-w">
                            <div class="headerSer-w">
                                {{ser.name_en}}
                            </div>
                            <div class="contentSer">
                                <div class="row">
                                    <div class="col-6 col-md-3"  *ngFor="let field of ser['fields']">
                                        <div class="fieldData-w text-center">
                                            <img src="{{authSer.pathImg ? authSer.pathImg + field.photo : authSer.iconImg}}" />
                                            <p>{{field.name_en ? field.name_en : 'Add Service'}}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    
        <div class="tabs">
            <div class="container">
                <div class="row">
                    <div class="col-12 col-md-8">
                        <div class="lastTab-w">
                            <div class="headerTab-w">
                                Latest Circulars
                            </div>
                            <div class="menuTab-w">
                                <ul class="list-unstyled">
                                    <li (click)="onGetData(0)"> Internal Circulars</li>
                                    <li (click)="onGetData(1)">External Circulars</li>
                                    <li (click)="onGetData(2)">Policies</li>
                                </ul>
                            </div>
                            <div class="menuTabContent-w">
                                <h2 class="text-center" *ngIf="checkShowData"> no data to show , now </h2>
                                <ol [className]=" arabicTemplate ? '' : 'achievementsLang-w' ">
                                    <li *ngFor="let data of tabsData">{{data.name_en}}</li>
                                </ol>
                                <button class="btn btn-primary" (click)="onPageCir()" style="margin:0 auto; display:block; background-color:#bda380; width:150px">more</button>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-md-4">
                        <div class="recods">
                            <div class="headerRecords-w">
                                General Statistics - Achievements
                            </div>
                            <div class="recordsContent-w">
                                <ol [className]=" arabicTemplate ? '' : 'achievementsLang-w' ">
                                    <li *ngFor="let achiev of achievements; let i = index" (click)="open(achiev,i)" style="cursor: pointer;">  
                                        <p>{{achiev.title_en}}</p>     
                                        <div *ngIf="i == expandedIndex">  
                                            <div class="collapse">  
                                                <div>  
                                                    <p>{{achiev.title_en}}</p>  
                                                    <p>{{achiev.descripton_en}}</p>  
                                                </div>  
                                            </div>  
                                        </div>                                  
                                    </li>
                                </ol>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </ng-template>

    