<div class="row">
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 position-r">
        <div class="row flex-items-xs-between flex-items-xs-top projectPos">
            <h2 class="header-title">{{'PROJECT.PROJECTS' | translate}}</h2>
            <div>
                <statistics-panel></statistics-panel>
            </div>
        </div>
        <div class="row flex-items-xs-between rightPos">
            <div class="display-flex">
                <div class="clr-select-wrapper">
                    <select (change)="doFilterProjects()" [(ngModel)]="selecteType">
                        <option value="0" [selected]="currentFilteredType === 0">{{projectTypes[0] | translate}}</option>
                        <option value="1">{{projectTypes[1] | translate}}</option>
                        <option value="2">{{projectTypes[2] | translate}}</option>
                    </select>
                </div>
                <hbr-filter [withDivider]="true" filterPlaceholder='{{"PROJECT.FILTER_PLACEHOLDER" | translate}}'
                    [currentValue]="projectName"></hbr-filter>
                <span class="refresh-btn" (click)="refresh()">
                    <clr-icon shape="refresh"></clr-icon>
                </span>
            </div>
        </div>
        <create-project (create)="createProject($event)" [quotaObj]="quotaObj" [isSystemAdmin]="isSystemAdmin"></create-project>
        <list-project (addProject)="openModal()"></list-project>
    </div>
</div>
