<div class="bootstrap-wrapper wt-webpart-w365cm wt-webpart-w365cm-overview" data-handleOverflow="false">
    <div class="w365cm container-fluid">
        <div class="row visible-xs visible-sm">
            <div class="col-xs-6">
                <div class="overview-header">
                    {{'Events' | translate}}
                </div>
            </div>
            <div class="col-xs-6">
                <div ng-if="canCreateSite" class="canCreateSite">
                    <button type="button" ng-click="openNewSitePopup()" class="btn btn-primary" title="{{'Add Event' | translate}}">
                        <i class="ms-Icon ms-Icon--Add"></i>
                        {{'Add Event' | translate}}
                    </button>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="event-overview-container">
                <!--left menu start-->
                <div class="event-overview-sidebar sidebar-nav">
                    <div class="row visible-xs visible-sm">
                        <div class="col-sm-12">
                            <div class="input-group">
                                <span class="input-group-addon">
                                    <i class="ms-Icon ms-Icon--Search flip-horizontal"></i>
                                </span>
                                <input type="text" class="form-control" ng-model="searchText" ng-model-options="{ updateOn: 'default blur', debounce: { 'default': 500, 'blur': 0 } }" autocomplete="off" placeholder="{{'Search course' | translate}}" />
                            </div>
                        </div>
                    </div>
                    <div class="navbar navbar-default topmenu-collapse" role="navigation">
                        <div class="navbar-header">
                            <div class="row">
                                <div class="col-xs-6">
                                    <button type="button" class="navbar-toggle collapsed top-menu-button" data-toggle="collapse" ng-click="collapseOtherMenues()" data-target=".sidebar-navbar-collapse">
                                        {{'General Filters' | translate}}
                                    </button>
                                </div>
                                <div class="col-xs-6">
                                    <button type="button" class="navbar-toggle collapsed top-menu-button" data-toggle="collapse" ng-click="collapseOtherMenues()" data-target="#w365cm-navbar-collapse-view">
                                        {{'Event History' | translate}}
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="event-overview-filters w365cm-collapse navbar-collapse collapse sidebar-navbar-collapse">
                            <span class="leftmenu-header hidden-xs hidden-sm">{{'Filter' | translate}}</span>
                            <span class="clear-btn pull-right" ng-click="clearFilters(); refreshItems();" role="button">
                                {{'Reset' | translate}} <i class="ms-Icon ms-Icon--ClearFilter"></i>
                            </span>

                            <!-- filter form -->
                            <div wizdom-include='webpartProperties.filtersTemplateUrl' class="filterForm">
                            </div>

                            <span class="leftmenu-header hidden-xs hidden-sm sort">{{'Sorting' | translate}}</span>

                            <!-- Sorting form -->
                            <div wizdom-include='webpartProperties.sortingTemplateUrl' class="filterForm">
                            </div>

                            <button type="button" class="collapse-toggle pull-right visible-xs visible-sm" ng-click="collapseOtherMenues();"><i class="ms-Icon ms-Icon--ChevronUp"></i></button>
                        </div>
                    </div>
                </div>
                <!--left menu end-->
                <!--right content start-->
                <div class="event-overview-content">
                    <div class="container-fluid overview-content">
                        <div class="row">
                            <div class="col-md-6 hidden-sm hidden-xs">
                                <div class="overview-header">
                                    {{'Events' | translate}}
                                </div>
                            </div>
                            <div class="col-md-6 text-right">
                                <!--new pagination for backend filtering-->
                                <pagination ng-if="!LoadCourseModuleWithoutFiltering"
                                            total-items="totalCount"
                                            ng-model="currentPageObject.value"
                                            ng-hide="webpartProperties.sitesPerPage >= totalCount"
                                            items-per-page="webpartProperties.sitesPerPage"
                                            max-size="5"
                                            boundary-links="false"
                                            previous-text="&lsaquo;"
                                            next-text="&rsaquo;"
                                            first-text="&laquo;"
                                            last-text="&raquo;"></pagination>
                                <!--old pagination for frontend filering-->
                                <pagination ng-if="LoadCourseModuleWithoutFiltering"
                                            total-items="(sites | filter:filterUserSites | filter:filterRoles | wizdom365CourseManagementFilterFilter:filterObjects | wizdom365CourseManagementSearchFilter:searchText).length"
                                            ng-model="currentPageObject.value"
                                            ng-hide="webpartProperties.sitesPerPage >= (sites | filter:filterUserSites | filter:filterRoles | wizdom365CourseManagementFilterFilter:filterObjects | wizdom365CourseManagementSearchFilter:searchText).length"
                                            items-per-page="webpartProperties.sitesPerPage"
                                            max-size="5"
                                            boundary-links="false"
                                            previous-text="&lsaquo;"
                                            next-text="&rsaquo;"
                                            first-text="&laquo;"
                                            last-text="&raquo;"></pagination>
                            </div>
                        </div>
                        <!--top menu start-->
                        <div class="row">
                            <div ng-show="dataReady" class="navbar navbar-default topmenu">
                                <!-- top nav start -->
                                <div class="collapse navbar-collapse w365cm-collapse" id="w365cm-navbar-collapse-view">
                                    <ul class="nav navbar-nav nav-left nav-tabs">
                                        <li class="user-menut-item" ng-class="isFilterSelected(userFilters.upcoming) ? 'active' : ''">
                                            <a ng-click="showUpcoming($event); refreshItems();" role="presentation">
                                                <i class="ms-Icon ms-Icon--EventDate"></i>{{'Upcoming' | translate}}
                                            </a>
                                        </li>
                                        <li class="user-menut-item" ng-class="isFilterSelected(userFilters.past) ? 'active' : ''">
                                            <a ng-click="showPasts($event); refreshItems();" role="presentation">
                                                <i class="ms-Icon ms-Icon--EventDeclined"></i>{{'Past' | translate}}
                                            </a>
                                        </li>
                                        <li class="user-menut-item" ng-class="isFilterSelected(userFilters.attending) ? 'active' : ''">
                                            <a ng-click="showAttending($event); refreshItems();" role="presentation">
                                                <i class="ms-Icon ms-Icon--ReminderPerson"></i>{{'Registered' | translate}}
                                            </a>
                                        </li>
                                        <li class="user-menut-item" ng-class="isFilterSelected(userFilters.favourites) ? 'active' : ''">
                                            <a ng-click="showFavourites($event); refreshItems();" role="presentation">
                                                <span class="ms-Icon ms-Icon--FavoriteStar"></span>{{'Favourites' | translate}}
                                            </a>
                                        </li>
                                        <li class="user-menut-item" ng-class="isFilterSelected(userFilters.recommended) ? 'active' : ''">
                                            <a ng-class="disabled" ng-click="showRecommended($event); refreshItems();" role="presentation">
                                                <i class="ms-Icon ms-Icon--TeamFavorite "></i>{{'Recommended' | translate}}
                                            </a>
                                        </li>
                                        <li class="user-menut-item" ng-class="isFilterSelected(userFilters.mandatory) ? 'active' : ''">
                                            <a href="#" ng-click="showMandatory($event); refreshItems();" role="presentation">
                                                <i class="ms-Icon ms-Icon--PeopleAlert"></i>{{'Mandatory' | translate}}
                                            </a>
                                        </li>
                                        <li class="user-menut-item" ng-class="isFilterSelected(userFilters.attended) ? 'active' : ''">
                                            <a href="#" ng-click="showAttended($event); refreshItems();" role="presentation">
                                                <i class="ms-Icon ms-Icon--PartyLeader"></i>{{'Attended' | translate}}
                                            </a>
                                        </li>
                                        <li ng-if="canCreateSite" class="user-menut-item" ng-class="isFilterSelected(userFilters.all) ? 'active' : ''">
                                            <a href="#" ng-click="showAll($event); refreshItems();" role="presentation">
                                                <i class="ms-Icon ms-Icon--Calendar"></i>{{'All' | translate}}
                                            </a>
                                        </li>
                                    </ul>
                                    <div class="navbar-form navbar-right hidden-xs hidden-sm" role="search">
                                        <div ng-if="canCreateSite" class="canCreateSite">
                                            <button type="button" ng-click="openNewSitePopup()" class="btn btn-primary" title="{{'Add Event' | translate}}">
                                                <i class="ms-Icon ms-Icon--Add"></i>
                                                {{'Add Event' | translate}}
                                            </button>
                                        </div>
                                        <div class="input-group">
                                            <input type="text" class="form-control" style="border-radius:0;" ng-model="searchText" ng-model-options="{ updateOn: 'default blur', debounce: { 'default': 500, 'blur': 0 } }" autocomplete="off" placeholder="{{'Search course' | translate}}">
                                            <div class="input-group-btn">
                                                <button class="form-control" type="button" style="margin-left:-40px; height:95%; color:#2e7cce; border:0px;">
                                                    <i class="ms-Icon ms-Icon--Search"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- top nav end -->
                            </div>
                        </div>
                        <!--top menu end-->
                        <div class="row selected-filters">
                            <span ng-repeat="filterObj in filterObjects">
                                <span ng-if="filterObj.isNotEmpty">
                                    {{cmMetadata.getDisplayName(filterObj) | translate}}: {{getMetaFilterValue(filterObj)}}
                                    <i role="button" class="ms-Icon ms-Icon--Cancel" ng-click="removeMetaFilter(filterObj)"></i>
                                </span>
                            </span>
                            <span ng-repeat="role in filterRolesObj">
                                <span ng-if="role.value>0">
                                    <span ng-repeat="principal in role.optionModel.selectedPrincipals">
                                        {{role.name | translate}}: {{principal.displayName}}
                                        <i role="button" class="ms-Icon ms-Icon--Cancel" ng-click="removePrincipalInRoleFilter(principal, role)"></i>
                                    </span>
                                </span>
                            </span>
                        </div>
                        <div class="w365cm-cards">
                            <div class="w365cm-card" ng-repeat="site in filteredSites=(LoadCourseModuleWithoutFiltering ? (sites | siteOrderFilter:sort | filter:filterUserSites | filter:filterRoles | wizdom365CourseManagementFilterFilter:filterObjects | wizdom365CourseManagementSearchFilter:searchText | startFrom:((currentPageObject.value - 1)*webpartProperties.sitesPerPage) | limitTo:webpartProperties.sitesPerPage) : sites)">
                                <div class="w365cm-card-block">
                                    <div class="thumbnail" ng-class="cmMetadata.getTheme(site.metadata)">
                                        <div class="course-card-top">
                                            <div class="course-card-image" style="background-image: url('{{cmMetadata.getImageUrl(site.metadata)}}');">&nbsp;</div>
                                            <div ng-if="site.draft || site.cancelled || site.completed" class="course-card-overlay-background"></div>
                                            <div ng-if="site.draft || site.cancelled || site.completed" class="course-card-overlay-text">
                                                <span ng-if="site.draft">{{'Draft' | translate}}</span>
                                                <span ng-if="site.cancelled">{{'Cancelled' | translate}}</span>
                                                <span ng-if="site.cancelled" class="course-card-overlay-date">{{site.startDate | date:'dd-MM-yyyy' }}</span>
                                                <span ng-if="site.completed">{{'Completed' | translate}}</span>
                                                <span ng-if="site.completed" class="course-card-overlay-date">{{site.startDate | date:'dd-MM-yyyy' }}</span>
                                            </div>
                                        </div>
                                    </div>

                                    <!--<img ng-src="{{cmMetadata.getImageUrl(site.metadata)}}" alt="{{site.name}}">-->
                                    <div style="clear:both"></div>
                                    <div class="caption">

                                        <div>
                                            <span class="course-type">{{cmMetadata.getType(site.metadata) | translate}}</span>
                                            <span class="pull-right topRightIcons">
                                                <!--<i class="icon star_outline"></i>-->
                                                <a ng-show="!site.isFavourite" role="button" class="ms-Icon ms-Icon--FavoriteStar" title="{{'Add to favourites' | translate}}" ng-click="addFavourite(site)"></a>
                                                <a ng-show="site.isFavourite" role="button" class="ms-Icon ms-Icon--FavoriteStarFill" title="{{'Remove from favourites' | translate}}" ng-click="removeFavourite(site)"></a>
                                                <a><i class="ms-Icon ms-Icon--Share" title="{{'Invite your colleagues to join' | translate}}" bs-popover data-auto-close="true" data-template="CourseManagement/Templates/Popover/Share.html"></i></a>
                                            </span>
                                        </div>
                                        <div class="course-title">
                                            <a ng-href="{{site.detailPage}}" class="fr-view" ng-bind-html="site.name | wizdom365Highlight:searchText"></a>
                                        </div>

                                        <div class="bottom">
                                            <div class="course-level-container">
                                                <div class="course-level" ng-show="cmMetadata.getLevel(site.metadata)">
                                                    <span class="course-level-text">{{'Level' | translate}}:</span><span class="course-level-value">{{cmMetadata.getLevel(site.metadata) | translate}}</span>
                                                </div>
                                            </div>
                                            <div class="course-info bottom-align">
                                                <div class="col-3" ng-hide="cmMetadata.getAddress(site.metadata)">
                                                    <div class="location hover-pointer">
                                                        <i class="ms-Icon ms-Icon--POI"></i>
                                                        <span>{{cmMetadata.getLocation(site.metadata)}}</span>
                                                    </div>
                                                </div>
                                                <div class="col-3" ng-show="cmMetadata.getAddress(site.metadata)" bs-popover data-placement="top" data-auto-close="true" data-template="CourseManagement/Templates/Popover/Location.html">
                                                    <div class="location hover-pointer">
                                                        <i class="ms-Icon ms-Icon--POI"></i>
                                                        <span>{{cmMetadata.getLocation(site.metadata)}}</span>
                                                    </div>
                                                </div>
                                                <div class="col-3">
                                                    <div ng-show="!site.ongoing && !site.cancelled && !site.completed" class="countdown hover-pointer" bs-popover data-placement="top" data-auto-close="true" data-template="CourseManagement/Templates/Popover/CourseTime.html">
                                                        <span class="wt-capFirstLetter">{{site.startDate | date:'MMMM' }}</span>
                                                        <div class="info-lg">{{site.startDate | date:'d' }}</div>
                                                        <span>{{site.startDate | date:'yyyy' }}</span>
                                                    </div>
                                                    <div ng-show="site.ongoing && !site.cancelled && !site.completed" class="ongoing hover-pointer" bs-popover data-placement="top" data-auto-close="true" data-template="CourseManagement/Templates/Popover/CourseTime.html">
                                                        <i class="ms-Icon ms-Icon--WorkFlow" title="{{'Started' | translate}}"></i>
                                                        <span>{{'Started' | translate}}</span>
                                                    </div>
                                                    <div ng-show="site.cancelled" class="ongoing hover-pointer" bs-popover data-placement="top" data-auto-close="true" data-template="CourseManagement/Templates/Popover/CourseTime.html">
                                                        <i class="ms-Icon ms-Icon--Cancel" title="{{'Cancelled' | translate}}"></i>
                                                        <span>{{'Cancelled' | translate}}</span>
                                                    </div>
                                                    <div ng-show="site.completed" class="ongoing hover-pointer" bs-popover data-placement="top" data-auto-close="true" data-template="CourseManagement/Templates/Popover/CourseTime.html">
                                                        <i class="ms-Icon ms-Icon--CheckMark " title="{{'Completed' | translate}}"></i>
                                                        <span>{{'Completed' | translate}}</span>
                                                    </div>
                                                </div>
                                                <div class="col-3">
                                                    <div wizdom365-booked-chart coursedata="{&quot;maxParticipants&quot;:{{cmMetadata.getMaxParticipants(site.metadata)}},&quot;numberOfSignups&quot;:{{site.numberOfSignups}},&quot;siteId&quot;:&quot;{{site.sharePointWebId}}&quot;}"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="viewDetails">
                                        <a href="#" ng-href="{{site.detailPage}}" class="btn btn-primary view-btn" role="button">{{'View details' | translate}}</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12 text-right">
                                <!--new pagination for backend filtering-->
                                <pagination ng-if="!LoadCourseModuleWithoutFiltering"
                                            total-items="totalCount"
                                            ng-model="currentPageObject.value"
                                            ng-hide="webpartProperties.sitesPerPage >= totalCount"
                                            items-per-page="webpartProperties.sitesPerPage"
                                            max-size="5"
                                            boundary-links="false"
                                            previous-text="&lsaquo;"
                                            next-text="&rsaquo;"
                                            first-text="&laquo;"
                                            last-text="&raquo;"></pagination>
                                <!--old pagination for frontend filering-->
                                <pagination ng-if="LoadCourseModuleWithoutFiltering"
                                            total-items="(sites | filter:filterUserSites | filter:filterRoles | wizdom365CourseManagementFilterFilter:filterObjects | wizdom365CourseManagementSearchFilter:searchText).length"
                                            ng-model="currentPageObject.value"
                                            ng-hide="webpartProperties.sitesPerPage >= (sites | filter:filterUserSites | filter:filterRoles | wizdom365CourseManagementFilterFilter:filterObjects | wizdom365CourseManagementSearchFilter:searchText).length"
                                            items-per-page="webpartProperties.sitesPerPage"
                                            max-size="5"
                                            boundary-links="false"
                                            previous-text="&lsaquo;"
                                            next-text="&rsaquo;"
                                            first-text="&laquo;"
                                            last-text="&raquo;"></pagination>
                            </div>
                        </div>
                    </div>
                    <div ng-show="dataReady && (LoadCourseModuleWithoutFiltering ? filteredSites == 0 : sites.length == 0)" class="noCoursesFound">
                        <span ng-show="topFilterText"><b>{{topFilterText}}</b><br /></span> {{'No courses found' |  translate}}<br />{{'Try to change filter values' | translate}}
                    </div>
                </div>
            </div>
        </div>
        <!--left menu end-->
    </div>
    <!--main .row-->
</div>