<ng-template [ngIf]="authSer.arabicTemplate" [ngIfElse]="englishTemplate">
    <div class="externalPage-w"><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
        <div class="container">
            <div class="row">
                <div class="col-5 col-sm-5 col-md-4 col-lg-4"  style="margin:0;padding:0">
                    <div class="notificationDiv-w">
                        <ul class="list-unstyled notificationList-w" *ngIf="!authSer.isAuthenticated()">
                            <li class="profileData-w">
                                <div class="dropdown">
                                    <button class="btn dropdown-toggle buttonW" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        <img src="{{authSer.dataLoginUser['photo'] ? authSer.pathImg + authSer.dataLoginUser['photo'] : authSer.imgSrc}}" title="imageProfile" alt="" />
                                        {{ authSer.dataLoginUser['name'] }} 
                                    </button>
                                    <div class="dropdown-menu" style="text-align:right" aria-labelledby="dropdownMenuButton"> 
                                        <button class="dropdown-item" style="cursor: pointer;" >
                                        <i class="fas fa-bell"></i>
                                        <span>الاشعارات</span>
                                        </button>
                                        <button class="dropdown-item" style="cursor: pointer;" (click)="onGetProfile()">
                                            <i class="fas fa-user-alt"></i>
                                            <span>ملفي</span>
                                        </button>
                                        <button class="dropdown-item" style="cursor: pointer;" >
                                        <i class="fas fa-sticky-note"></i>
                                        <span>ملاحظاتي</span>
                                        </button>
                                        <button class="dropdown-item" style="cursor: pointer;" >
                                        <i class="fas fa-tasks"></i>
                                        <span>مهامي</span>
                                        </button>
                                        <button class="dropdown-item" style="cursor: pointer;" (click)="onDashBoard()">
                                            <i class="fas fa-solar-panel"></i>
                                            <span>لوحة التحكم</span>
                                        </button>
                                        <button class="dropdown-item" style="cursor: pointer;color: #da0b0b !important;background-color: #f3f3f3;border-radius: 4px;" (click)="onLogout()">
                                            <i class="fas fa-sign-out-alt" style="color: #da0b0b !important;"></i>
                                            <span>خروج</span>
                                        </button>
                                    </div>
                                </div>   
                            </li>
                        </ul>
                    </div>
                    <p *ngIf="authSer.isAuthenticated()" class="login"><a (click)="onLogin()">تسجيل دخول </a></p>
                </div>
                <div class="col-5 col-sm-5 col-md-4 col-lg-4 backgroundXS">
                    <div class="form-group" style="display:flex;text-align:center; justify-content:center">
                        <input type="text" placeholder="أبحث"/><button class="searchBtn" style="cursor: pointer;"><i class="fas fa-search"></i></button>
                    </div>
                </div>
                <div class="col-2 col-sm-2 col-md-4 col-lg-4 d-none d-sm-none d-md-block d-lg-block dateClass">
                    <p class="dateW"> {{currentDate}}</p>
                    <span class="ar" (click)="authSer.onLanguageContent('ar')" [ngClass]="{'activeLanguage': authSer.arabicLanguage}" *ngIf="authSer.showArabicIcon">Aa</span>
                    <span class="en" (click)="authSer.onLanguageContent('en')" [ngClass]="{'activeLanguage': authSer.englishLanguage}" *ngIf="authSer.showEnglishIcon">En</span>
                </div>
                <div class="col-2 col-sm-2 col-md-4 col-lg-4 d-md-none d-lg-none">
                    <span class="ar" (click)="authSer.onLanguageContent('ar')" [ngClass]="{'activeLanguage':authSer.arabicLanguage}" *ngIf="authSer.showArabicIcon">Aa</span>
                    <span class="en" (click)="authSer.onLanguageContent('en')" [ngClass]="{'activeLanguage': authSer.englishLanguage}" *ngIf="authSer.showEnglishIcon">En</span>
                </div>
            </div>
        </div>
    </div>

    <div class="logoHeader-w">
        <div class="container">
            <div class="row">
                <div class="col-12 col-sm-12 col-md-4 col-lg-4">
                    <div class="rightLogo-w">
                        <img src="../../assets/image/logo1.png" alt="logo" title="logo" />
                    </div>
                </div>
                <div class="col-12 col-sm-12 col-md-4 col-lg-4">
                <div class="center text-center">
                    <h2>المنصه الخارجيه</h2>
                    <p>مجمع الملك فيصل الطبي بصحه الطائف</p>
                </div>
                </div>
                <div class="col-12 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" style="padding:0">
                    <nav class="navbar navbar-expand-lg navbar-light bg-light">
                        
                        <!-- <a class="navbar-brand" href="#">Navbar</a> -->
                        <button class="navbar-toggler buttonMobileHeader-w" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                            <span class="navbar-toggler-icon"></span>
                        </button>
                        
                        <div class="collapse navbar-collapse" id="navbarSupportedContent">
                            <ul class="navbar-nav mr-auto menuHeader-w">
                                <li class="nav-item homeLinkMobile-w" (click)="goToHome()" style="cursor: pointer;" [ngClass]="{'homeExternalActive': authSer.homeActivate}"> 
                                    <a class="nav-link">
                                        <i class="fa fa-home" style="font-size: 30px;margin:-7px 5px; color:#85837f"></i> الرئيسيه
                                    </a>
                                </li>

                                <li class="nav-item" *ngFor="let menu of externalService.headerMenus" style="position: relative;" [ngClass]="menu.active == 0 ? '' : 'activeExternalLink' ">
                                    <a class="nav-link" [ngClass]="{ 'dropdown-toggle' : menu['childs'].length > 0 }" href="{{menu.link}}" id="navbarDropdown" role="button" [attr.data-toggle]=" menu['childs'].length > 0 ? 'dropdown' : '' " aria-haspopup="true" aria-expanded="false">
                                        {{menu.name}} <img src="{{authSer.pathImg + menu.photo}}" />
                                    </a>
                                    <div class="dropdown-menu" aria-labelledby="navbarDropdown" *ngIf="menu['childs'].length > 0">
                                        <a class="dropdown-item" href="{{child.link}}" *ngFor="let child of menu['childs']">{{child.name}}</a>
                                    </div>
                                </li>
                            </ul>
                        </div>

                    </nav>
                </div>
            </div>
        </div>
    </div>
