<div page-content [border]="isMobile">
    <div class="uk-margin-top" actions>
        <div class="uk-margin-bottom uk-flex uk-flex-middle">
            <span *ngIf="countSelectedFilters() > 0"  class="uk-text-meta uk-margin-small-right"> Active filters:</span>
            <div class="uk-width-expand">
                <ng-container *ngTemplateOutlet="selected_filters_pills"></ng-container>
            </div>
            <a *ngIf="countSelectedFilters() > 1" class="uk-text-small uk-margin-small-left" (click)="clearAll()"> Clear All </a>
        </div>
        <div *ngIf="activeCategory && countSubCategoriesToShow(activeCategory) > 0" [class.uk-margin-bottom]="isMobile">
            <slider-tabs *ngIf="stakeholder && !loading && activeTopic" [border]="!isMobile" [type]="'dynamic'">
                <ng-template ngFor [ngForOf]="activeCategory.subCategories" let-subCategory>
                    <slider-tab *ngIf="hasPermission(subCategory.visibility)" [tabTitle]="subCategory.name"
                                [queryParams]="queryParams"
                                [routerLink]="['.', activeTopic.alias, activeCategory.alias, subCategory.alias]"
                                [relativeTo]="_route.parent?_route.parent:_route"
                                [active]="subCategory.alias === activeSubCategory.alias"></slider-tab>
                </ng-template>
            </slider-tabs>
        </div>
    </div>
    <div inner>
        <loading *ngIf="loading" class="uk-margin-top"></loading>
        <div *ngIf="!activeSubCategory && !loading" class="message">
            No {{entities.stakeholder}} yet.
        </div>
        <div *ngIf="activeSubCategory" class="uk-section-small">
            <div *ngIf="activeSubCategory.description" [innerHTML]="activeSubCategory.description" class="uk-margin-medium-bottom">
            </div>
            <div [class.uk-margin-large-bottom]="activeSubCategory.numbers.length > 0 && !tabs">
                <ng-container *ngFor="let number of activeSubCategory.numbers; let i = index;">
                    <div *ngIf="!isMobile" class="uk-grid uk-grid-small uk-grid-match uk-margin-medium-bottom" uk-grid
                         uk-height-match="target: .uk-card">
                        <h5 *ngIf="number.title" class="uk-width-1-1 uk-margin-bottom">{{number.title}}</h5>
                        <ng-template ngFor [ngForOf]="number.indicators" let-indicator let-j="index">
                            <div *ngIf="hasPermission(indicator.visibility)"
                                 [ngClass]="getNumberClassBySize(indicator.width)">
                                <div class="uk-card uk-card-default uk-padding-small number-card uk-position-relative"
                                     [class.semiFiltered]="indicator.indicatorPaths[0].filtersApplied < countSelectedFilters()">
                                    <div *ngIf="!indicator.overlay">
                                        <div class="uk-text-small uk-text-truncate uk-margin-xsmall-bottom uk-margin-right">{{indicator.name}}</div>
                                        <div class="number uk-text-small uk-text-bold">
                                  <span *ngIf="numberResults.get(i + '-' + j)"
                                        [innerHTML]="(indicator.indicatorPaths[0].format == 'NUMBER'?(numberResults.get(i + '-' + j) | numberRound: 2:1:stakeholder.locale):(numberResults.get(i + '-' + j) | numberPercentage: stakeholder.locale))"></span>
                                            <span *ngIf="!numberResults.get(i + '-' + j)">--</span>
                                        </div>
                                        <div *ngIf="indicator.description || indicator.additionalDescription"
                                             class="uk-position-top-right uk-text-center uk-margin-small-top uk-margin-small-right uk-visible@m">
                                            <a class="uk-display-inline-block uk-button uk-button-link" uk-tooltip="Note"
                                               (click)="changeOverlay($event, indicator, 'description')">
                                        <span class="uk-flex uk-flex-middle">
                                          <icon name="analytics" type="outlined" [flex]="true"></icon>
                                        </span>
                                            </a>
                                        </div>
                                    </div>
                                    <div *ngIf="indicator.overlay && (indicator.description || indicator.additionalDescription)"
                                         click-outside-or-esc class="uk-overflow-auto"
                                         (clickOutside)="closeOverlay($event, indicator)">
                                        <div class="uk-position-top-right uk-text-center uk-margin-small-top uk-margin-small-right">
                                            <a class="uk-display-inline-block uk-button uk-button-link"
                                               (click)="changeOverlay($event, indicator, false)">
                                        <span class="uk-flex uk-flex-middle">
                                          <icon name="close" type="outlined" [flex]="true"></icon>
                                        </span>
                                            </a>
                                        </div>
                                        <div class="uk-margin-small-top uk-margin-right">
                                            <p *ngIf="indicator.description">
                                                {{indicator.description}}
                                            </p>
                                            <p *ngIf="indicator.additionalDescription">
                                                {{indicator.additionalDescription}}
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </ng-template>
                    </div>
                    <div *ngIf="isMobile">
                        <h6 *ngIf="number.title" class="uk-width-1-1 uk-margin-bottom">{{number.title}}</h6>
                        <div class="uk-card uk-card-default uk-padding-small number-card">
                            <div class="uk-grid uk-grid-small uk-child-width-1-1" uk-grid>
                                <ng-template ngFor [ngForOf]="number.indicators" let-indicator let-j="index">
                                    <div *ngIf="hasPermission(indicator.visibility)"
                                         [ngClass]="getNumberClassBySize(indicator.width)">
                                        <div [class.semiFiltered]="indicator.indicatorPaths[0].filtersApplied < countSelectedFilters()">
                                            <div *ngIf="!indicator.overlay">
                                                <div
                                                        class="uk-text-xsmall uk-text-truncate uk-margin-xsmall-bottom uk-margin-right">{{indicator.name}}</div>
                                                <div class="number uk-text-small uk-text-bold">
                      <span *ngIf="numberResults.get(i + '-' + j)"
                            [innerHTML]="(indicator.indicatorPaths[0].format == 'NUMBER'?(numberResults.get(i + '-' + j) | numberRound: 2:1:stakeholder.locale):(numberResults.get(i + '-' + j) | numberPercentage: stakeholder.locale))"></span>
                                                    <span *ngIf="!numberResults.get(i + '-' + j)">--</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </ng-template>
                            </div>
                        </div>
                    </div>
                </ng-container>
            </div>
            <div [class.section-container]="tabs">
                <ul *ngIf="tabs" class="tabs">
                    <li *ngFor="let tab of activeSubCategory.charts; let i = index;" [class.uk-active]="i === activeChartSectionIndex"
                        (click)="changeSection(i)" class="uk-text-truncate" [attr.uk-tooltip]="getSectionTitle(tab)">
                        {{getSectionTitle(tab)}}
                    </li>
                </ul>
                <div *ngIf="chart" class="uk-grid uk-grid-small uk-grid-match uk-margin-medium-bottom uk-flex uk-flex-middle" uk-grid uk-height-match="target: .uk-card">
                    <h5 *ngIf="chart.title && !isMobile && !tabs" class="uk-width-1-1 uk-margin-bottom">{{getSectionTitle(chart)}}</h5>
                    <div *ngIf="getSectionDescription(chart)" class="uk-width-1-1 uk-margin-bottom">{{getSectionDescription(chart)}}</div>
                    <h6 *ngIf="chart.title && isMobile && !tabs" class="uk-width-1-1">{{getSectionTitle(chart)}}</h6>
                    <ng-template ngFor [ngForOf]="chart.indicators" let-indicator let-j="index">
                        <div *ngIf="hasPermission(indicator.visibility) && chartsActiveType.get(activeChartSectionIndex + '-' + j)"
                             [ngClass]="getChartClassBySize(indicator.width)">
                            <div class="uk-card uk-card-default uk-position-relative"
                                 [class.semiFiltered]="chartsActiveType.get(activeChartSectionIndex + '-' + j).filtersApplied < countSelectedFilters()">
                                <div class="uk-card-body uk-text-center uk-margin-small-bottom">
                                    <h6 class="uk-margin-bottom chartTitle uk-flex uk-flex-bottom">
                                        {{indicator.name + " "}}
                                    </h6>
                                    <div *ngIf="indicator.indicatorPaths.length > 1" class="uk-button-group">
                                        <button *ngFor="let indicatorPath of indicator.indicatorPaths;"
                                                class="uk-button"
                                                (click)="setActiveChart(activeChartSectionIndex, j, indicatorPath.type)"
                                                [class.uk-button-secondary]="chartsActiveType.get(activeChartSectionIndex + '-' + j).url === indicatorPath.url">
                                            {{indicatorPath.type}}
                                        </button>
                                    </div>
                                    <iframe [class.uk-blend-multiply]="!isFullscreen"
                                            *ngIf=" !properties.disableFrameLoad && chartsActiveType.get(activeChartSectionIndex + '-' + j).source !== 'image'"
                                            [src]="chartsActiveType.get(activeChartSectionIndex + '-' + j).safeResourceUrl"
                                            class="uk-width-1-1" allowfullscreen="true" mozallowfullscreen="true"
                                            [ngClass]="'uk-height-' + (indicator.height?indicator.height.toLowerCase():'medium')"></iframe>
                                    <div *ngIf="properties.disableFrameLoad && chartsActiveType.get(activeChartSectionIndex + '-' + j).source !== 'image'">
                                        <img class="uk-width-1-1 uk-blend-multiply"
                                             [ngClass]="'uk-height-' + (indicator.height?indicator.height.toLowerCase():'medium')"
                                             src="assets/chart-placeholder.png">
                                    </div>
                                    <img *ngIf="chartsActiveType.get(activeChartSectionIndex + '-' + j).source === 'image'"
                                         [src]="chartsActiveType.get(activeChartSectionIndex + '-' + j).safeResourceUrl"
                                         class="uk-width-1-1 uk-blend-multiply"
                                         [ngClass]="'uk-height-' + (indicator.height?indicator.height.toLowerCase():'medium')">
                                </div>
                                <div class="uk-position-bottom-left uk-margin-left uk-margin-small-bottom uk-visible@m">
                                    <a *ngIf="indicator.description || indicator.additionalDescription"
                                       class="uk-display-inline-block uk-button uk-button-link uk-margin-right"
                                       (click)="changeOverlay($event, indicator, 'description')">
                                <span class="uk-flex uk-flex-middle">
                                  <icon name="analytics" type="outlined" [flex]="true"></icon>
                                  <span class="uk-margin-xsmall-left">Note</span>
                                </span>
                                    </a>
                                    <a class="uk-display-inline-block uk-button uk-button-link"
                                       (click)="changeOverlay($event, indicator, 'embed')">
                                <span class="uk-flex uk-flex-middle">
                                  <icon name="code" type="outlined" [flex]="true"></icon>
                                  <span class="uk-margin-xsmall-left">Embed</span>
                                </span>
                                    </a>
                                </div>
                                <div *ngIf="indicator.overlay"
                                     class="indicator-overlay uk-card uk-card-default uk-flex uk-flex-middle uk-flex-center">
                                    <div *ngIf="indicator.overlay == 'description'" class="inner" click-outside-or-esc
                                         (clickOutside)="closeOverlay($event, indicator)">
                                        <div class="uk-padding-small">
                                            <div class="uk-flex uk-flex-right">
                                                <button class="uk-close uk-icon"
                                                        (click)="changeOverlay($event, indicator, false)">
                                                    <icon name="close" ratio="1"></icon>
                                                </button>
                                            </div>
                                            <div class="uk-padding-small uk-padding-remove-horizontal">
                                                <p *ngIf="indicator.description">
                                                    {{indicator.description}}
                                                </p>
                                                <p *ngIf="indicator.additionalDescription">
                                                    {{indicator.additionalDescription}}
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                    <div *ngIf="indicator.overlay === 'embed'" class="inner" click-outside-or-esc
                                         (clickOutside)="closeOverlay($event, indicator)">
                                        <div class="uk-padding-small">
                                            <div class="uk-flex uk-flex-right">
                                                <button class="uk-close uk-icon"
                                                        (click)="changeOverlay($event, indicator, false)">
                                                    <icon name="close" ratio="1"></icon>
                                                </button>
                                            </div>
                                            <div class="clipboard-wrapper uk-margin-top uk-margin-bottom">
                                                <pre id="embed_content_id" class="uk-padding-small"><code>&lt;iframe width="500" height="500" <br> src="{{chartsActiveType.get(activeChartSectionIndex + '-' + j).safeResourceUrl.changingThisBreaksApplicationSecurity}}
                                                    " <br> allowfullscreen="true" mozallowfullscreen="true"&gt;<br>&lt;/iframe&gt;</code></pre>
                                            </div>
                                            <div class="uk-flex uk-flex-right">
                                                <a class="uk-link-reset copy clipboard_btn"
                                                   data-clipboard-target="#embed_content_id" title="Copy code">
                                                    <icon [flex]="true" name="content_copy"></icon>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="printGap uk-hidden"></div>
                    </ng-template>
                </div>
            </div>
        </div>
    </div>
