<div>
  <ng-template #tab_content
    let-resultType="resultType" let-fetch="fetch" let-searchLinkToAdvancedPage="searchLinkToAdvancedPage"
    let-params="params" let-type="type" let-typeName="typeName">
    <div class="uk-grid uk-margin-remove">
      <div class="uk-width-expand uk-padding uk-padding-remove-horizontal">
        <search-tab [fetch]="fetch" [resultType]="resultType" [params]="params"
          [searchLinkToAdvancedPage]="searchLinkToAdvancedPage" [properties]="properties">
        </search-tab>
      </div>
    </div>
  </ng-template>

  <ng-template #analytics_tab_content 
    let-type="type" let-typeName="typeName">
    <div *ngIf="analyticsActiveTab == type && isEntityEnabled(type)
      && statistics.statisticsSum && statistics.statisticsDisplay && statistics.statisticsSum[type].total>0
      && (statistics.statisticsDisplay.entities[type].numbers.map['total']['showInMonitor']
        || statistics.statisticsDisplay.entities[type].numbers.map['project']['showInMonitor']
        || statistics.statisticsDisplay.entities[type].numbers.map['open']['showInMonitor']
        || statistics.statisticsDisplay.entities[type].numbers.map['closed']['showInMonitor']
        || statistics.statisticsDisplay.entities[type].numbers.map['embargo']['showInMonitor']
        || statistics.statisticsDisplay.entities[type].numbers.map['restricted']['showInMonitor']
        || (statistics.allowedEntitiesMode['showInMonitor'] && statistics.statisticsSum
          && statistics.allowedChartsMode['showInMonitor'] && statistics.statisticsSum[type]
          && statistics.allowedChartsMode['showInMonitor'][type] && statistics.statisticsSum[type].total > 0
          && statistics.allowedChartsMode['showInMonitor'][type].length > 0) )">
      <div class="tab-header uk-margin-bottom">
        {{typeName}}
      </div>
      <ng-container *ngTemplateOutlet="stats; context: {
        entity: type, entityName: typeName,
        statisticsSum:statistics.statisticsSum, statisticsDisplay:statistics.statisticsDisplay,
        allowedEntities: statistics.allowedEntitiesMode['showInMonitor'],
        allowedCharts:statistics.allowedChartsMode['showInMonitor'],
        showChartTitle:  statistics.chartTitlesMode['showInMonitor'],
        chartsInfoMap:statistics.chartsInfoMap, showIn:'showInMonitor'}">
      </ng-container>
    </div>
  </ng-template>

  <ng-template #stats let-entity="entity" let-entityName="entityName" let-statisticsSum="statisticsSum"
    let-statisticsDisplay="statisticsDisplay" let-allowedEntities="allowedEntities"
    let-allowedCharts="allowedCharts" let-chartsInfoMap="chartsInfoMap"
    let-showChartTitle="showChartTitle"
    let-showIn="showIn">
    <div *ngIf=" showIn == 'showInMonitor' && allowedCharts && allowedCharts[entity] && allowedCharts[entity].length == 0  &&
      !statisticsDisplay.entities[entity].numbers.map['total'][showIn] && !statisticsDisplay.entities[entity].numbers.map['project'][showIn] &&
      !statisticsDisplay.entities[entity].numbers.map['open'][showIn] && !statisticsDisplay.entities[entity].numbers.map['closed'][showIn] &&
      !statisticsDisplay.entities[entity].numbers.map['embargo'][showIn] && !statisticsDisplay.entities[entity].numbers.map['restricted'][showIn]"
      class="uk-alert uk-alert-primary">
      No graphs available
    </div>
    <div *ngIf="statisticsSum && statisticsDisplay && statisticsSum[entity].total > 0"
      [class]="'uk-grid uk-grid-small uk-grid-match ' + (showIn == 'showInMonitor' ? '  uk-child-width-1-3@s uk-child-width-1-6@m' : ' uk-child-width-1-1@s uk-child-width-1-3@m')"
      uk-grid>
      <div *ngIf="statisticsDisplay.entities[entity].numbers.map['total'][showIn]">
        <div class="uk-card uk-card-default uk-padding-small">
          <div class="uk-h4 uk-text-bold">
            {{statisticsSum[entity].total|number}}
          </div>
          <div>
            Total
          </div>
        </div>
      </div>
      <div *ngIf="statisticsDisplay.entities[entity].numbers.map['project'][showIn] && statisticsSum[entity].projects">
        <div class="uk-card uk-card-default uk-padding-small">
          <div  class="uk-h4 uk-text-bold">
            {{statisticsSum[entity].projects|number}} 
          </div>
          <div>
            Total linked projects
          </div>
        </div>
      </div>
      <div *ngIf="statisticsDisplay.entities[entity].numbers.map['open'][showIn] && statisticsSum[entity].open_access">
        <div class="uk-card uk-card-default uk-padding-small">
          <div class="uk-h4 uk-text-bold">
            {{statisticsSum[entity].open_access|number}} 
          </div>
          <div>
            Open access
          </div>
        </div>
      </div>
      <div *ngIf="statisticsDisplay.entities[entity].numbers.map['closed'][showIn] && statisticsSum[entity].closed_access">
        <div class="uk-card uk-card-default uk-padding-small">
          <div class="uk-h4 uk-text-bold">
            {{statisticsSum[entity].closed_access|number}} 
          </div>
          <div>
            Closed access
          </div>
        </div>
      </div>
      <div *ngIf="statisticsDisplay.entities[entity].numbers.map['embargo'][showIn] && statisticsSum[entity].embargo">
        <div class="uk-card uk-card-default uk-padding-small">
          <div class="uk-h4 uk-text-bold">
            {{statisticsSum[entity].embargo|number}} 
          </div>
          <div>
            Embargoed
          </div>
        </div>
      </div>
      <div *ngIf="statisticsDisplay.entities[entity].numbers.map['restricted'][showIn] && statisticsSum[entity].restricted">
        <div class="uk-card uk-card-default uk-padding-small">
          <div class="uk-h4 uk-text-bold">
            {{statisticsSum[entity].restricted|number}} 
          </div>
          <div>
            Restricted
          </div>
        </div>
      </div>
    </div>
    <div *ngIf="allowedEntities &&
      statisticsSum && allowedCharts && statisticsSum[entity] &&
      allowedCharts[entity] && statisticsSum[entity].total>0 &&
      allowedCharts[entity].length>0">
      <div *ngIf="showIn == 'showInDashboard'">
        <div>
          <div class="uk-position-relative">
            <ul class="uk-list">
              <li *ngFor="let chart of allowedCharts[entity]">
                <div class="iframeContainer uk-height-medium uk-margin-medium-top uk-card uk-card-default uk-card-body">
                  <div *ngIf="showChartTitle[chart]">
                    {{chartsInfoMap[chart].title}}
                  </div>
                  <iframe [src]=chartsInfoMap[chart].url scrolling="no"></iframe>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div *ngIf="showIn == 'showInMonitor'" class="uk-grid uk-child-width-1-2@l uk-child-width-1-1@m ">
        <div *ngFor="let chart of allowedCharts[entity]" class="uk-clearfix uk-margin-bottom">
          <div class="iframeContainer uk-height-large uk-margin-medium-top uk-card uk-card-default uk-card-body">
            <div *ngIf="showChartTitle[chart]">
              {{chartsInfoMap[chart].title}}
            </div>
            <iframe [src]=chartsInfoMap[chart].url scrolling="no"></iframe>
          </div>
        </div>
      </div>
    </div>
  </ng-template>

  <div *ngIf="portal && community && !isPrivate()" >
    <div *ngIf="portal && community" class="generalSearchForm heroBackground"> <!-- this div will have the
    customized color or image -->
      <div class="uk-container uk-container-large uk-flex uk-flex-center">
        <div class="uk-width-2-3@m uk-width-1-2@l uk-margin-large-top uk-margin-large-bottom">
          <h1 *ngIf="community.title" class="uk-text-center uk-h2 uk-margin-remove">
            {{community.shortTitle}}
          </h1>
          <div *ngIf="community.shortTitle && community.title != community.shortTitle"
               class="uk-text-center uk-margin-top">
            {{community.title}}
          </div>
          <!--          <div [class.uk-invisible]="disableSelect" class="uk-margin-medium-top">-->
          <!--            <advanced-search-input #advanced (searchEmitter)="goTo(true)">-->
          <!--              <entities-selection [simpleView]="true" currentEntity="result" [selectedEntity]="selectedEntity" [customFilter]="customFilter"-->
          <!--                (selectionChange)="entityChanged($event);advanced.focusNext(input, $event)" (disableSelectEmitter)="disableSelectChange($event)"-->
          <!--                [onChangeNavigate]="false"></entities-selection>-->
          <!--              <div input #input placeholder="Scholary works" [searchable]="true" [hint]="'Search in OpenAIRE'" [(value)]="keyword"></div>-->
          <!--            </advanced-search-input>-->
          <!--            <div *ngIf="selectedEntity === 'result' && input.focused" (click)="$event.stopPropagation();advanced.focusNext(input, $event)" class="uk-dropdown uk-display-block uk-margin-small-top uk-width-auto">-->
          <!--              <div class="uk-padding-small">-->
          <!--                <quick-selections [resultTypes]="resultTypes" [quickFilter]="resultsQuickFilter"></quick-selections>-->
          <!--              </div>-->
          <!--          </div>-->
          <!--        </div>-->

          <div [class.uk-invisible]="disableSelect" class="uk-margin-medium-top">
            <advanced-search-input #advanced (searchEmitter)="goTo(true)">
              <entities-selection class="uk-width-1-3" [simpleView]="true" currentEntity="result" [selectedEntity]="selectedEntity" [customFilter]="customFilter"
                                  (selectionChange)="entityChanged($event);advanced.focusNext(input, $event)" (disableSelectEmitter)="disableSelectChange($event)"
                                  [onChangeNavigate]="false"></entities-selection>
              <div input #input class="uk-width-expand"  placeholder="Scholary works" [searchable]="true" [hint]="'Search in OpenAIRE'" [(value)]="keyword"></div>
            </advanced-search-input>
            <div *ngIf="selectedEntity === 'result' && input.focused" (click)="$event.stopPropagation();advanced.focusNext(input, $event)" class="uk-dropdown uk-display-block uk-margin-small-top uk-width-auto">
              <div class="uk-padding-small">
                <quick-selections [resultTypes]="resultTypes" [quickFilter]="resultsQuickFilter"></quick-selections>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

  <div *ngIf="portal && community" class=" uk-container uk-container-large uk-section uk-section-small">
    <div *ngIf="communityId" >
      <div>
        <div class="main-tabs-div">
          <!-- <ng-template #summary_tab>
            <div *ngIf="community" class="uk-grid uk-margin-remove">
              <div class="uk-width-expand uk-padding uk-inline">
                <div *ngIf="community.description" class="uk-margin-bottom ">
                    <div [innerHTML]="community.description | safeHtml"></div>
                </div>

                <div *ngIf="isRouteEnabled('/curators')" class="uk-margin-small-bottom">
                  <curators [longView]="false"></curators>
                </div>
                <div [class]="community.date || subscribers ? 'uk-margin-small-bottom' : ''">
                  <span *ngIf="community.date" class="uk-margin-right">
                    <span
                        class="lowOpacityColor uk-text-meta">Created: </span> {{community.date | date:'dd-MMM-yyyy'}}
                  </span>
                  <span>
                    <subscribe *ngIf="communityId" [communityId]="communityId" showNumbers=true
                                (countSubscribersEvent)="countSubscribersEvent($event)"></subscribe>
                  </span>
                </div>
                <div [class]="((projectTotal && projectTotal > 0 && isEntityEnabled('project') && isRouteEnabled(searchLinkToProjects)) ||
                              (contentProviderTotal  && contentProviderTotal > 0 && isEntityEnabled('datasource') && isRouteEnabled(searchLinkToDataProviders)))
                              ? 'uk-margin-small-bottom' : ''">
                  <span
                      *ngIf="projectTotal  && projectTotal > 0 && isEntityEnabled('project') && isRouteEnabled(searchLinkToProjects)">
                    <span class="uk-text-meta">Projects: </span>
                    <a class="uk-margin-auto-vertical uk-margin-auto portal-link" [queryParams]=params
                        routerLinkActive="router-link-active"
                        [routerLink]="searchLinkToProjects">{{projectTotal|number}}
                    </a>
                  </span>
                  <span
                      *ngIf="contentProviderTotal  && contentProviderTotal > 0 && isEntityEnabled('datasource') && isRouteEnabled(searchLinkToDataProviders)"
                      [class]="'uk-display-inline-block '+((projectTotal  && projectTotal > 0 && isEntityEnabled('project') && isRouteEnabled(searchLinkToProjects)) ? 'uk-margin-left' : '')">
                    <span class="uk-text-meta">Content Providers: </span>
                    <a class="uk-margin-auto-vertical uk-margin-auto portal-link" [queryParams]=params
                        routerLinkActive="router-link-active"
                        [routerLink]="searchLinkToDataProviders">{{contentProviderTotal|number}}
                    </a>
                  </span>
                  <span *ngIf="projectsCalculated && contentProvidersCalculated &&
                        ((projectTotal  && projectTotal > 0 && isEntityEnabled('project') && isRouteEnabled(searchLinkToProjects))
                        || (contentProviderTotal  && contentProviderTotal > 0 && isEntityEnabled('datasource') && isRouteEnabled(searchLinkToDataProviders)))"
                        class="uk-icon uk-text-meta uk-margin-small-left"
                        title="{{buildProjectsAndContentProvidesTooltip()}}"
                        uk-tooltip="pos:bottom-right; delay:10; cls: community-page-tooltip uk-width-medium">
                    <svg width="15" height="15" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="question"
                          ratio="1">
                      <circle fill="none" stroke="#000" stroke-width="1.1" cx="10" cy="10" r="9"></circle>
                      <circle cx="10.44" cy="14.42" r="1.05"></circle>
                      <path fill="none" stroke="#000" stroke-width="1.2"
                            d="M8.17,7.79 C8.17,4.75 12.72,4.73 12.72,7.72 C12.72,8.67 11.81,9.15 11.23,9.75 C10.75,10.24 10.51,10.73 10.45,11.4 C10.44,11.53 10.43,11.64 10.43,11.75"></path>
                    </svg>
                  </span>
                </div>
                <div
                    *ngIf="(zenodoCommunityIdS.length + ((masterZenodoCommunity) ? 1 : 0) > 0) && isRouteEnabled(shareInZenodoPage)"
                    class="">
                  <span class="lowOpacityColor uk-text-meta">Linked to</span>
                  <a class="portal-link uk-margin-small-left uk-margin-small-right" [queryParams]=params
                      routerLinkActive="router-link-active" [routerLink]="shareInZenodoPage">
                    <span>{{zenodoCommunityIdS.length + ((masterZenodoCommunity) ? 1 : 0)}}</span>
                  </a>
                  <span class="lowOpacityColor uk-text-meta">Zenodo Communities</span>
                  <span class="uk-icon uk-text-meta uk-margin-small-left"
                        title="{{buildZenodoCommunitiesTooltip()}}"
                        uk-tooltip="pos:bottom-right; delay:10; cls: community-page-tooltip uk-width-medium">
                    <svg width="15" height="15" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="question"
                          ratio="1">
                      <circle fill="none" stroke="#000" stroke-width="1.1" cx="10" cy="10" r="9"></circle>
                      <circle cx="10.44" cy="14.42" r="1.05"></circle>
                      <path fill="none" stroke="#000" stroke-width="1.2"
                            d="M8.17,7.79 C8.17,4.75 12.72,4.73 12.72,7.72 C12.72,8.67 11.81,9.15 11.23,9.75 C10.75,10.24 10.51,10.73 10.45,11.4 C10.44,11.53 10.43,11.64 10.43,11.75"></path>
                    </svg>
                  </span>
                </div>
              </div>
              <div *ngIf="isRouteEnabled('/subjects') && community.subjects && community.subjects.length > 0"
                    class="uk-width-1-3@m uk-padding right-column uk-inline">
                <div class="uk-margin-bottom">
                  <div class="uk-text-meta uk-margin-small-bottom">Subjects</div>
                  <span *ngFor="let subject of community.subjects.slice(0,20) let i=index">
                    <span *ngIf="subject != ''">
                      <a class="portal-link"
                          [queryParams]="{f0:'resultsubject',fv0:createParams(subject)}"
                          routerLinkActive="router-link-active" [routerLink]="searchLinkToAdvancedResults">
                        <span>{{subject}}</span>
                      </a>
                      <span *ngIf="i < community.subjects.length-1 && i != 19">, </span>
                    </span>
                  </span>
                  <div
                      class="uk-margin-top uk-animation-fade uk-padding uk-padding-remove-top uk-position-bottom-right">
                    <a class="portal-link" routerLinkActive="router-link-active" [routerLink]="'/subjects'">
                      View all
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </ng-template>
          <ng-template #publications_tab>
            <ng-container *ngTemplateOutlet="tab_content; context: {
                              resultType: 'publication', fetch: fetchPublications,
                              searchLinkToAdvancedPage: properties.searchLinkToAdvancedResults,
                              params: getParamsForSearchLink('publications'),
                              type: 'publication', typeName: 'publication',
                              showImpactFactors:(community.communityId == 'elixir-gr' || community.communityId == 'inspired-ris' )}">
            </ng-container>
          </ng-template>
          <ng-template #datasets_tab>
            <ng-container *ngTemplateOutlet="tab_content; context: {
                              resultType: 'dataset', fetch: fetchDatasets,
                              searchLinkToAdvancedPage: properties.searchLinkToAdvancedResults,
                              params: getParamsForSearchLink('datasets'),
                              type: 'dataset', typeName: 'research data',
                              showImpactFactors:(community.communityId == 'elixir-gr'  || community.communityId == 'inspired-ris')}">
            </ng-container>
          </ng-template>
          <ng-template #software_tab>
            <ng-container *ngTemplateOutlet="tab_content; context: {
                                resultType: 'software', fetch: fetchSoftware,
                                searchLinkToAdvancedPage: properties.searchLinkToAdvancedResults,
                                params: getParamsForSearchLink('software'),
                                type: 'software', typeName: 'software',
                                showImpactFactors:(community.communityId == 'elixir-gr'  || community.communityId == 'inspired-ris')}">
            </ng-container>
          </ng-template>
          <ng-template #other_tab>
            <ng-container *ngTemplateOutlet="tab_content; context: {
                                resultType: 'other', fetch: fetchOrps,
                                searchLinkToAdvancedPage: properties.searchLinkToAdvancedResults,
                                params: getParamsForSearchLink('other'),
                                type: 'orp', typeName: 'other products',
                                showImpactFactors:(community.communityId == 'elixir-gr'  || community.communityId == 'inspired-ris')}">
            </ng-container>
          </ng-template>
          <ng-template #analytics_tab>
            <div *ngIf="statistics && statistics.statisticsDisplay && statistics.statisticsDisplay.isActive"
                  class="content-overflow uk-overflow-auto">
              <div *ngIf="statistics && activeTab=='analytics'" class="uk-width-expand uk-padding">

                <div class="uk-text-center">
                  <button *ngIf="isEntityEnabled('publication')
                                  && statistics.statisticsSum && statistics.statisticsDisplay && statistics.statisticsSum['publication'].total>0
                                  && statistics.statisticsSum && statistics.statisticsDisplay && statistics.statisticsSum['publication'].total>0
                                  &&
                                  (  statistics.statisticsDisplay.entities['publication'].numbers.map['total']['showInMonitor']
                                  || statistics.statisticsDisplay.entities['publication'].numbers.map['project']['showInMonitor']
                                  || statistics.statisticsDisplay.entities['publication'].numbers.map['open']['showInMonitor']
                                  || statistics.statisticsDisplay.entities['publication'].numbers.map['closed']['showInMonitor']
                                  || statistics.statisticsDisplay.entities['publication'].numbers.map['embargo']['showInMonitor']
                                  || statistics.statisticsDisplay.entities['publication'].numbers.map['restricted']['showInMonitor']
                                  || ( statistics.allowedEntitiesMode['showInMonitor'] && statistics.statisticsSum
                                      && statistics.allowedChartsMode['showInMonitor'] && statistics.statisticsSum['publication']
                                      && statistics.allowedChartsMode['showInMonitor']['publication'] && statistics.statisticsSum['publication'].total > 0
                                      && statistics.allowedChartsMode['showInMonitor']['publication'].length > 0))"
                          [class]="(analyticsActiveTab == 'publication' ? 'active ' : '')+' publicationAnalytics uk-icon uk-icon-button uk-margin-right'"
                          uk-tooltip="title: Publications" (click)="analyticsActiveTab = 'publication'">
                    <img src="assets/connect-assets/home/entities/publication.svg">
                  </button>
                  <button *ngIf="isEntityEnabled('dataset')
                                && statistics.statisticsSum && statistics.statisticsDisplay && statistics.statisticsSum['dataset'].total>0
                                &&
                                (  statistics.statisticsDisplay.entities['dataset'].numbers.map['total']['showInMonitor']
                                || statistics.statisticsDisplay.entities['dataset'].numbers.map['project']['showInMonitor']
                                || statistics.statisticsDisplay.entities['dataset'].numbers.map['open']['showInMonitor']
                                || statistics.statisticsDisplay.entities['dataset'].numbers.map['closed']['showInMonitor']
                                || statistics.statisticsDisplay.entities['dataset'].numbers.map['embargo']['showInMonitor']
                                || statistics.statisticsDisplay.entities['dataset'].numbers.map['restricted']['showInMonitor']
                                || ( statistics.allowedEntitiesMode['showInMonitor'] && statistics.statisticsSum
                                && statistics.allowedChartsMode['showInMonitor'] && statistics.statisticsSum['dataset']
                                && statistics.allowedChartsMode['showInMonitor']['dataset'] && statistics.statisticsSum['dataset'].total > 0
                                && statistics.allowedChartsMode['showInMonitor']['dataset'].length > 0))"
                          [class]="(analyticsActiveTab == 'dataset' ? 'active ' : '')+' datasetAnalytics uk-icon uk-icon-button uk-margin-right'"
                          uk-tooltip="title: Research Data" (click)="analyticsActiveTab = 'dataset'">
                    <img src="assets/connect-assets/home/entities/dataset.svg">
                  </button>
                  <button *ngIf="isEntityEnabled('software')
                                && statistics.statisticsSum && statistics.statisticsDisplay && statistics.statisticsSum['software'].total>0
                                &&
                                (  statistics.statisticsDisplay.entities['software'].numbers.map['total']['showInMonitor']
                                || statistics.statisticsDisplay.entities['software'].numbers.map['project']['showInMonitor']
                                || statistics.statisticsDisplay.entities['software'].numbers.map['open']['showInMonitor']
                                || statistics.statisticsDisplay.entities['software'].numbers.map['closed']['showInMonitor']
                                || statistics.statisticsDisplay.entities['software'].numbers.map['embargo']['showInMonitor']
                                || statistics.statisticsDisplay.entities['software'].numbers.map['restricted']['showInMonitor']
                                || ( statistics.allowedEntitiesMode['showInMonitor'] && statistics.statisticsSum
                                && statistics.allowedChartsMode['showInMonitor'] && statistics.statisticsSum['software']
                                && statistics.allowedChartsMode['showInMonitor']['software'] && statistics.statisticsSum['software'].total > 0
                                && statistics.allowedChartsMode['showInMonitor']['software'].length > 0))"
                          [class]="(analyticsActiveTab == 'software' ? 'active ' : '')+' softwareAnalytics uk-icon uk-icon-button uk-margin-right'"
                          uk-tooltip="title: Software" (click)="analyticsActiveTab = 'software'">
                    <img src="assets/connect-assets/home/entities/software.svg">
                  </button>
                  <button *ngIf="isEntityEnabled('orp')
                                && statistics.statisticsSum && statistics.statisticsDisplay && statistics.statisticsSum['orp'].total>0
                                &&
                                (  statistics.statisticsDisplay.entities['orp'].numbers.map['total']['showInMonitor']
                                || statistics.statisticsDisplay.entities['orp'].numbers.map['project']['showInMonitor']
                                || statistics.statisticsDisplay.entities['orp'].numbers.map['open']['showInMonitor']
                                || statistics.statisticsDisplay.entities['orp'].numbers.map['closed']['showInMonitor']
                                || statistics.statisticsDisplay.entities['orp'].numbers.map['embargo']['showInMonitor']
                                || statistics.statisticsDisplay.entities['orp'].numbers.map['restricted']['showInMonitor']
                                || ( statistics.allowedEntitiesMode['showInMonitor'] && statistics.statisticsSum
                                && statistics.allowedChartsMode['showInMonitor'] && statistics.statisticsSum['orp']
                                && statistics.allowedChartsMode['showInMonitor']['orp'] && statistics.statisticsSum['orp'].total > 0
                                && statistics.allowedChartsMode['showInMonitor']['orp'].length > 0))"
                          [class]="(analyticsActiveTab == 'orp' ? 'active ' : '')+' otherAnalytics uk-icon uk-icon-button'"
                          uk-tooltip="title: Other Research Products" (click)="analyticsActiveTab = 'orp'">
                    <img src="assets/connect-assets/home/entities/other.svg">
                  </button>
                </div>
                <hr>
                <ng-container *ngTemplateOutlet="analytics_tab_content; context: {
                    type: 'publication', typeName: 'publications'}">
                </ng-container>
                <ng-container *ngTemplateOutlet="analytics_tab_content; context: {
                    type: 'dataset', typeName: 'research data'}">
                </ng-container>
                <ng-container *ngTemplateOutlet="analytics_tab_content; context: {
                    type: 'software', typeName: 'software'}">
                </ng-container>
                <ng-container *ngTemplateOutlet="analytics_tab_content; context: {
                    type: 'orp', typeName: 'other products'}">
                </ng-container>
              </div>
            </div>
          </ng-template>
          <ng-template #enermaps_tab>
            <div class="uk-grid uk-margin-remove">
              <div class="uk-width-expand uk-padding">
                <search-tab [fetch]="fetchFeaturedDatasets" [resultType]="'dataset'"
                              [properties]="properties" customTitle="Featured Datasets"
                            [showImpactFactors]="false" [showEnermaps]="true">
                  <div class="uk-margin-top uk-margin-bottom uk-text-meta">
                    <div>Here are listed some of the most important energy datasets as selected by energy experts.</div>
                    <div>
                      Check them if you want to easily explore and visualize the European energy landscape,
                      using only well-known datasets which you can trust.
                    </div>
                  </div>
                </search-tab>
              </div>
            </div>
          </ng-template>
          <ng-template #mapping_tab>
            <div *ngIf="activeTab == 'mapping'">
              <div
                class="uk-margin-left tab-header uk-margin uk-margin-top ">
                Browse OpenAIRE Research Graph through a map of the main concepts linked to Coronavirus
              </div>
              <div class="uk-padding">
                <iframe src="https://openaire.opscidia.com/?iframe=true&keyword=covid19&mapping_size=4"
                        title="Opscidia Ontology mapping" class="uk-width-1-1" style="height:700px"></iframe>
                <span
                  class=" uk-text-baseline uk-text-meta uk-text-left ">Powered by <a
                  href="http://www.opscidia.com/" target="_blank" class="">Opscidia</a> and <a
                  href="https://graph.openaire.eu/" target="_blank" class="">OpenAIRE Research Graph</a> </span>
                <span class="uk-text-right uk-float-right uk-text-baseline uk-text-meta"> Visit <a
                  class=" uk-margin-right uk-margin-small-top"
                    href="https://openaire.opscidia.com/?iframe=true&keyword=covid19&mapping_size=4" target="_blank" >
                  Opscidia Tool
                </a></span>
              </div>
            </div>
          </ng-template>
          <ng-template #twitter_tab *ngIf="properties.environment == 'development'">
            <div>
              <div>
                <a href="https://twitter.com/{{ communityInfo.twitterAccount }}?ref_src=twsrc%5Etfw" class="twitter-timeline" data-height="900">
                  Tweets by {{ communityInfo.twitterAccount }}
                </a>
              </div>
            </div>
          </ng-template> -->

          <div id="mytabs" class="uk-grid uk-margin-remove-left uk-position-relative">
            <div class="uk-margin-medium-right uk-margin-top uk uk-padding-remove uk-width-expand">
              <div class="uk-width-1-1" uk-slider="finite: true">
                <div class="uk-position-relative " >
                  <div class="uk-slider-container ">
                    <ul class=" uk-slider-items " style="flex-wrap: nowrap !important;" >
                      <li (click)="onSelectActiveTab('summary')">
                        <ul class="uk-tab">
                          <li [class.uk-active]="activeTab == 'summary'">
                            <a class="uk-width-1-1 uk-height-1-1 uk-flex uk-flex-center">
                              Summary
                            </a>
                          </li>
                        </ul>
                      </li>
                      <li *ngIf="fetchPublications.searchUtils.totalResults > 0 && isEntityEnabled('publication')"
                        (click)="onSelectActiveTab('publications')">
                        <ul class="uk-tab">
                          <li [class.uk-active]="activeTab == 'publication'">
                            <a class="uk-width-1-1 uk-height-1-1 uk-flex uk-flex-center">
                              {{openaireEntities.PUBLICATIONS}} ({{fetchPublications.searchUtils.totalResults | number}})
                            </a>
                          </li>
                        </ul>
                      </li>
                      <li *ngIf="fetchDatasets.searchUtils.totalResults > 0 && isEntityEnabled('dataset')"
                        (click)="onSelectActiveTab('datasets')">
                        <ul class="uk-tab">
                          <li [class.uk-active]="activeTab == 'dataset'">
                            <a class="uk-width-1-1 uk-height-1-1 uk-flex uk-flex-center">
                              {{openaireEntities.DATASETS}} ({{fetchDatasets.searchUtils.totalResults | number}})
                            </a>
                          </li>
                        </ul>
                      </li>
                      <li *ngIf="fetchSoftware.searchUtils.totalResults > 0 && isEntityEnabled('software')"
                        (click)="onSelectActiveTab('software')">
                        <ul class="uk-tab">
                          <li [class.uk-active]="activeTab == 'software'">
                            <a class="uk-width-1-1 uk-height-1-1 uk-flex uk-flex-center">
                              {{openaireEntities.SOFTWARE}} ({{fetchSoftware.searchUtils.totalResults | number}})
                            </a>
                          </li>
                        </ul>
                      </li>
                      <li *ngIf="fetchOrps.searchUtils.totalResults > 0 && isEntityEnabled('orp')"
                        (click)="onSelectActiveTab('other')">
                        <ul class="uk-tab">
                          <li [class.uk-active]="activeTab == 'orp'">
                            <a class="uk-width-1-1 uk-height-1-1 uk-flex uk-flex-center">
                              {{openaireEntities.OTHER}} ({{fetchOrps.searchUtils.totalResults | number}})
                            </a>
                          </li>
                        </ul>
                      </li>
                      <li *ngIf="properties.environment == 'development' && portal.twitterAccount"
                        (click)="onSelectActiveTab('twitter')">
                        <ul class="uk-tab">
                          <li [class.uk-active]="activeTab == 'twitter'">
                            <a class="uk-width-1-1 uk-height-1-1 uk-flex uk-flex-center">
                              Twitter
                            </a>
                          </li>
                        </ul>
                      </li>
                    </ul>
                  </div>
                  <div class="">
                    <a class="uk-position-center-left uk-blur-background" uk-slider-item="previous"><span uk-icon="chevron-left"></span></a>
                    <a class="uk-position-center-right uk-blur-background" uk-slider-item="next"><span uk-icon="chevron-right"></span></a>
                  </div>
                </div>
              </div>
            </div>
            <div class="uk-padding-small uk-padding-remove-bottom uk-padding-remove-right">
              <ul class="uk-tab uk-height-1-1">
                <li *ngIf="properties.environment != 'production' && communityId == 'covid-19'" (click)="onSelectActiveTab('mapping')" [class.uk-active]="activeTab == 'mapping'">
                  <a class="uk-width-1-1 uk-height-1-1 uk-flex uk-flex-center featuredTab">
                    Ontology Mapping
                  </a>
                </li>
                <li
                  *ngIf="communityId == 'enermaps' && fetchFeaturedDatasets.searchUtils.totalResults > 0 && isEntityEnabled('dataset')"
                  (click)="onSelectActiveTab('enermaps')" [class.uk-active]="activeTab == 'enermaps'">
                  <a class="uk-width-1-1 uk-height-1-1 uk-flex uk-flex-center featuredTab">
                    Featured Datasets ({{fetchFeaturedDatasets.searchUtils.totalResults | number}})
                  </a>
                </li>
              </ul>
            </div>
          </div>

          <div *ngIf="activeTab == 'summary'">
            <div *ngIf="community" class="uk-grid uk-grid-divider uk-padding uk-padding-remove-horizontal" uk-grid>
              <div class="uk-width-expand">
                <div *ngIf="community.description" class="uk-margin-bottom ">
                  <div [innerHTML]="community.description | safeHtml">
                  </div>
                </div>
                <div class="uk-card uk-card-default uk-padding-small">
                  <div *ngIf="isRouteEnabled('/curators')" class="uk-margin-bottom">
                    <curators [longView]="false"></curators>
                  </div>
                  <div class="uk-grid uk-grid-divider uk-child-width-1-2@m" uk-grid>
                    <div>
                      <div *ngIf="community.date" class="uk-margin-small-bottom">
                        <span class="uk-text-meta">Created: </span> {{community.date | date:'dd-MMM-yyyy'}}
                      </div>
                      <div [class]="projectTotal && projectTotal > 0 && isEntityEnabled('project') && isRouteEnabled(searchLinkToProjects) ? 'uk-margin-small-bottom' : ''">
                        <span *ngIf="projectTotal  && projectTotal > 0 && isEntityEnabled('project') && isRouteEnabled(searchLinkToProjects)">
                          <span class="uk-text-meta">Projects: </span>
                          <a [queryParams]=params
                            routerLinkActive="router-link-active"
                            [routerLink]="searchLinkToProjects">{{projectTotal|number}}
                          </a>
                          <a *ngIf="projectsCalculated && (projectTotal  && projectTotal > 0 && isEntityEnabled('project') && isRouteEnabled(searchLinkToProjects))"
                            [title]="buildProjectsTooltip()" 
                            [attr.uk-tooltip]="'pos: bottom-right; delay: 10;'"
                            class="uk-link-reset uk-display-inline-block uk-margin-small-left">
                            <svg width="15" height="15" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="question" ratio="1">
                              <circle fill="none" stroke="#8E8E8E" stroke-width="1.1" cx="10" cy="10" r="9"></circle>
                              <circle fill="none" stroke="#8E8E8E" cx="10.44" cy="14.42" r="1.05"></circle>
                              <path fill="none" stroke="#8E8E8E" stroke-width="1.2"
                                d="M8.17,7.79 C8.17,4.75 12.72,4.73 12.72,7.72 C12.72,8.67 11.81,9.15 11.23,9.75 C10.75,10.24 10.51,10.73 10.45,11.4 C10.44,11.53 10.43,11.64 10.43,11.75"></path>
                            </svg>
                          </a>
                        </span>
                      </div>
                      <div *ngIf="(zenodoCommunityIdS.length + ((masterZenodoCommunity) ? 1 : 0) > 0) && isRouteEnabled(shareInZenodoPage)">
                        <span class="uk-text-meta">Linked Zenodo Communities: </span>
                        <a [queryParams]=params
                          routerLinkActive="router-link-active" [routerLink]="shareInZenodoPage">
                          <span>{{zenodoCommunityIdS.length + ((masterZenodoCommunity) ? 1 : 0)}}</span>
                        </a>
                        <a [title]="buildZenodoCommunitiesTooltip()" 
                          [attr.uk-tooltip]="'pos: bottom-right; delay: 10;'"
                          class="uk-link-reset uk-display-inline-block uk-margin-small-left">
                          <svg width="15" height="15" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="question" ratio="1">
                            <circle fill="none" stroke="#8E8E8E" stroke-width="1.1" cx="10" cy="10" r="9"></circle>
                            <circle fill="none" stroke="#8E8E8E" cx="10.44" cy="14.42" r="1.05"></circle>
                            <path fill="none" stroke="#8E8E8E" stroke-width="1.2"
                              d="M8.17,7.79 C8.17,4.75 12.72,4.73 12.72,7.72 C12.72,8.67 11.81,9.15 11.23,9.75 C10.75,10.24 10.51,10.73 10.45,11.4 C10.44,11.53 10.43,11.64 10.43,11.75"></path>
                          </svg>
                        </a>
                      </div>
                    </div>
                    <div>
                      <div [class]="community.date || subscribers ? 'uk-margin-small-bottom' : ''">
                        <span>
                          <subscribe *ngIf="communityId" [communityId]="communityId" showNumbers=true
                            (countSubscribersEvent)="countSubscribersEvent($event)">
                          </subscribe>
                        </span>
                      </div>
                      <div [class]="contentProviderTotal  && contentProviderTotal > 0 && isEntityEnabled('datasource') && isRouteEnabled(searchLinkToDataProviders) ? 'uk-margin-small-bottom' : ''">
                        <span *ngIf="contentProviderTotal  && contentProviderTotal > 0 && isEntityEnabled('datasource') && isRouteEnabled(searchLinkToDataProviders)">
                          <span class="uk-text-meta">Content Providers: </span>
                          <a [queryParams]=params
                            routerLinkActive="router-link-active"
                            [routerLink]="searchLinkToDataProviders">{{contentProviderTotal|number}}
                          </a>
                          <a *ngIf="contentProvidersCalculated && (contentProviderTotal  && contentProviderTotal > 0 && isEntityEnabled('datasource') && isRouteEnabled(searchLinkToDataProviders))"
                            [title]="buildContentProvidersTooltip()" 
                            [attr.uk-tooltip]="'pos: bottom-right; delay: 10;'"
                            class="uk-link-reset uk-display-inline-block uk-margin-small-left">
                            <svg width="15" height="15" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="question" ratio="1">
                              <circle fill="none" stroke="#8E8E8E" stroke-width="1.1" cx="10" cy="10" r="9"></circle>
                              <circle fill="none" stroke="#8E8E8E" cx="10.44" cy="14.42" r="1.05"></circle>
                              <path fill="none" stroke="#8E8E8E" stroke-width="1.2"
                                d="M8.17,7.79 C8.17,4.75 12.72,4.73 12.72,7.72 C12.72,8.67 11.81,9.15 11.23,9.75 C10.75,10.24 10.51,10.73 10.45,11.4 C10.44,11.53 10.43,11.64 10.43,11.75"></path>
                            </svg>
                          </a>
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div *ngIf="isRouteEnabled('/subjects') && displayedAllSubjects && displayedAllSubjects.length > 0" class="uk-width-1-3@m">
                <div>
                  <div class="uk-text-meta uk-margin-small-bottom">Subjects</div>
                  <span *ngFor="let item of displayedAllSubjects.slice(0,20) let i=index">
                    <span *ngIf="item.value != ''">
                      <a class="portal-link"
                        [queryParams]="{f0:item.type,fv0:createParams(item.value)}"
                        routerLinkActive="router-link-active" [routerLink]="searchLinkToAdvancedResults">
                        <span>{{item.value}}</span>
                      </a>
                      <span *ngIf="i < displayedAllSubjects.length-1 && i != 19">, </span>
                    </span>
                  </span>
                  <div class="uk-animation-fade uk-margin-top">
                    <a class="uk-display-inline-block uk-text-uppercase uk-button uk-button-text" routerLinkActive="router-link-active" [routerLink]="'/subjects'">
                      View all
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div *ngIf="activeTab == 'publication' && fetchPublications.searchUtils.totalResults > 0 && isEntityEnabled('publication')">
            <ng-container *ngTemplateOutlet="tab_content; context: {
              resultType: 'publication', fetch: fetchPublications,
              searchLinkToAdvancedPage: properties.searchLinkToAdvancedResults,
              params: getParamsForSearchLink('publications'),
              type: 'publication', typeName: 'publication'}">
            </ng-container>
          </div>
          <div *ngIf="activeTab == 'dataset' && fetchDatasets.searchUtils.totalResults > 0 && isEntityEnabled('dataset')">
            <ng-container *ngTemplateOutlet="tab_content; context: {
              resultType: 'dataset', fetch: fetchDatasets,
              searchLinkToAdvancedPage: properties.searchLinkToAdvancedResults,
              params: getParamsForSearchLink('datasets'),
              type: 'dataset', typeName: 'research data'}">
            </ng-container>
          </div>
          <div *ngIf="activeTab == 'software' && fetchSoftware.searchUtils.totalResults > 0 && isEntityEnabled('software')">
            <ng-container *ngTemplateOutlet="tab_content; context: {
              resultType: 'software', fetch: fetchSoftware,
              searchLinkToAdvancedPage: properties.searchLinkToAdvancedResults,
              params: getParamsForSearchLink('software'),
              type: 'software', typeName: 'software'}">
            </ng-container>
          </div>
          <div *ngIf="activeTab == 'orp' && fetchOrps.searchUtils.totalResults > 0 && isEntityEnabled('orp')">
            <ng-container *ngTemplateOutlet="tab_content; context: {
              resultType: 'other', fetch: fetchOrps,
              searchLinkToAdvancedPage: properties.searchLinkToAdvancedResults,
              params: getParamsForSearchLink('other'),
              type: 'orp', typeName: 'other products'}">
            </ng-container>
          </div>
          <div *ngIf="activeTab == 'twitter' && properties.environment == 'development' && portal.twitterAccount">
            <div>
              <div>
                <a href="https://twitter.com/{{ portal.twitterAccount }}?ref_src=twsrc%5Etfw" class="twitter-timeline" data-height="900">
                  Tweets by {{portal.twitterAccount}}
                </a>
              </div>
            </div>
          </div>
          <div *ngIf="activeTab == 'mapping' && properties.environment != 'production' && communityId == 'covid-19'"
            class="uk-padding uk-padding-remove-horizontal">
            <div>
              Browse OpenAIRE Research Graph through a map of the main concepts linked to Coronavirus
            </div>
            <div class="uk-margin-medium-top">
              <iframe src="https://openaire.opscidia.com/?iframe=true&keyword=covid19&mapping_size=4"
                title="Opscidia Ontology mapping" class="uk-width-1-1" style="height:700px"></iframe>
              <span class=" uk-text-baseline uk-text-meta uk-text-left ">
                Powered by 
                <a href="http://www.opscidia.com/" target="_blank" class="">Opscidia</a> and 
                <a href="https://graph.openaire.eu/" target="_blank" class="">OpenAIRE Research Graph</a> 
              </span>
              <span class="uk-text-right uk-float-right uk-text-baseline uk-text-meta"> Visit 
                <a class="uk-margin-right uk-margin-small-top" href="https://openaire.opscidia.com/?iframe=true&keyword=covid19&mapping_size=4" target="_blank">
                  Opscidia Tool
                </a>
              </span>
            </div>
          </div>
          <div
            *ngIf="activeTab == 'enermaps' && communityId == 'enermaps' && fetchFeaturedDatasets.searchUtils.totalResults > 0 && isEntityEnabled('dataset')">
            <div class="uk-grid uk-margin-remove">
              <div class="uk-width-expand uk-padding uk-padding-remove-horizontal">
                <search-tab [fetch]="fetchFeaturedDatasets" [resultType]="'dataset'"
                            [properties]="properties" customTitle="Featured Datasets" [currentPage]="page"
                            [showEnermaps]="true">
                  <div class="uk-margin-top uk-margin-medium-bottom uk-text-meta">
                    <div>Here are listed some of the most important energy datasets as selected by energy experts.</div>
                    <div>
                      Check them if you want to easily explore and visualize the European energy landscape,
                      using only well-known datasets which you can trust.
                    </div>
                  </div>
                  <no-load-paging *ngIf="fetchFeaturedDatasets && fetchFeaturedDatasets.results.length > size" [type]="'Featured Datasets'"
                    (pageChange)="updatePage($event)"
                    [page]="page" [pageSize]="size"
                    [totalResults]="fetchFeaturedDatasets.results.length" >
                  </no-load-paging>
                </search-tab>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- <ng-container *ngIf="communityId == 'enermaps'">
    <div class="uk-section uk-container uk-container-large tm-middle">
      <div class="uk-margin-large-bottom">
        <h2 class="uk-margin-top uk-text-center">
          About Enermaps
        </h2>
        <div class="uk-padding uk-grid uk-child-width-1-1@s uk-child-width-1-2@m uk-child-width-1-4@l uk-grid-large uk-margin-medium-top" uk-grid>
          <div class="uk-flex uk-flex-column uk-flex-middle">
            <div class="icon-wrapper uk-flex uk-flex-center uk-flex-middle">
              <img src="assets/connect-assets/home/website.svg">
            </div>
            <div class="uk-margin-medium-top">
              <a href="https://enermaps.eu/" target="_blank" class="uk-button uk-button-text uk-text-bolder custom-text">Project Website</a>
            </div>
          </div>
          <div class="uk-flex uk-flex-column uk-flex-middle">
            <div class="icon-wrapper uk-flex uk-flex-center uk-flex-middle">
              <img src="assets/connect-assets/home/map.svg">
            </div>
            <div class="uk-margin-medium-top">
              <a href="https://lab.idiap.ch/enermaps/" target="_blank" class="uk-button uk-button-text uk-text-bolder custom-text">Open Data Management Tool</a>
            </div>
          </div>
          <div class="uk-flex uk-flex-column uk-flex-middle">
            <div class="icon-wrapper uk-flex uk-flex-center uk-flex-middle">
              <img src="assets/connect-assets/home/wiki.svg">
            </div>
            <div class="uk-margin-medium-top">
              <a href="https://enermaps-wiki.herokuapp.com/" target="_blank" class="uk-button uk-button-text uk-text-bolder custom-text">Wiki</a>
            </div>
          </div>
          <div class="uk-flex uk-flex-column uk-flex-middle">
            <div class="icon-wrapper uk-flex uk-flex-center uk-flex-middle">
              <img src="assets/connect-assets/home/training.svg">
            </div>
            <div class="uk-margin-medium-top">
              <a href="https://www.youtube.com/watch?v=fHBeaKWS8Ss&list=PLhwt57nEFA8n295WJq_ickGCIBYHDcjm3&ab_channel=REVOLVE" target="_blank" class="uk-button uk-button-text uk-text-bolder custom-text">Training</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </ng-container> -->

  <div *ngIf="communityId && portal && isRouteEnabled('/organizations')"
    class="uk-container uk-container-large">
    <affiliations [longView]="false" [getAffiliationsFromAPI]="true" [communityFirstPage]="true"></affiliations>
  </div>

  <div *ngIf="(communityId == null || communityId == '' ) && !portal"
    class="uk-section tm-middle uk-container uk-margin-large-top  ">
    <div class="uk-container  uk-margin-bottom uk-grid">
      <div class="uk-width-expand uk-padding-remove">
        <article class="uk-article ">
          <div class="uk-child-width-1-6@l uk-child-width-1-6@m uk-child-width-1-3@s uk-text-center uk-alert uk-alert-primary">
            No community chosen
          </div>
          <div *ngIf="communityId">

          </div>
        </article>
      </div>
    </div>
  </div>
  </div>
  <error *ngIf="portal && community && isPrivate()" [page]="community.status == 'manager'?'-1':null">
  </error>
</div>