</ng-template>



<ng-template #englishTemplate>
    <div class="externalPage-w">
        <div class="container">
            <div class="row">
                <div class="col-5 col-sm-5 col-md-4 col-lg-4"  style="margin:0;padding:0">
                    <div class="notificationDiv-w">
                        <ul class="list-unstyled notificationList-w" *ngIf="!authSer.isAuthenticated()">
                            <li class="profileData-w">
                                <div class="dropdown">
                                    <button class="btn dropdown-toggle buttonW" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        <img src="{{authSer.dataLoginUser['photo'] ? authSer.pathImg + authSer.dataLoginUser['photo'] : authSer.imgSrc}}" title="imageProfile" alt="" />
                                        {{ authSer.dataLoginUser['name'] }}
                                    </button>
                                    <div class="dropdown-menu" style="text-align:right" aria-labelledby="dropdownMenuButton"> 
                                        <button class="dropdown-item" style="cursor: pointer;" >
                                        <i class="fas fa-bell"></i>
                                        <span>Notification</span>
                                        </button>
                                        <button class="dropdown-item" style="cursor: pointer;" (click)="onGetProfile()">
                                            <i class="fas fa-user-alt"></i>
                                            <span>Profile</span>
                                        </button>
                                        <button class="dropdown-item" style="cursor: pointer;" >
                                        <i class="fas fa-sticky-note"></i>
                                        <span>Notes</span>
                                        </button>
                                        <button class="dropdown-item" style="cursor: pointer;" >
                                        <i class="fas fa-tasks"></i>
                                        <span>Tasks</span>
                                        </button>
                                        <button class="dropdown-item" style="cursor: pointer;" (click)="onDashBoard()">
                                            <i class="fas fa-solar-panel"></i>
                                            <span>DashBoard</span>
                                        </button>
                                        <button class="dropdown-item" style="cursor: pointer;color: #da0b0b !important;background-color: #f3f3f3;border-radius: 4px;" (click)="onLogout()">
                                            <i class="fas fa-sign-out-alt" style="color: #da0b0b !important;"></i>
                                            <span>Log Out</span>
                                        </button>
                                    </div>
                                </div>   
                            </li>
                        </ul>
                    </div>
                    <p *ngIf="authSer.isAuthenticated()" class="login"><a (click)="onLogin()">LOG IN</a></p>
                </div>
                <div class="col-5 col-sm-5 col-md-4 col-lg-4 backgroundXS">
                    <div class="form-group" style="display:flex;text-align:center; justify-content:center">
                        <input type="text" placeholder="search" style=" text-align:left"/><button class="searchBtn" style="cursor: pointer;"><i class="fas fa-search"></i></button>
                    </div>
                </div>
                <div class="col-2 col-sm-2 col-md-4 col-lg-4  d-none d-sm-none d-md-block d-lg-block dateClass">
                    <p class="dateW"> {{currentEnglishDate | date:'fullDate'}} </p>
                    <span class="ar" (click)="authSer.onLanguageContent('ar')" [ngClass]="{'activeLanguage':authSer. arabicLanguage}" *ngIf="authSer.showArabicIcon">عربي</span>
                    <span class="en" (click)="authSer.onLanguageContent('en')" [ngClass]="{'activeLanguage': authSer.englishLanguage}" *ngIf="authSer.showEnglishIcon">En</span>
                </div>
                <div class="col-2 col-sm-2 col-md-4 col-lg-4 d-md-none d-lg-none">
                    <span class="ar" (click)="authSer.onLanguageContent('ar')" [ngClass]="{'activeLanguage':authSer. arabicLanguage}" *ngIf="authSer.showArabicIcon">عربي</span>
                    <span class="en" (click)="authSer.onLanguageContent('en')" [ngClass]="{'activeLanguage': authSer.englishLanguage}" *ngIf="authSer.showEnglishIcon">En</span>
                </div>
            </div>
        </div>
    </div>

    <div class="logoHeader-w">
        <div class="container">
            <div class="row">
                <div class="col-12 col-sm-12 col-md-4 col-lg-4">
                    <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> External 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">
                    <nav class="navbar navbar-expand-lg navbar-light bg-light">
                        <!-- <a class="navbar-brand" href="#">Navbar</a> -->
                        <button class="navbar-toggler buttonMobileHeader-w" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                            <span class="navbar-toggler-icon"></span>
                        </button>
                    
                        <div class="collapse navbar-collapse" id="navbarSupportedContent">
                            <ul class="navbar-nav mr-auto menuHeaderEn-w">
                                <li class="nav-item" (click)="goToHome()" style="cursor: pointer;" [ngClass]="{'homeExternalActive': authSer.homeActivate}"> 
                                    <a class="nav-link">
                                        <i class="fa fa-home" style="font-size: 35px;margin:0 5px; margin-top:-16px; color:#85837f"></i> Home
                                    </a>
                                </li>
                                <li class="nav-item" *ngFor="let menu of externalService.headerMenus" style="position: relative;" [ngClass]="menu.active == 0 ? '' : 'activeExternalLink' ">
                                    <a class="nav-link" [ngClass]="{ 'dropdown-toggle' : menu['childs'].length > 0 }" href="{{menu.link}}" id="navbarDropdown" role="button" [attr.data-toggle]=" menu['childs'].length > 0 ? 'dropdown' : '' " aria-haspopup="true" aria-expanded="false">
                                        {{menu.name_en}} <img src="{{authSer.pathImg + menu.photo}}" /> 
                                    </a>
                                    <div class="dropdown-menu" aria-labelledby="navbarDropdown" *ngIf="menu['childs'].length > 0">
                                        <a class="dropdown-item" href="{{child.link}}" *ngFor="let child of menu['childs']">{{child.name_en}}</a>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </nav>
                </div>
            </div>
        </div>
    </div>
</ng-template>