</div>
<a *ngIf="stakeholder" href="#style_switcher" uk-toggle="" id="filters_switcher_toggle"
   class="uk-offcanvas-switcher uk-flex uk-flex-center uk-flex-middle uk-link-reset">
    <icon name="filters" ratio="1.5" visuallyHidden="Filters" gradient="filters_icon"></icon>
    <span [class.uk-hidden]="countSelectedFilters() === 0"
          class="uk-offcanvas-count uk-flex uk-flex-middle uk-flex-center">
    {{countSelectedFilters()}}
  </span>
</a>
<div *ngIf="stakeholder" id="style_switcher" class="uk-offcanvas"
     uk-offcanvas="flip:true; overlay: true">
    <div class="uk-offcanvas-bar">
        <div class="uk-float-right">
            <button class="uk-offcanvas-close uk-close uk-icon" type="button">
                <icon name="close" ratio="1.5" visuallyHidden="close"></icon>
            </button>
        </div>
        <div>
            <div class="uk-flex uk-flex-middle uk-margin-bottom">
                <h4 class="uk-margin-remove-bottom">Filters</h4>
                <a *ngIf="countSelectedFilters() > 1" class="uk-text-small uk-margin-left" (click)="clearAll()"> Clear
                    All </a>
            </div>
            <div>
                <ng-container *ngTemplateOutlet="selected_filters_pills"></ng-container>
                <ul class="uk-list uk-list-xlarge uk-list-divider  uk-margin-top">
                    <li>
                        <range-filter #rangeFilter [filter]="periodFilter" [yearMin]="minYear" [yearMax]="maxYear"
                                      [mandatoryRange]="true"
                                      (onFilterChange)="filter()"></range-filter>
                    </li>
                    <ng-container *ngFor="let filter of filters ">
                        <li *ngIf="filter.values.length >0">
                            <a *ngIf="filter.filterId == 'fos'" class="uk-float-right"
                               href="https://explore.openaire.eu/fields-of-science" target="_blank"
                               uk-tooltip="title:More information about Fields of Science"><span uk-icon="info"></span></a>
                            <search-filter [filter]="filter" [showResultCount]=false
                                           (onFilterChange)="filterChanged($event)"></search-filter>
                        </li>
                    </ng-container>
                </ul>
                <i *ngIf="user || countSelectedFilters() > 0 "
                   class="uk-margin-medium-top uk-text-small uk-display-block">
                    <sup>*</sup> If your filter selection cannot be applied to a chart, that chart will appear
                    grayed-out.
                </i>
            </div>
        </div>
    </div>
