open-science-observatory-ui/src/app/pages/country/country.component.html

561 lines
34 KiB
HTML

<div class="greySection">
<section class="uk-padding-small" id="sect-country-page">
<div class="uk-scrollspy-init-inview uk-scrollspy-inview uk-animation-scale-up uk-padding-remove" data-uk-scrollspy="{cls:'uk-animation-scale-up uk-invisible',delay:300,topoffset:-100}">
<!--<div class="uk-container uk-container-expand uk-container-center uk-scrollspy-init-inview uk-scrollspy-inview uk-animation-scale-up uk-padding-remove" data-uk-scrollspy="{cls:'uk-animation-scale-up uk-invisible',delay:300,topoffset:-100}">-->
<div class="uk-grid uk-grid-match uk-grid-small">
<div class="uk-width-4-5@m uk-width-4-5@l uk-width-1-1@s">
<div class="uk-container uk-container-expand uk-margin-medium-top">
<!--LAPTOP & PAD LANDSCAPE-->
<div class="uk-visible@m">
<ul *ngIf="countryPageOverviewData && countryPageOverviewData.name" class="uk-breadcrumb">
<li><a routerLink="/home">Home</a></li>
<li><span>{{countryPageOverviewData.name}}</span></li>
</ul>
<div class="countryPageHeader">
<div *ngIf="countryPageOverviewData && countryPageOverviewData.name" class="">
<img src="../../../assets/img/flags/{{countryCode | lowercase}}-flag-round.png" class="flag-image" width="132" height="132">
<div class="uk-inline uk-margin-left">
<h1>{{countryPageOverviewData.name}}</h1>
<span class="lastUpdateInfo">Data Last Updated: </span>
<span *ngIf="lastUpdateDate" class="lastUpdateInfo">{{lastUpdateDate}}</span>
</div>
</div>
<!-- TODO uncomment when implemented -->
<!--<div class="actionButtonsCountryPage uk-text-right">-->
<!--<a class=""><i class="fas fa-code uk-margin-small-right"></i>Embed</a>-->
<!--&lt;!&ndash;<a class="uk-margin-left"><i class="fas fa-download uk-margin-small-right"></i>Download CSV</a>&ndash;&gt;-->
<!--<a class="uk-margin-left"><i class="fas fa-file-pdf uk-margin-small-right"></i>Download PDF</a>-->
<!--</div>-->
</div>
</div>
<!--MOBILE & PAD PORTRAIT-->
<div class="uk-hidden@m uk-text-center">
<div *ngIf="countryPageOverviewData && countryPageOverviewData.name" class="">
<img src="../../../assets/img/flags/{{countryCode | lowercase}}-flag-round.png" class="flag-image uk-display-block uk-margin-auto-left uk-margin-auto-right" width="103" height="103">
<div class="uk-margin-top">
<h1 class="uk-margin-small-bottom">{{countryPageOverviewData.name}}</h1>
<span class="lastUpdateInfo">Data Last Updated: 21 May 2020</span>
</div>
</div>
</div>
</div>
<div class="uk-container uk-container-expand uk-margin-large-top">
<!--Overview cards-->
<!--LAPTOP & PAD LANDSCAPE-->
<div class="uk-visible@m">
<div class="uk-width-1-1 indicatorCards">
<div class="uk-grid uk-grid-small uk-child-width-1-2@s uk-child-width-1-4@m uk-child-width-1-4@l uk-margin-top uk-grid-match" data-uk-grid-margin="">
<!--<div class="uk-grid uk-grid-small uk-grid-width-small-1-2 uk-grid-width-medium-1-3 uk-grid-width-large-1-5 uk-margin-top uk-grid-match" data-uk-grid-margin="">-->
<div class="uk-row-first">
<div class="md-card">
<div class="md-card-content">
<!--top number-->
<div class="uk-margin-top">
<div class="uk-float-right uk-margin-small-right">
<img src="../../../assets/img/icons/publications-icon.svg" width="40" height="40">
</div>
<h3 class="uk-margin-remove">
<span *ngIf="!countryPageOverviewData || !countryPageOverviewData.publicationsAffiliated || !countryPageOverviewData.publicationsAffiliated.oa" class="number">--</span>
<span *ngIf="countryPageOverviewData?.publicationsAffiliated?.oa" class="number">{{countryPageOverviewData.publicationsAffiliated.oa | number}}</span>
</h3>
</div>
<div class="uk-margin-top">
<span class=""><i>Open Access publications affiliated to an organization in the country</i></span>
</div>
<div *ngIf="countryPageOverviewData?.publicationsAffiliated?.percentage" class="uk-margin-top">
<span class="number">{{countryPageOverviewData.publicationsAffiliated.percentage | number :'1.0-1'}}%</span> share open access
<div class="progress uk-margin-small-top">
<div [ngStyle]="{'width': countryPageOverviewData.publicationsAffiliated.percentage+'%'}" class="progress-bar progress-bar-publications animate-progress-bar"></div>
</div>
</div>
<hr class="greyBoldDivider uk-margin-medium-top uk-margin-medium-bottom">
<!--bottom number-->
<div class="uk-margin-top">
<!--<div class="uk-float-right uk-margin-small-right">-->
<!--<img src="../../../assets/img/icons/publications-icon.svg" width="40" height="40">-->
<!--</div>-->
<h3 class="uk-margin-remove">
<span *ngIf="!countryPageOverviewData || !countryPageOverviewData.publicationsDeposited || !countryPageOverviewData.publicationsDeposited.oa" class="number">--</span>
<span *ngIf="countryPageOverviewData?.publicationsDeposited?.oa" class="number">{{countryPageOverviewData.publicationsDeposited.oa | number}}</span>
</h3>
</div>
<div class="uk-margin-top">
<span class=""><i>Open Access publications in the country's institutional repositories</i></span>
</div>
<div *ngIf="countryPageOverviewData?.publicationsDeposited?.percentage" class="uk-margin-top">
<span class="number">{{countryPageOverviewData.publicationsDeposited.percentage | number :'1.0-1'}}%</span> share open access
<div class="progress uk-margin-small-top">
<div [ngStyle]="{'width': countryPageOverviewData.publicationsDeposited.percentage+'%'}" class="progress-bar progress-bar-publications animate-progress-bar"></div>
</div>
</div>
</div>
</div>
</div>
<div class="">
<div class="md-card">
<div class="md-card-content">
<!--top number-->
<div class="uk-margin-top">
<div class="uk-float-right uk-margin-small-right">
<img src="../../../assets/img/icons/datasets-icon.svg" width="33" height="40">
</div>
<h3 class="uk-margin-remove">
<span *ngIf="!countryPageOverviewData || !countryPageOverviewData.datasetsAffiliated || !countryPageOverviewData.datasetsAffiliated.oa" class="number">--</span>
<span *ngIf="countryPageOverviewData?.datasetsAffiliated?.oa" class="number">{{countryPageOverviewData.datasetsAffiliated.oa | number}}</span>
</h3>
</div>
<div class="uk-margin-top">
<span class=""><i>Open Access datasets affiliated to an organization in the country</i></span>
</div>
<div *ngIf="countryPageOverviewData?.datasetsAffiliated?.percentage" class="uk-margin-top">
<span class="number">{{countryPageOverviewData.datasetsAffiliated.percentage | number :'1.0-1'}}%</span> share open access
<div class="progress uk-margin-small-top">
<div [ngStyle]="{'width': countryPageOverviewData.datasetsAffiliated.percentage+'%'}" class="progress-bar progress-bar-datasets animate-progress-bar"></div>
</div>
</div>
<hr class="greyBoldDivider uk-margin-medium-top uk-margin-medium-bottom">
<!--bottom number-->
<div class="uk-margin-top">
<!--<div class="uk-float-right uk-margin-small-right">-->
<!--<img src="../../../assets/img/icons/datasets-icon.svg" width="33" height="40">-->
<!--</div>-->
<h3 class="uk-margin-remove">
<span *ngIf="!countryPageOverviewData || !countryPageOverviewData.datasetsDeposited || !countryPageOverviewData.datasetsDeposited.oa" class="number">--</span>
<span *ngIf="countryPageOverviewData?.datasetsDeposited?.oa" class="number">{{countryPageOverviewData.datasetsDeposited.oa | number}}</span>
</h3>
</div>
<div class="uk-margin-top">
<span class=""><i>Open Access datasets in the country's repositories</i></span>
</div>
<div *ngIf="countryPageOverviewData?.datasetsDeposited?.percentage" class="uk-margin-top">
<span class="number">{{countryPageOverviewData.datasetsDeposited.percentage | number :'1.0-1'}}%</span> share open access
<div class="progress uk-margin-small-top">
<div [ngStyle]="{'width': countryPageOverviewData.datasetsDeposited.percentage+'%'}" class="progress-bar progress-bar-datasets animate-progress-bar"></div>
</div>
</div>
</div>
</div>
</div>
<div class="">
<div class="md-card" style="height: 47%">
<div class="md-card-content">
<div class="uk-margin-top">
<div class="uk-float-right uk-margin-small-right">
<img src="../../../assets/img/icons/repositories-icon.svg" width="43" height="40">
</div>
<h3 class="uk-margin-remove">
<span *ngIf="!countryPageOverviewData || !countryPageOverviewData.repositories || !countryPageOverviewData.repositories.total" class="number">--</span>
<span *ngIf="countryPageOverviewData?.repositories?.total" class="number">{{countryPageOverviewData.repositories.total | number}}</span>
</h3>
</div>
<div class="uk-margin-top">
<span class=""><i>repositories</i> in openDOAR & re3data</span>
</div>
<div *ngIf="countryPageOverviewData?.repositories?.percentage" class="uk-margin-top">
<span class="number">{{countryPageOverviewData.repositories.percentage | number :'1.0-1'}}%</span> validated
<div class="progress uk-margin-small-top">
<div [ngStyle]="{'width': countryPageOverviewData.repositories.percentage+'%'}" class="progress-bar progress-bar-repositories animate-progress-bar"></div>
</div>
</div>
</div>
</div>
</div>
<div class="">
<div class="md-card" style="height: 47%">
<div class="md-card-content">
<div class="uk-margin-top">
<div class="uk-float-right uk-margin-small-right">
<img src="../../../assets/img/icons/journals-icon.svg" width="43" height="40">
</div>
<h3 class="uk-margin-remove">
<span *ngIf="!countryPageOverviewData || !countryPageOverviewData.journals || !countryPageOverviewData.journals.total" class="number">--</span>
<span *ngIf="countryPageOverviewData?.journals?.total" class="number">{{countryPageOverviewData.journals.total | number}}</span>
<!--<span *ngIf="overviewData.overview.journals?.oa" class="number">{{overviewData.overview.journals.oa | number}}</span>-->
<!--<span *ngIf="!overviewData.overview.journals || !overviewData.overview.journals.oa" class="number">--</span>-->
</h3>
</div>
<div class="uk-margin-top">
<span class=""><i>Open Access journals</i> in DOAJ</span>
</div>
<div *ngIf="countryPageOverviewData?.journals?.percentage" class="uk-margin-top">
<span class="number">{{countryPageOverviewData.journals.percentage | number :'1.0-1'}}%</span> validated
<div class="progress uk-margin-small-top">
<div [ngStyle]="{'width': countryPageOverviewData.journals.percentage+'%'}" class="progress-bar progress-bar-journals animate-progress-bar"></div>
</div>
</div>
</div>
</div>
</div>
<!--<div class="">-->
<!--<div class="md-card" style="height: 47%">-->
<!--<div class="md-card-content">-->
<!--<div class="uk-margin-top">-->
<!--<div class="uk-float-right uk-margin-small-right">-->
<!--<img src="../../../assets/img/icons/policies-icon.svg" width="36" height="40">-->
<!--</div>-->
<!--<h3 class="uk-margin-remove">-->
<!--<span class="number">&#45;&#45;</span>-->
<!--&lt;!&ndash;<span *ngIf="overviewData.overview.policies?.oa" class="number">{{overviewData.overview.policies.oa | number}}</span>&ndash;&gt;-->
<!--&lt;!&ndash;<span *ngIf="!overviewData.overview.policies || !overviewData.overview.policies.oa" class="number">&#45;&#45;</span>&ndash;&gt;-->
<!--</h3>-->
<!--</div>-->
<!--<div class="uk-margin-top">-->
<!--<span class="">organizations with <i>OA policies</i></span>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--<div></div>-->
<!--</div>-->
</div>
</div>
</div>
<!--MOBILE & PAD PORTRAIT-->
<div class="uk-hidden@m uk-text-center uk-margin-medium-top">
<div *ngIf="countryPageOverviewData" class="md-card chartCard overviewMobile">
<div class="md-card-content">
<div class="uk-grid uk-margin-top">
<div class="uk-width-1-5">
<img src="../../../assets/img/icons/publications-icon.svg" width="30" height="30">
</div>
<div class="uk-width-2-5">
<div *ngIf="countryPageOverviewData.publicationsAffiliated?.oa" class="number big">{{countryPageOverviewData.publicationsAffiliated.oa | number}}</div>
<div *ngIf="!countryPageOverviewData.publicationsAffiliated || !countryPageOverviewData.publicationsAffiliated.oa" class="number big">--</div>
<div class="uk-margin-small-top">OA PUBLICATIONS AFFILIATED TO AN ORGANIZATION IN THE COUNTRY</div>
</div>
<div *ngIf="countryPageOverviewData.publicationsAffiliated?.percentage" class="uk-width-2-5">
<div class="progress">
<div [ngStyle]="{'width': countryPageOverviewData.publicationsAffiliated.percentage+'%'}" class="progress-bar progress-bar-publications animate-progress-bar"></div>
</div>
<div class="uk-margin-small-top">
<span class="number">{{countryPageOverviewData.publicationsAffiliated.percentage | number :'1.0-1'}}%</span> OA
</div>
</div>
</div>
<div class="uk-grid uk-margin-top">
<div class="uk-width-1-5">
</div>
<div class="uk-width-2-5">
<div *ngIf="countryPageOverviewData.publicationsDeposited?.oa" class="number big">{{countryPageOverviewData.publicationsDeposited.oa | number}}</div>
<div *ngIf="!countryPageOverviewData.publicationsDeposited || !countryPageOverviewData.publicationsDeposited.oa" class="number big">--</div>
<div class="uk-margin-small-top">OA PUBLICATIONS IN INSTITUTIONAL REPOSITORIES</div>
</div>
<div *ngIf="countryPageOverviewData.publicationsDeposited?.percentage" class="uk-width-2-5">
<div class="progress">
<div [ngStyle]="{'width': countryPageOverviewData.publicationsDeposited.percentage+'%'}" class="progress-bar progress-bar-publications animate-progress-bar"></div>
</div>
<div class="uk-margin-small-top">
<span class="number">{{countryPageOverviewData.publicationsDeposited.percentage | number :'1.0-1'}}%</span> OA
</div>
</div>
</div>
<div class="uk-grid uk-margin-medium-top">
<div class="uk-width-1-5">
<img src="../../../assets/img/icons/datasets-icon.svg" width="30" height="30">
</div>
<div class="uk-width-2-5">
<div *ngIf="countryPageOverviewData.datasetsAffiliated?.oa" class="number big">{{countryPageOverviewData.datasetsAffiliated.oa | number}}</div>
<div *ngIf="!countryPageOverviewData.datasetsAffiliated || !countryPageOverviewData.datasetsAffiliated.oa" class="number big">--</div>
<div class="uk-margin-small-top">OA DATASETS AFFILIATED TO AN ORGANIZATION IN THE COUNTRY</div>
</div>
<div *ngIf="countryPageOverviewData.datasetsAffiliated?.percentage" class="uk-width-2-5">
<div class="progress">
<div [ngStyle]="{'width': countryPageOverviewData.datasetsAffiliated.percentage+'%'}" class="progress-bar progress-bar-datasets animate-progress-bar"></div>
</div>
<div class="uk-margin-small-top">
<span class="number">{{countryPageOverviewData.datasetsAffiliated.percentage | number :'1.0-1'}}%</span> OA
</div>
</div>
</div>
<div class="uk-grid uk-margin-medium-top">
<div class="uk-width-1-5">
</div>
<div class="uk-width-2-5">
<div *ngIf="countryPageOverviewData.datasetsDeposited?.oa" class="number big">{{countryPageOverviewData.datasetsDeposited.oa | number}}</div>
<div *ngIf="!countryPageOverviewData.datasetsDeposited || !countryPageOverviewData.datasetsDeposited.oa" class="number big">--</div>
<div class="uk-margin-small-top">OA DATASETS IN REPOSITORIES</div>
</div>
<div *ngIf="countryPageOverviewData.datasetsDeposited?.percentage" class="uk-width-2-5">
<div class="progress">
<div [ngStyle]="{'width': countryPageOverviewData.datasetsDeposited.percentage+'%'}" class="progress-bar progress-bar-datasets animate-progress-bar"></div>
</div>
<div class="uk-margin-small-top">
<span class="number">{{countryPageOverviewData.datasetsDeposited.percentage | number :'1.0-1'}}%</span> OA
</div>
</div>
</div>
<div class="uk-grid uk-margin-medium-top">
<div class="uk-width-1-5">
<img src="../../../assets/img/icons/repositories-icon.svg" width="30" height="30">
</div>
<div class="uk-width-2-5">
<div *ngIf="countryPageOverviewData.repositories?.oa" class="number big">{{countryPageOverviewData.repositories.oa | number}}</div>
<div *ngIf="!countryPageOverviewData.repositories || !countryPageOverviewData.repositories.oa" class="number big">--</div>
<div class="uk-margin-small-top">VALIDATED REPOSITORIES</div>
</div>
<div *ngIf="countryPageOverviewData.repositories?.percentage" class="uk-width-2-5">
<div class="progress">
<div [ngStyle]="{'width': countryPageOverviewData.repositories.percentage+'%'}" class="progress-bar progress-bar-repositories animate-progress-bar"></div>
</div>
<div class="uk-margin-small-top">
<span class="number">{{countryPageOverviewData.repositories.percentage | number :'1.0-1'}}%</span> VALIDATED
</div>
</div>
</div>
<div class="uk-grid uk-margin-medium-top">
<div class="uk-width-1-5">
<img src="../../../assets/img/icons/journals-icon.svg" width="30" height="30">
</div>
<div class="uk-width-2-5">
<div *ngIf="countryPageOverviewData.journals?.oa" class="number big">{{countryPageOverviewData.journals.oa | number}}</div>
<div *ngIf="!countryPageOverviewData.journals || !countryPageOverviewData.journals.oa" class="number big">--</div>
<div class="uk-margin-small-top">VALIDATED JOURNALS</div>
</div>
<div *ngIf="countryPageOverviewData.journals?.percentage" class="uk-width-2-5">
<div class="progress">
<div [ngStyle]="{'width': countryPageOverviewData.journals.percentage+'%'}" class="progress-bar progress-bar-journals animate-progress-bar"></div>
</div>
<div class="uk-margin-small-top">
<span class="number">{{countryPageOverviewData.journals.percentage | number : '1.0-1'}}%</span> Validated
</div>
</div>
</div>
<!--<div class="uk-grid uk-margin-medium-top uk-margin-bottom">-->
<!--<div class="uk-width-1-5">-->
<!--<img src="../../../assets/img/icons/policies-icon.svg" width="30" height="30">-->
<!--</div>-->
<!--<div class="uk-width-2-5">-->
<!--<div *ngIf="countryPageOverviewData.policies?.oa" class="number big">{{countryPageOverviewData.policies.oa | number}}</div>-->
<!--<div *ngIf="!countryPageOverviewData.policies || !countryPageOverviewData.policies.oa" class="number big">&#45;&#45;</div>-->
<!--<div class="uk-margin-small-top">OA POLICIES</div>-->
<!--</div>-->
<!--<div class="uk-width-2-5">-->
<!--</div>-->
<!--</div>-->
</div>
</div>
</div>
</div>
</div>
<!--Research Overview-->
<!--LAPTOP & PAD LANDSCAPE-->
<div class="uk-visible@m uk-width-1-5@m uk-width-1-5@l">
<div class="md-card infoBox">
<div class="md-card-toolbar">
<h3 class="uk-text-center uk-margin-small-top">
Research Overview
</h3>
</div>
<div class="md-card-content">
<div class="numbers">
<div class="indicator uk-margin-small-top">
<ng-container *ngIf="countryPageOverviewData?.rndExpenditure">
<span class="number primary" *ngIf="countryPageOverviewData?.rndExpenditure?.expenditure">{{countryPageOverviewData.rndExpenditure.expenditure}}%</span>
<span class="number primary" *ngIf="!countryPageOverviewData || !countryPageOverviewData.rndExpenditure || !countryPageOverviewData.rndExpenditure.expenditure">--</span>
<span>
<span><i> of GDP for </i></span>
<span class="number primary">{{countryPageOverviewData.rndExpenditure.year}}</span>
<div><i> R&D expenditure</i></div>
</span>
</ng-container>
<ng-container *ngIf="!countryPageOverviewData || !countryPageOverviewData.rndExpenditure">
<span class="number primary">--</span>
<span><i>R&D expenditure</i></span>
</ng-container>
</div>
<hr class="greyBoldDivider uk-margin-medium-top uk-margin-medium-bottom">
<div class="indicator">
<span class="number primary" *ngIf="countryPageOverviewData?.funders">{{countryPageOverviewData.funders}}</span>
<span class="number primary" *ngIf="!countryPageOverviewData || !countryPageOverviewData.funders">--</span>
<span><i>funders</i></span>
</div>
<hr class="greyBoldDivider uk-margin-medium-top uk-margin-medium-bottom">
<div class="indicator">
<span class="number primary" *ngIf="countryPageOverviewData?.fundingOrganizations">{{countryPageOverviewData.fundingOrganizations}}</span>
<span class="number primary" *ngIf="!countryPageOverviewData || !countryPageOverviewData.fundingOrganizations">--</span>
<span><i>funding organizations</i></span>
</div>
<hr class="greyBoldDivider uk-margin-medium-top uk-margin-medium-bottom">
<div class="indicator">
<span class="number primary" *ngIf="countryPageOverviewData?.ec_fundedProjects">{{countryPageOverviewData.ec_fundedProjects}}</span>
<span class="number primary" *ngIf="!countryPageOverviewData || !countryPageOverviewData.ec_fundedProjects">--</span>
<span><i>projects funded by the European Commission since 2013</i></span>
</div>
</div>
<div class="uk-text-center uk-margin-xlarge-top">
<div class="uk-text-center uk-margin-medium-bottom">
<span class="openaire-symbol-wrapper">
<img class="" src="https://www.openaire.eu/images/OpenAIRE_branding/Symbol.png" height="30px" width="30px">
</span>
</div>
<a class="uk-link" href="{{linkToCountryInOpenAIRE}}" target="_blank">Country page in <strong>OpenAIRE</strong><i class="fas fa-long-arrow-alt-right uk-margin-left"></i></a>
</div>
</div>
</div>
</div>
<!--Research Overview-->
<!--MOBILE & PAD PORTRAIT-->
<div class="uk-hidden@m uk-width-1-1@s uk-margin-medium-top">
<div class="uk-container uk-container-expand">
<div *ngIf="countryPageOverviewData" class="md-card chartCard overviewMobile">
<div class="md-card-content">
<div class="numbers">
<div class="">
<ng-container *ngIf="countryPageOverviewData?.rndExpenditure">
<span class="number big primary">{{countryPageOverviewData.rndExpenditure.expenditure}}%</span>
<span>
<span class="uk-margin-small-right uk-margin-small-left"> OF GDP FOR </span>
<span class="number big primary">{{countryPageOverviewData.rndExpenditure.year}}</span>
<div class="uk-margin-small-top"> R&D EXPENDITURE</div>
</span>
</ng-container>
<ng-container *ngIf="!countryPageOverviewData || !countryPageOverviewData.rndExpenditure">
<div class="number big primary">--</div>
<div class="uk-margin-small-top">R&D EXPENDITURE</div>
</ng-container>
</div>
<div class="uk-margin-medium-top">
<div class="number big primary" *ngIf="countryPageOverviewData?.funders">{{countryPageOverviewData.funders}}</div>
<div class="number big primary" *ngIf="!countryPageOverviewData || !countryPageOverviewData.funders">--</div>
<div class="uk-margin-small-top">FUNDERS</div>
</div>
<div class="uk-margin-medium-top">
<div class="number big primary" *ngIf="countryPageOverviewData?.fundingOrganizations">{{countryPageOverviewData.fundingOrganizations}}</div>
<div class="number big primary" *ngIf="!countryPageOverviewData || !countryPageOverviewData.fundingOrganizations">--</div>
<div class="uk-margin-small-top">FUNDING ORGANIZATIONS</div>
</div>
<div class=" uk-margin-medium-top">
<div class="number big primary" *ngIf="countryPageOverviewData?.ec_fundedProjects">{{countryPageOverviewData.ec_fundedProjects}}</div>
<div class="number big primary" *ngIf="!countryPageOverviewData || !countryPageOverviewData.ec_fundedProjects">--</div>
<div class="uk-margin-small-top">PROJECTS FUNDED BY THE EUROPEAN COMMISSION SINCE 2013</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!--TABS SECTION-->
<section class="section uk-margin-large-top" id="sect-tabs">
<div class="uk-container uk-container-expand uk-container-center uk-scrollspy-init-inview uk-scrollspy-inview uk-animation-scale-up" data-uk-scrollspy="{cls:'uk-animation-scale-up uk-invisible',delay:300,topoffset:-100}">
<div class="">
<!--LAPTOP & PAD LANDSCAPE-->
<ul class="uk-visible@m uk-tab uk-tab-large uk-flex-center" data-uk-tab="{connect:'#team_tabbed',animation: 'slide-bottom'}">
<li [routerLinkActive]="['uk-active']" aria-expanded="true"><a [routerLink]="['./overview']">Overview</a></li>
<li [routerLinkActive]="['uk-active']" aria-expanded="false"><a [routerLink]="['./open-science']">Open Science</a></li>
<!--<li [routerLinkActive]="['uk-active']" aria-expanded="false"><a [routerLink]="['./collaboration']">Collaboration</a></li>-->
<li class="uk-disabled" aria-expanded="false"><a href="#" data-uk-tooltip="{title: Stay tuned..; pos: top-left}">Collaboration</a></li>
<li class="uk-disabled" aria-expanded="false" data-uk-tooltip="Stay tuned.."><a href="#">Impact</a></li>
<li class="uk-disabled" aria-expanded="false" data-uk-tooltip="Stay tuned.."><a href="#">Innovation</a></li>
<!--<li class="uk-tab-responsive uk-active uk-hidden" aria-haspopup="true" aria-expanded="false"><a>Developers</a><div class="uk-dropdown uk-dropdown-small" aria-hidden="true"><ul class="uk-nav uk-nav-dropdown"></ul><div></div></div></li>-->
</ul>
<!--MOBILE & PAD PORTRAIT-->
<ul class="uk-hidden@m uk-tab" data-uk-tab="{connect:'#team_tabbed',animation: 'slide-bottom'}">
<li [routerLinkActive]="['uk-active']" aria-expanded="true"><a [routerLink]="['./overview']">Overview</a></li>
<li [routerLinkActive]="['uk-active']" aria-expanded="false"><a [routerLink]="['./open-science']">Open Science</a></li>
<!--<li [routerLinkActive]="['uk-active']" aria-expanded="false"><a [routerLink]="['./collaboration']">Collaboration</a></li>-->
<li class="uk-disabled" aria-expanded="false"><a href="#" data-uk-tooltip="{title: Stay tuned..; pos: top-left}">Collaboration</a></li>
<li class="uk-disabled" aria-expanded="false" data-uk-tooltip="Stay tuned.."><a href="#">Impact</a></li>
<li class="uk-disabled" aria-expanded="false" data-uk-tooltip="Stay tuned.."><a href="#">Innovation</a></li>
<!--<li class="uk-tab-responsive uk-active uk-hidden" aria-haspopup="true" aria-expanded="false"><a>Developers</a><div class="uk-dropdown uk-dropdown-small" aria-hidden="true"><ul class="uk-nav uk-nav-dropdown"></ul><div></div></div></li>-->
</ul>
<div class="dataContainer">
<router-outlet></router-outlet>
</div>
</div>
</div>
</section>
<!--link to OpenAIRE page-->
<!--MOBILE & PAD PORTRAIT-->
<div class="uk-hidden@m">
<div class="uk-text-center uk-margin-xlarge-top uk-margin-large-bottom">
<div class="uk-text-center uk-margin-medium-bottom">
<span class="openaire-symbol-wrapper">
<img class="" src="https://www.openaire.eu/images/OpenAIRE_branding/Symbol.png" height="30px" width="30px">
</span>
</div>
<a class="uk-link primary" href="{{linkToCountryInOpenAIRE}}" target="_blank">Country page in <strong>OpenAIRE</strong><i class="fas fa-long-arrow-alt-right uk-margin-left"></i></a>
</div>
</div>
</div>