kfmc_website/src/app/Internal-Page/internal-page-header/internal-page-header.component.html

    <ng-template [ngIf]="authSer.arabicTemplate" [ngIfElse]="englishTemplate">

      <div class="internalHeader-w">
            <div class="container">
                <div class="row">
                    <div class="col-12 col-sm-12 col-md-4 col-lg-4"  style="margin:0;padding:0">
                        <ul class="list-unstyled notificationList-w" *ngIf="authSer.isAuthenticated()">
                            <li class="profileData-w">
                                <div class="btn-group" ngbDropdown role="group" aria-label="Button group with nested dropdown">
                                    <button class="buttonW" ngbDropdownToggle><img src="{{authSer.dataLoginUser['photo'] ? authSer.pathImg + authSer.dataLoginUser['photo'] : authSer.imgSrc}}" title="imageProfile" /> {{authSer.dataLoginUser['name']}} </button>
                                    <div class="dropdown-menu" style="text-align:right" ngbDropdownMenu>
                                        <button class="dropdown-item" style="cursor: pointer;" (click)="onGetProfile()">صفحتي</button>
                                        <button class="dropdown-item" style="cursor: pointer;" (click)="onDashBoard()"> لوحه التحكم</button>
                                        <button class="dropdown-item" style="cursor: pointer;" (click)="onLogout()">تسجيل الدخول</button>
                                    </div>
                                </div>
                            </li>
                            <li><span><i class="fas fa-comments"></i></span></li>
                            <li><span><i class="fas fa-bell"></i></span></li>
                        </ul>
                        <p *ngIf="!authSer.isAuthenticated()" class="login" (click)="onLogin()"><a>LOG IN</a></p>
                    </div>
                    <div class="col-12 col-sm-12 col-md-4 col-lg-4 backgroundXS">
                        <div class="form-group" style="margin:10px 0;">
                            <input type="text" placeholder="أبحث" /><button class="searchBtn" style="cursor: pointer;"><i class="fas fa-search"></i></button>
                        </div>
                    </div>
                    <div class="col-6 col-sm-6 col-md-4 col-lg-4 hidden-xs hidden-sm">
                       <p style="margin:15px 0; display:inline-block" class="dateW"> {{authSer.currentDate}} </p>
                       <span class="ar" (click)="authSer.onLanguageContent('ar')" [ngClass]="{'activeLanguage':authSer. arabicLanguage}">AR</span>
                       <span class="en" (click)="authSer.onLanguageContent('en')" [ngClass]="{'activeLanguage': authSer.englishLanguage}">EN</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="logoHeader-w">
            <div class="container">
                <div class="row">
                    <div class="col-6 col-sm-6 col-md-4 col-lg-4 hidden-xs">
                        <div class="rightLogo-w">
                            <img src="../../assets/image/logo1.png" alt="logo" title="logo" style="margin-right:15px"/>
                        </div>
                    </div>
                    <div class="col-12 col-sm-6 col-md-4 col-lg-4">
                    <div class="center text-center">
                        <h2>المنصه الداخليه</h2>
                        <p>مجمع الملك فيصل الطبي بصحه الطائف</p>
                    </div>
                    </div>
                    <div class="col-6 col-sm-6 col-md-4 col-lg-4 hidden-xs">
                    <div class="leftLogo-w">
                        <img src="../../assets/image/logo2.png" alt="logo" title="alt" />
                    </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="pagesHeader-w">
            <div class="container">
                <div class="row">
                    <div class="navbar">
                        <button style="cursor:pointer;" class="btn btn-secondary" (click)="goToHome()"><i class="fas fa-home"></i></button>
                        <div *ngFor="let parent of internalService.parentsPage; let i = index" class="dropdown">
                            <button class="dropbtn" *ngIf="parent['childs'].length > 0">
                                {{parent.name}}
                                <i class="fa fa-caret-down" *ngIf="parent['childs'].length > 0"></i>
                                </button>
                                <button class="dropbtn" *ngIf="parent['childs'].length == 0">
                                    <a [routerLink]="parent.link" style="text-decoration:none">{{parent.name}}</a>
                                    <i class="fa fa-caret-down"  *ngIf="parent['childs'].length > 0"></i>
                                </button>
                                <div class="dropdown-content" *ngIf="parent['childs'].length > 0">
                                <div class="row">
                                    <div *ngFor="let child of parent['childs']">
                                        <ul class="list-unstyled">
                                            <li>
                                                <a [routerLink]="child.link"> {{child.name}}</a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </ng-template>



    <ng-template #englishTemplate>

    <div class="internalHeader-w">
            <div class="container">
                <div class="row">
                    <div class="col-12 col-sm-12 col-md-4 col-lg-4"  style="margin:0;padding:0">
                        <ul class="list-unstyled notificationList-w" *ngIf="!authSer.isAuthenticated()">
                            <li class="profileData-w">
                                <div class="btn-group" ngbDropdown role="group" aria-label="Button group with nested dropdown">
                                    <button class="buttonW" ngbDropdownToggle><img src="{{authSer.dataLoginUser['photo'] ? authSer.pathImg + authSer.dataLoginUser['photo'] : authSer.imgSrc}}" title="imageProfile" /> {{authSer.dataLoginUser['name']}} </button>
                                    <div class="dropdown-menu" style="text-align:right" ngbDropdownMenu>
                                        <button class="dropdown-item" style="cursor: pointer;" (click)="onGetProfile()">صفحتي</button>
                                        <button class="dropdown-item" style="cursor: pointer;" (click)="onDashBoard()"> لوحه التحكم</button>
                                        <button class="dropdown-item" style="cursor: pointer;" (click)="onLogout()">تسجيل الدخول</button>
                                    </div>
                                </div>
                            </li>
                            <li><span><i class="fas fa-comments"></i></span></li>
                            <li><span><i class="fas fa-bell"></i></span></li>
                        </ul>
                        <p *ngIf="authSer.isAuthenticated()" class="login" (click)="onLogin()"><a>LOG IN</a></p>
                    </div>
                    <div class="col-12 col-sm-12 col-md-4 col-lg-4 backgroundXS">
                        <div class="form-group" style="margin:10px 0;">
                            <input type="text" placeholder="أبحث" /><button class="searchBtn" style="cursor: pointer;"><i class="fas fa-search"></i></button>
                        </div>
                    </div>
                    <div class="col-6 col-sm-6 col-md-4 col-lg-4 hidden-xs hidden-sm">
                       <p style="margin:15px 0; display:inline-block" class="dateW"> {{authSer.currentDate}} </p>
                       <span class="ar" (click)="authSer.onLanguageContent('ar')" [ngClass]="{'activeLanguage':authSer. arabicLanguage}">AR</span>
                       <span class="en" (click)="authSer.onLanguageContent('en')" [ngClass]="{'activeLanguage': authSer.englishLanguage}">EN</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="logoHeader-w">
            <div class="container">
                <div class="row">
                    <div class="col-6 col-sm-6 col-md-4 col-lg-4 hidden-xs">
                        <div class="rightLogo-w">
                            <img src="../../assets/image/logo1.png" alt="logo" title="logo" style="margin-right:15px"/>
                        </div>
                    </div>
                    <div class="col-12 col-sm-6 col-md-4 col-lg-4">
                    <div class="center text-center">
                        <h2> Internal Page</h2>
                        <p>King Faisal Medical Complex in Taif</p>
                    </div>
                    </div>
                    <div class="col-6 col-sm-6 col-md-4 col-lg-4 hidden-xs">
                    <div class="leftLogo-w">
                        <img src="../../assets/image/logo2.png" alt="logo" title="alt" />
                    </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="pagesHeader-w">
            <div class="container">
                <div class="row">
                    <div class="navbar">
                        <button style="cursor:pointer" class="btn btn-secondary" (click)="goToHome()"><i class="fas fa-home"></i></button>
                        <div *ngFor="let parent of internalService.parentsPage; let i = index" class="dropdown">
                            <button class="dropbtn" *ngIf="parent['childs'].length > 0">
                                {{parent.name_en}}
                                <i class="fa fa-caret-down" *ngIf="parent['childs'].length > 0"></i>
                                </button>
                                <button class="dropbtn" *ngIf="parent['childs'].length == 0">
                                    <a href="{{parent.link}}" style="text-decoration:none">{{parent.name_en}}</a>
                                    <i class="fa fa-caret-down"  *ngIf="parent['childs'].length > 0"></i>
                                </button>
                                <div class="dropdown-content" *ngIf="parent['childs'].length > 0">
                                <ul class="list-unstyled">
                                    <li  *ngFor="let child of parent['childs']" [className]=" arabicTemplate ? '' : 'menuEnglish' ">
                                        <a href="{{child.link}}" target="_blank"> {{child.name_en}}</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </ng-template>