</div>
<ng-template #selected_filters_pills>
    <div class="uk-slider filters-slider" uk-slider="finite: true">
        <div [class.uk-invisible]="list.children.length === 0" class="uk-position-relative">
            <div class="uk-slider-container" style="height: 30px">
                <ul #list class="uk-slider-items uk-grid uk-grid-small uk-margin-small-right uk-flex-nowrap">
                    <li *ngIf="periodFilter.selectedFromAndToValues.length > 0">
                        <span class="uk-label uk-label-small uk-label-secondary uk-flex uk-flex-middle">
                          <span
                                  class="uk-margin-small-right uk-width-expand uk-text-truncate">{{periodFilter.selectedFromAndToValues}}</span>
                          <button [class.uk-disabled]="loading" (click)="clearPeriodFilter()" class="uk-close uk-icon"
                                  [disabled]="loading">
                            <icon name="close" flex="true" ratio="0.7"></icon>
                          </button>
                        </span>
                    </li>
                    <ng-container *ngFor="let filter of filters">
                        <ng-container *ngIf="filter.countSelectedValues > 0">
                            <ng-container *ngFor="let value of filter.values; let i = index;">
                                <ng-container *ngIf="value.selected">
                                    <li>
                                        <span class="uk-label uk-label-small uk-label-secondary uk-flex uk-flex-middle">
                                          <span class="uk-margin-small-right uk-width-expand uk-text-truncate">

                                          <ng-container
                                                  *ngIf="filter.type && (filter.type == 'boolean' || filter.type == 'triplet') else noboolean">
                                               {{filter.title}}:
                                              {{(value.name == 'true' || value.name == 'Yes') ? 'Yes' : 'No'}}
                                            </ng-container>
                                            <ng-template #noboolean>
                                            {{value.name}}
                                            </ng-template>
                                            </span>
                                          <button [class.uk-disabled]="loading" (click)="clearFilterValue(filter, value)"
                                                  class="uk-close uk-icon" [disabled]="loading">
                                            <icon name="close" flex="true" ratio="0.7"></icon>
                                          </button>
                                        </span>
                                    </li>
                                </ng-container>
                            </ng-container>
                        </ng-container>
                    </ng-container>
                </ul>
            </div>
            <slider-arrow type="previous"></slider-arrow>
            <slider-arrow type="next"></slider-arrow>
        </div>
    </div>
</ng-template>
