<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>
                    <!-- <%
                        if(selectedTeam != null && companyUser != null)
                        {
                            Article jobsArticle         =   WebUtils.getArticleByShortCut(objTran, WebUtils.JOBS);
                            boolean onJob           =   WebUtils.onJobPages(renderMode);
                            boolean hasBillingSetup =   selectedTeam.hasBillingSetup();
                            boolean canCreateJob    =   selectedTeam.allowJobCreation();
                            boolean trialNotAllowed =   selectedTeam.trialJobNotAllowed();
                    %>
                            <a href="<%= onJob || !canCreateJob ?  "javascript:void(0);": jobsArticle.getLink(request, CollectionUtils.mapEntry("cms.rm", WebUtils.START_JOB).toMap()) %>" class="<%= onJob || !hasBillingSetup ? "disabled" : ""%>" onclick="<%= canCreateJob ? "" : trialNotAllowed ? "trialNotAllowed()" : "showReachedCap()"%>">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>
<!-- <%
        if(selectedTeam != null && companyUser != null)
        {
    %>
            <div class="modal fade" id="reachedCap" role="dialog">
                <div class="modal-dialog welcome-pop-top">
                    <div class="modal-body main-welcome-popup">
                        <h2>Your account reached monthly cap!</h2>
                        <%
                            if(companyUser.getRoleForHiringTeam(selectedTeam) == RoleType.STANDARD)
                            {
                        %>                            
                                <p>Your account has reached the monthly cap for number of jobs, contact your Administrator to have the Cap increased.</p>
                        <%
                            }
                            else
                            {
                        %>                            
                                <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>
                        <%
                            }
                        %>
                    </div>          
                </div>
            </div>
            <oneit:form name="popupForm" method="post"    enctype="multipart/form-data">
                <div class="modal fade" id="trialNotAllowed" role="dialog">
                    <div class="modal-dialog welcome-pop-top">
                        <div class="modal-body main-welcome-popup">
                            <h2>Your account is on trial!</h2>
                            <%
                                if(companyUser.getRoleForHiringTeam(selectedTeam) == RoleType.STANDARD)
                                {
                            %>                            
                                    <p>Only one Job can be created during the Trial. Please contact your Administrator to set up billing</p>
                            <%
                                }
                                else
                                {
                            %>                            
                                    <p>Only one Job can be created during the Trial. <%= selectedTeam.getCardID() == null ? "Enter Billing Method and" : "" %> Select Plan to enable creation of additional jobs.</p>
                                    <div class="create-y-f-job">
                                        <oneit:button   value=" "    name="gotoPage"    skin="link"
                                                        requestAttribs="<%= CollectionUtils.mapEntry("nextPage", companyArticle.getLink(request, CollectionUtils.mapEntry("cms.rm", selectedTeam.getCardID() == null ? "Billing" : "ManagePlan").toMap()))
                                                                                            .mapEntry("procParams", CollectionUtils.mapEntry("HiringTeam", selectedTeam).toMap())
                                                                                            .toMap() %>">
                                            Setup <%= selectedTeam.getCardID() == null ? "Billing" : "Payment Plan" %>
                                        </oneit:button>
                                    </div>
                            <%
                                }
                            %>
                        </div>          
                    </div>
                </div>
            </oneit:form>
    <%
        }
    %>                
    
    <script type="text/javascript">
        $(document).ready(function()
        {
            if($('.dashboard-content-area').height() < $(window).height())
            {
                ($('.dashboard-content-area').hasClass('second-part') ) ? 
                $('.dashboard-content-area').height($(window).height() - $('.dashboard-content-area').outerHeight() + $('.dashboard-content-area').height() - 65) : 
                $('.second-part').innerHeight( $(window).height() - $('.dashboard-first-part').outerHeight() - 65 )
            }
        });
    </script> 
<%
}
%> -->

<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>
        <router-outlet></router-outlet>
    </div>
</div>
<p-progressSpinner animationDuration="1s" *ngIf="showLoader"></p-progressSpinner>