<ng-container *ngIf="!keyboardOpened">
    <div [ngClass]="showClass" *ngIf="show">
        <!-- home  button-->
        <div [ngClass]=" active === 'home'? 'tab-button tab-button-selected':'tab-button'" (click)="onClick('home')">
            <div [ngClass]="active === 'home'? 'icon home-selected' : 'icon home-icon'  "></div>
            <p [ngClass]="active === 'home'?  'title title-selected': 'title'">{{ 'home,home' | translate }}</p>
        </div>

        <!-- family   button-->
        <div [ngClass]=" active === 'family'? 'tab-button tab-button-selected':'tab-button'"
            (click)="onClick('family')">
            <div [ngClass]="active === 'family'? 'icon family-selected' : 'icon family-icon'  "></div>
            <p [ngClass]="active === 'family'?  'title title-selected': 'title'">{{ 'family,family' | translate}}</p>
        </div>


        <!-- space area -->
        <div class="medial-file-temp-space"></div>
        <!-- Medical File   button-->
        <ng-container *ngIf="showMedicalFile">
            <div [ngClass]=" active === 'file'? 'medical-button  medical-button-selected':'medical-button fadeInSlow'"
                (click)="onClick('file')">
                <div [ngClass]="active === 'file'? 'icon file-icon' : 'icon file-selected'  "></div>
                <p [ngClass]="active === 'file'?  'title title-selected': 'title'">
                    {{ 'eservices,medical-file' | translate}}
                </p>
            </div>
        </ng-container>


        <!-- notifications   button-->
        <div [ngClass]=" active === 'notifications'? 'tab-button tab-button-selected':'tab-button'"
            (click)="onClick('notifications')">
            <div [ngClass]="active === 'notifications'? 'icon notifications-selected' : 'icon notifications-icon'  ">
            </div>
            <p [ngClass]="active === 'notifications'?  'title title-selected': 'title'">
                {{ 'notifications,notifications' | translate}}</p>
            <div *ngIf="notificationsCount" class="notifications-count">{{ notificationsCount}}</div>
        </div>


        <!-- language buttons-->
        <div class="tab-button " (click)="onClick('language')">
            <div [ngClass]="currentLanguage === 'en' ?  'icon ar-icon' : 'icon en-icon' "></div>
            <p *ngIf="currentLanguage === 'en'" class="title">{{ 'general,arabic-change' | translate}}</p>
            <p *ngIf="currentLanguage === 'ar'" class="title">{{ 'general,english-change' | translate}}</p>
        </div>
    </div>
</ng-container>