<header>
    <div class="container-fluid">
        <div class="row" style="background-color: #ffffff;">
            <div class="site-logo">
                <a [routerLink]="['admin/iframe-page', homeURL]"><img src="assets/images/headerlogo.jpg"></a>
            </div>
            <div class="search-bar">
                <div class="header-select" *ngIf="companyUser">
                    <select2 [data]="hiringTeams" [value]="selectedTeamID" (valueChanged)="selectedTeamChanged($event)"
                        [options]="select2Options">
                    </select2>
                </div>
            </div>
            <div class="fl-right">
                <div class="notification-bar">
                    <div class="tack-center" dropdown>
                        <a dropdownToggle href="javascript:void(0)">
                            <!--TODO: enable when there are notifications-->
                            <!--<span class="notification-label"></span>-->
                            <img src="assets/images/notification-icon.svg">
                        </a>
                        <ul class="profile-dropdown dropdown-menu" *dropdownMenu>
                            <span class="arrow-up"></span>
                            <li><a href="javascript:void(0)">No new notifications</a></li>
                        </ul>
                    </div>
                </div>
                <div class="user-profile-dropdown" dropdown *ngIf="userMenu">
                    <a class="user-name" dropdownToggle href="javascript:void(0)">
                        {{ userMenu.label }}
                        <img src="assets/images/arrow.svg" />
                    </a>
                    <ul class="profile-dropdown dropdown-menu" *dropdownMenu>
                        <span class="arrow-up"></span>
                        <li *ngFor="let menuItem of userMenu.children; let i = index">
                            <a [href]="menuItem.url" *ngIf="menuItem.url">
                                {{ menuItem.label }}
                            </a>
                            <a [routerLink]="menuItem.routerLink" *ngIf="menuItem.routerLink">
                                {{ menuItem.label }}
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="create-job-btn">
                    <a *ngIf="selectedTeamID && companyUser"  [ngClass]="{'disabled': createJobDisabled}" href="javascript:void(0)"
                        (click)="createJobClicked()">
                        Create Job
                    </a>
                </div>
            </div>
        </div>
    </div>
</header>
<ng-template #reachedCapModal>
    <div class="modal-body main-welcome-popup">
        <h2>Your account reached monthly cap!</h2>
        <p *ngIf="isStandardUser">Your account has reached the monthly cap for number of jobs, contact your Administrator to have the Cap increased.</p>
        <ng-container *ngIf="!isStandardUser">
            <p>Your account has reached the monthly cap for number of jobs. Please make a request by contacting us to make changes.</p>
            <div class="create-y-f-job">
                <a href=" https://www.matchd.com/support/" target="_blank">Make a Request</a>
            </div>
        </ng-container>
    </div>          
</ng-template>
<ng-template #trialNotAllowedModal>
    <div class="modal-body main-welcome-popup">
        <h2>Your account is on trial!</h2>
        <p *ngIf="isStandardUser">Only one Job can be created during the Trial. Please contact your Administrator to set up billing.</p>
        <ng-container *ngIf="!isStandardUser">
            <p>Only one Job can be created during the Trial. {{ !selectedTeam || !selectedTeam.CardID ? "Enter Billing Method and" : "" }} Select Plan to enable creation of additional jobs.</p>
            <div class="create-y-f-job">
                <a [routerLink]="['admin/iframe-page', redirectURL]">{{ !selectedTeam || !selectedTeam.CardID ? "Billing" : "Payment Plan" }}</a>
            </div>
        </ng-container>
    </div>
</ng-template>
<div class="container-fluid">
    <div class="row content">
        <div class="sidebar-menu fixed">
            <div class="main-menu" *ngIf="sidebarMenu">
                <ul>
                    <ng-container *ngFor="let menuItem of sidebarMenu.children; let i = index">
                        <span class="brack-line" *ngIf="menuItem.brakeLine"></span>
                        <li [class]="menuItem.disabled">
                            <a [class]="menuItem.linkCSSClass" [routerLink]="menuItem.routerLink">
                                <span [class]="menuItem.iconCSSClass"></span>
                                {{ menuItem.title }}
                            </a>
                        </li>
                    </ng-container>
                </ul>
            </div>
        </div>
        <p-growl [value]="successMsgs" [life]="3000"></p-growl>
        <router-outlet (activate)="onRouteUpdate()"></router-outlet>
    </div>
</div>
<p-progressSpinner animationDuration="1s" *ngIf="showLoader"></p-progressSpinner>