Project

General

Profile

1
<div class="greySection">
2
  <section class="uk-padding-small" id="sect-country-page">
3
    <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}">
4
      <!--<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}">-->
5

    
6
      <div class="uk-grid uk-grid-match uk-grid-small">
7

    
8
        <div class="uk-width-4-5@m uk-width-4-5@l uk-width-1-1@s">
9

    
10
          <div class="uk-container uk-container-expand uk-margin-medium-top">
11

    
12
            <!--LAPTOP & PAD LANDSCAPE-->
13
            <div class="uk-visible@m">
14
              <ul *ngIf="countryPageOverviewData && countryPageOverviewData.name" class="uk-breadcrumb">
15
                <li><a routerLink="/home">Home</a></li>
16
                <li><span>{{countryPageOverviewData.name}}</span></li>
17
              </ul>
18

    
19

    
20
              <div class="countryPageHeader">
21
                <div *ngIf="countryPageOverviewData && countryPageOverviewData.name" class="">
22
                  <img src="../../../assets/img/flags/{{countryCode | lowercase}}-flag-round.png" class="flag-image" width="132" height="132">
23
                  <div class="uk-inline uk-margin-left">
24
                    <h1>{{countryPageOverviewData.name}}</h1>
25
                    <span class="lastUpdateInfo">Data Last Updated: </span>
26
                    <span *ngIf="lastUpdateDate" class="lastUpdateInfo">{{lastUpdateDate}}</span>
27
                  </div>
28
                </div>
29

    
30
                <!-- TODO uncomment when implemented -->
31
                <!--<div class="actionButtonsCountryPage uk-text-right">-->
32
                  <!--<a class=""><i class="fas fa-code uk-margin-small-right"></i>Embed</a>-->
33
                  <!--&lt;!&ndash;<a class="uk-margin-left"><i class="fas fa-download uk-margin-small-right"></i>Download CSV</a>&ndash;&gt;-->
34
                  <!--<a class="uk-margin-left"><i class="fas fa-file-pdf uk-margin-small-right"></i>Download PDF</a>-->
35
                <!--</div>-->
36
              </div>
37
            </div>
38

    
39
            <!--MOBILE & PAD PORTRAIT-->
40
            <div class="uk-hidden@m uk-text-center">
41
              <div *ngIf="countryPageOverviewData && countryPageOverviewData.name" class="">
42
                <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">
43
                <div class="uk-margin-top">
44
                  <h1 class="uk-margin-small-bottom">{{countryPageOverviewData.name}}</h1>
45
                  <span class="lastUpdateInfo">Data Last Updated: 21 May 2020</span>
46
                </div>
47
              </div>
48
            </div>
49

    
50

    
51

    
52
          </div>
53

    
54

    
55
          <div class="uk-container uk-container-expand uk-margin-large-top">
56

    
57
            <!--Overview cards-->
58
            <!--LAPTOP & PAD LANDSCAPE-->
59
            <div class="uk-visible@m">
60
              <div class="uk-width-1-1 indicatorCards">
61
                <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="">
62
                  <!--<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="">-->
63

    
64
                  <div class="uk-row-first">
65
                    <div class="md-card">
66
                      <div class="md-card-content">
67

    
68
                        <!--top number-->
69
                        <div class="uk-margin-top">
70
                          <div class="uk-float-right uk-margin-small-right">
71
                            <img src="../../../assets/img/icons/publications-icon.svg" width="40" height="40">
72
                          </div>
73
                          <h3 class="uk-margin-remove">
74
                            <span *ngIf="!countryPageOverviewData || !countryPageOverviewData.publicationsAffiliated || !countryPageOverviewData.publicationsAffiliated.oa" class="number">--</span>
75
                            <span *ngIf="countryPageOverviewData?.publicationsAffiliated?.oa" class="number">{{countryPageOverviewData.publicationsAffiliated.oa | number}}</span>
76
                          </h3>
77
                        </div>
78
                        <div class="uk-margin-top">
79
                          <span class=""><i>Open Access publications affiliated to an organization in the country</i></span>
80
                        </div>
81
                        <div *ngIf="countryPageOverviewData?.publicationsAffiliated?.percentage" class="uk-margin-top">
82
                          <span class="number">{{countryPageOverviewData.publicationsAffiliated.percentage | number :'1.0-1'}}%</span> share open access
83
                          <div class="progress uk-margin-small-top">
84
                            <div [ngStyle]="{'width': countryPageOverviewData.publicationsAffiliated.percentage+'%'}" class="progress-bar progress-bar-publications animate-progress-bar"></div>
85
                          </div>
86
                        </div>
87

    
88
                        <hr class="greyBoldDivider uk-margin-medium-top uk-margin-medium-bottom">
89

    
90
                        <!--bottom number-->
91
                        <div class="uk-margin-top">
92
                          <!--<div class="uk-float-right uk-margin-small-right">-->
93
                            <!--<img src="../../../assets/img/icons/publications-icon.svg" width="40" height="40">-->
94
                          <!--</div>-->
95
                          <h3 class="uk-margin-remove">
96
                            <span *ngIf="!countryPageOverviewData || !countryPageOverviewData.publicationsDeposited || !countryPageOverviewData.publicationsDeposited.oa" class="number">--</span>
97
                            <span *ngIf="countryPageOverviewData?.publicationsDeposited?.oa" class="number">{{countryPageOverviewData.publicationsDeposited.oa | number}}</span>
98
                          </h3>
99
                        </div>
100
                        <div class="uk-margin-top">
101
                          <span class=""><i>Open Access publications in the country's institutional repositories</i></span>
102
                        </div>
103
                        <div *ngIf="countryPageOverviewData?.publicationsDeposited?.percentage" class="uk-margin-top">
104
                          <span class="number">{{countryPageOverviewData.publicationsDeposited.percentage | number :'1.0-1'}}%</span> share open access
105
                          <div class="progress uk-margin-small-top">
106
                            <div [ngStyle]="{'width': countryPageOverviewData.publicationsDeposited.percentage+'%'}" class="progress-bar progress-bar-publications animate-progress-bar"></div>
107
                          </div>
108
                        </div>
109

    
110
                      </div>
111
                    </div>
112
                  </div>
113

    
114
                  <div class="">
115
                    <div class="md-card">
116
                      <div class="md-card-content">
117

    
118
                        <!--top number-->
119
                        <div class="uk-margin-top">
120
                          <div class="uk-float-right uk-margin-small-right">
121
                            <img src="../../../assets/img/icons/datasets-icon.svg" width="33" height="40">
122
                          </div>
123
                          <h3 class="uk-margin-remove">
124
                            <span *ngIf="!countryPageOverviewData || !countryPageOverviewData.datasetsAffiliated || !countryPageOverviewData.datasetsAffiliated.oa" class="number">--</span>
125
                            <span *ngIf="countryPageOverviewData?.datasetsAffiliated?.oa" class="number">{{countryPageOverviewData.datasetsAffiliated.oa | number}}</span>
126
                          </h3>
127
                        </div>
128
                        <div class="uk-margin-top">
129
                          <span class=""><i>Open Access datasets affiliated to an organization in the country</i></span>
130
                        </div>
131
                        <div *ngIf="countryPageOverviewData?.datasetsAffiliated?.percentage" class="uk-margin-top">
132
                          <span class="number">{{countryPageOverviewData.datasetsAffiliated.percentage | number :'1.0-1'}}%</span> share open access
133
                          <div class="progress uk-margin-small-top">
134
                            <div [ngStyle]="{'width': countryPageOverviewData.datasetsAffiliated.percentage+'%'}" class="progress-bar progress-bar-datasets animate-progress-bar"></div>
135
                          </div>
136
                        </div>
137

    
138
                        <hr class="greyBoldDivider uk-margin-medium-top uk-margin-medium-bottom">
139

    
140
                        <!--bottom number-->
141
                        <div class="uk-margin-top">
142
                          <!--<div class="uk-float-right uk-margin-small-right">-->
143
                            <!--<img src="../../../assets/img/icons/datasets-icon.svg" width="33" height="40">-->
144
                          <!--</div>-->
145
                          <h3 class="uk-margin-remove">
146
                            <span *ngIf="!countryPageOverviewData || !countryPageOverviewData.datasetsDeposited || !countryPageOverviewData.datasetsDeposited.oa" class="number">--</span>
147
                            <span *ngIf="countryPageOverviewData?.datasetsDeposited?.oa" class="number">{{countryPageOverviewData.datasetsDeposited.oa | number}}</span>
148
                          </h3>
149
                        </div>
150
                        <div class="uk-margin-top">
151
                          <span class=""><i>Open Access datasets in the country's repositories</i></span>
152
                        </div>
153
                        <div *ngIf="countryPageOverviewData?.datasetsDeposited?.percentage" class="uk-margin-top">
154
                          <span class="number">{{countryPageOverviewData.datasetsDeposited.percentage | number :'1.0-1'}}%</span> share open access
155
                          <div class="progress uk-margin-small-top">
156
                            <div [ngStyle]="{'width': countryPageOverviewData.datasetsDeposited.percentage+'%'}" class="progress-bar progress-bar-datasets animate-progress-bar"></div>
157
                          </div>
158
                        </div>
159
                      </div>
160
                    </div>
161
                  </div>
162

    
163
                  <div class="">
164

    
165
                    <div class="md-card" style="height: 47%">
166
                      <div class="md-card-content">
167
                        <div class="uk-margin-top">
168
                          <div class="uk-float-right uk-margin-small-right">
169
                            <img src="../../../assets/img/icons/repositories-icon.svg" width="43" height="40">
170
                          </div>
171
                          <h3 class="uk-margin-remove">
172
                            <span *ngIf="!countryPageOverviewData || !countryPageOverviewData.repositories || !countryPageOverviewData.repositories.total" class="number">--</span>
173
                            <span *ngIf="countryPageOverviewData?.repositories?.total" class="number">{{countryPageOverviewData.repositories.total | number}}</span>
174
                          </h3>
175
                        </div>
176
                        <div class="uk-margin-top">
177
                          <span class=""><i>repositories</i> in openDOAR & re3data</span>
178
                        </div>
179
                        <div *ngIf="countryPageOverviewData?.repositories?.percentage" class="uk-margin-top">
180
                          <span class="number">{{countryPageOverviewData.repositories.percentage | number :'1.0-1'}}%</span> validated
181
                          <div class="progress uk-margin-small-top">
182
                            <div [ngStyle]="{'width': countryPageOverviewData.repositories.percentage+'%'}" class="progress-bar progress-bar-repositories animate-progress-bar"></div>
183
                          </div>
184
                        </div>
185
                      </div>
186
                    </div>
187

    
188
                  </div>
189

    
190
                  <div class="">
191
                    <div class="md-card" style="height: 47%">
192
                      <div class="md-card-content">
193
                        <div class="uk-margin-top">
194
                          <div class="uk-float-right uk-margin-small-right">
195
                            <img src="../../../assets/img/icons/journals-icon.svg" width="43" height="40">
196
                          </div>
197
                          <h3 class="uk-margin-remove">
198
                            <span *ngIf="!countryPageOverviewData || !countryPageOverviewData.journals || !countryPageOverviewData.journals.total" class="number">--</span>
199
                            <span *ngIf="countryPageOverviewData?.journals?.total" class="number">{{countryPageOverviewData.journals.total | number}}</span>
200
                            <!--<span *ngIf="overviewData.overview.journals?.oa" class="number">{{overviewData.overview.journals.oa | number}}</span>-->
201
                            <!--<span *ngIf="!overviewData.overview.journals || !overviewData.overview.journals.oa" class="number">--</span>-->
202
                          </h3>
203
                        </div>
204
                        <div class="uk-margin-top">
205
                          <span class=""><i>Open Access journals</i> in DOAJ</span>
206
                        </div>
207
                        <div *ngIf="countryPageOverviewData?.journals?.percentage" class="uk-margin-top">
208
                          <span class="number">{{countryPageOverviewData.journals.percentage | number :'1.0-1'}}%</span> validated
209
                          <div class="progress uk-margin-small-top">
210
                            <div [ngStyle]="{'width': countryPageOverviewData.journals.percentage+'%'}" class="progress-bar progress-bar-journals animate-progress-bar"></div>
211
                          </div>
212
                        </div>
213
                      </div>
214
                    </div>
215
                  </div>
216

    
217

    
218
                  <!--<div class="">-->
219

    
220
                    <!--<div class="md-card" style="height: 47%">-->
221
                      <!--<div class="md-card-content">-->
222
                        <!--<div class="uk-margin-top">-->
223
                          <!--<div class="uk-float-right uk-margin-small-right">-->
224
                            <!--<img src="../../../assets/img/icons/policies-icon.svg" width="36" height="40">-->
225
                          <!--</div>-->
226
                          <!--<h3 class="uk-margin-remove">-->
227
                            <!--<span class="number">&#45;&#45;</span>-->
228
                            <!--&lt;!&ndash;<span *ngIf="overviewData.overview.policies?.oa" class="number">{{overviewData.overview.policies.oa | number}}</span>&ndash;&gt;-->
229
                            <!--&lt;!&ndash;<span *ngIf="!overviewData.overview.policies || !overviewData.overview.policies.oa" class="number">&#45;&#45;</span>&ndash;&gt;-->
230
                          <!--</h3>-->
231
                        <!--</div>-->
232
                        <!--<div class="uk-margin-top">-->
233
                          <!--<span class="">organizations with <i>OA policies</i></span>-->
234
                        <!--</div>-->
235
                      <!--</div>-->
236
                    <!--</div>-->
237

    
238
                    <!--<div></div>-->
239
                  <!--</div>-->
240
                </div>
241
              </div>
242
            </div>
243

    
244
            <!--MOBILE & PAD PORTRAIT-->
245
            <div class="uk-hidden@m uk-text-center uk-margin-medium-top">
246
              <div *ngIf="countryPageOverviewData" class="md-card chartCard overviewMobile">
247
                <div class="md-card-content">
248

    
249

    
250
                  <div class="uk-grid uk-margin-top">
251
                    <div class="uk-width-1-5">
252
                      <img src="../../../assets/img/icons/publications-icon.svg" width="30" height="30">
253
                    </div>
254
                    <div class="uk-width-2-5">
255
                      <div *ngIf="countryPageOverviewData.publicationsAffiliated?.oa" class="number big">{{countryPageOverviewData.publicationsAffiliated.oa | number}}</div>
256
                      <div *ngIf="!countryPageOverviewData.publicationsAffiliated || !countryPageOverviewData.publicationsAffiliated.oa" class="number big">--</div>
257
                      <div class="uk-margin-small-top">OA PUBLICATIONS AFFILIATED TO AN ORGANIZATION IN THE COUNTRY</div>
258
                    </div>
259
                    <div *ngIf="countryPageOverviewData.publicationsAffiliated?.percentage" class="uk-width-2-5">
260
                      <div class="progress">
261
                        <div [ngStyle]="{'width': countryPageOverviewData.publicationsAffiliated.percentage+'%'}" class="progress-bar progress-bar-publications animate-progress-bar"></div>
262
                      </div>
263
                      <div class="uk-margin-small-top">
264
                        <span class="number">{{countryPageOverviewData.publicationsAffiliated.percentage | number :'1.0-1'}}%</span> OA
265
                      </div>
266
                    </div>
267
                  </div>
268
                  <div class="uk-grid uk-margin-top">
269
                    <div class="uk-width-1-5">
270
                    </div>
271
                    <div class="uk-width-2-5">
272
                      <div *ngIf="countryPageOverviewData.publicationsDeposited?.oa" class="number big">{{countryPageOverviewData.publicationsDeposited.oa | number}}</div>
273
                      <div *ngIf="!countryPageOverviewData.publicationsDeposited || !countryPageOverviewData.publicationsDeposited.oa" class="number big">--</div>
274
                      <div class="uk-margin-small-top">OA PUBLICATIONS IN INSTITUTIONAL REPOSITORIES</div>
275
                    </div>
276
                    <div *ngIf="countryPageOverviewData.publicationsDeposited?.percentage" class="uk-width-2-5">
277
                      <div class="progress">
278
                        <div [ngStyle]="{'width': countryPageOverviewData.publicationsDeposited.percentage+'%'}" class="progress-bar progress-bar-publications animate-progress-bar"></div>
279
                      </div>
280
                      <div class="uk-margin-small-top">
281
                        <span class="number">{{countryPageOverviewData.publicationsDeposited.percentage | number :'1.0-1'}}%</span> OA
282
                      </div>
283
                    </div>
284
                  </div>
285

    
286
                  <div class="uk-grid uk-margin-medium-top">
287
                    <div class="uk-width-1-5">
288
                      <img src="../../../assets/img/icons/datasets-icon.svg" width="30" height="30">
289
                    </div>
290
                    <div class="uk-width-2-5">
291
                      <div *ngIf="countryPageOverviewData.datasetsAffiliated?.oa" class="number big">{{countryPageOverviewData.datasetsAffiliated.oa | number}}</div>
292
                      <div *ngIf="!countryPageOverviewData.datasetsAffiliated || !countryPageOverviewData.datasetsAffiliated.oa" class="number big">--</div>
293
                      <div class="uk-margin-small-top">OA DATASETS AFFILIATED TO AN ORGANIZATION IN THE COUNTRY</div>
294
                    </div>
295
                    <div *ngIf="countryPageOverviewData.datasetsAffiliated?.percentage" class="uk-width-2-5">
296
                      <div class="progress">
297
                        <div [ngStyle]="{'width': countryPageOverviewData.datasetsAffiliated.percentage+'%'}" class="progress-bar progress-bar-datasets animate-progress-bar"></div>
298
                      </div>
299
                      <div class="uk-margin-small-top">
300
                        <span class="number">{{countryPageOverviewData.datasetsAffiliated.percentage | number :'1.0-1'}}%</span> OA
301
                      </div>
302
                    </div>
303
                  </div>
304
                  <div class="uk-grid uk-margin-medium-top">
305
                    <div class="uk-width-1-5">
306
                    </div>
307
                    <div class="uk-width-2-5">
308
                      <div *ngIf="countryPageOverviewData.datasetsDeposited?.oa" class="number big">{{countryPageOverviewData.datasetsDeposited.oa | number}}</div>
309
                      <div *ngIf="!countryPageOverviewData.datasetsDeposited || !countryPageOverviewData.datasetsDeposited.oa" class="number big">--</div>
310
                      <div class="uk-margin-small-top">OA DATASETS IN REPOSITORIES</div>
311
                    </div>
312
                    <div *ngIf="countryPageOverviewData.datasetsDeposited?.percentage" class="uk-width-2-5">
313
                      <div class="progress">
314
                        <div [ngStyle]="{'width': countryPageOverviewData.datasetsDeposited.percentage+'%'}" class="progress-bar progress-bar-datasets animate-progress-bar"></div>
315
                      </div>
316
                      <div class="uk-margin-small-top">
317
                        <span class="number">{{countryPageOverviewData.datasetsDeposited.percentage | number :'1.0-1'}}%</span> OA
318
                      </div>
319
                    </div>
320
                  </div>
321

    
322
                  <div class="uk-grid uk-margin-medium-top">
323
                    <div class="uk-width-1-5">
324
                      <img src="../../../assets/img/icons/repositories-icon.svg" width="30" height="30">
325
                    </div>
326
                    <div class="uk-width-2-5">
327
                      <div *ngIf="countryPageOverviewData.repositories?.oa" class="number big">{{countryPageOverviewData.repositories.oa | number}}</div>
328
                      <div *ngIf="!countryPageOverviewData.repositories || !countryPageOverviewData.repositories.oa" class="number big">--</div>
329
                      <div class="uk-margin-small-top">VALIDATED REPOSITORIES</div>
330
                    </div>
331
                    <div *ngIf="countryPageOverviewData.repositories?.percentage" class="uk-width-2-5">
332
                      <div class="progress">
333
                        <div [ngStyle]="{'width': countryPageOverviewData.repositories.percentage+'%'}" class="progress-bar progress-bar-repositories animate-progress-bar"></div>
334
                      </div>
335
                      <div class="uk-margin-small-top">
336
                        <span class="number">{{countryPageOverviewData.repositories.percentage | number :'1.0-1'}}%</span> VALIDATED
337
                      </div>
338
                    </div>
339
                  </div>
340

    
341
                  <div class="uk-grid uk-margin-medium-top">
342
                    <div class="uk-width-1-5">
343
                      <img src="../../../assets/img/icons/journals-icon.svg" width="30" height="30">
344
                    </div>
345
                    <div class="uk-width-2-5">
346
                      <div *ngIf="countryPageOverviewData.journals?.oa" class="number big">{{countryPageOverviewData.journals.oa | number}}</div>
347
                      <div *ngIf="!countryPageOverviewData.journals || !countryPageOverviewData.journals.oa" class="number big">--</div>
348
                      <div class="uk-margin-small-top">VALIDATED JOURNALS</div>
349
                    </div>
350
                    <div *ngIf="countryPageOverviewData.journals?.percentage" class="uk-width-2-5">
351
                      <div class="progress">
352
                        <div [ngStyle]="{'width': countryPageOverviewData.journals.percentage+'%'}" class="progress-bar progress-bar-journals animate-progress-bar"></div>
353
                      </div>
354
                      <div class="uk-margin-small-top">
355
                        <span class="number">{{countryPageOverviewData.journals.percentage | number : '1.0-1'}}%</span> Validated
356
                      </div>
357
                    </div>
358
                  </div>
359

    
360
                  <!--<div class="uk-grid uk-margin-medium-top uk-margin-bottom">-->
361
                    <!--<div class="uk-width-1-5">-->
362
                      <!--<img src="../../../assets/img/icons/policies-icon.svg" width="30" height="30">-->
363
                    <!--</div>-->
364
                    <!--<div class="uk-width-2-5">-->
365
                      <!--<div *ngIf="countryPageOverviewData.policies?.oa" class="number big">{{countryPageOverviewData.policies.oa | number}}</div>-->
366
                      <!--<div *ngIf="!countryPageOverviewData.policies || !countryPageOverviewData.policies.oa" class="number big">&#45;&#45;</div>-->
367
                      <!--<div class="uk-margin-small-top">OA POLICIES</div>-->
368
                    <!--</div>-->
369
                    <!--<div class="uk-width-2-5">-->
370

    
371
                    <!--</div>-->
372
                  <!--</div>-->
373

    
374
                </div>
375
              </div>
376
            </div>
377

    
378

    
379
          </div>
380

    
381
        </div>
382

    
383
        <!--Research Overview-->
384
        <!--LAPTOP & PAD LANDSCAPE-->
385
        <div class="uk-visible@m uk-width-1-5@m uk-width-1-5@l">
386
          <div class="md-card infoBox">
387

    
388
            <div class="md-card-toolbar">
389
              <h3 class="uk-text-center uk-margin-small-top">
390
                Research Overview
391
              </h3>
392
            </div>
393

    
394
            <div class="md-card-content">
395
              <div class="numbers">
396

    
397
                <div class="indicator uk-margin-small-top">
398
                  <ng-container *ngIf="countryPageOverviewData?.rndExpenditure">
399
                    <span class="number primary" *ngIf="countryPageOverviewData?.rndExpenditure?.expenditure">{{countryPageOverviewData.rndExpenditure.expenditure}}%</span>
400
                    <span class="number primary" *ngIf="!countryPageOverviewData || !countryPageOverviewData.rndExpenditure || !countryPageOverviewData.rndExpenditure.expenditure">--</span>
401
                    <span>
402
                      <span><i> of GDP for </i></span>
403
                      <span class="number primary">{{countryPageOverviewData.rndExpenditure.year}}</span>
404
                      <div><i> R&D expenditure</i></div>
405
                    </span>
406
                  </ng-container>
407
                  <ng-container *ngIf="!countryPageOverviewData || !countryPageOverviewData.rndExpenditure">
408
                    <span class="number primary">--</span>
409
                    <span><i>R&D expenditure</i></span>
410
                  </ng-container>
411
                </div>
412

    
413
                <hr class="greyBoldDivider uk-margin-medium-top uk-margin-medium-bottom">
414

    
415
                <div class="indicator">
416
                  <span class="number primary" *ngIf="countryPageOverviewData?.funders">{{countryPageOverviewData.funders}}</span>
417
                  <span class="number primary" *ngIf="!countryPageOverviewData || !countryPageOverviewData.funders">--</span>
418
                  <span><i>funders</i></span>
419
                </div>
420

    
421
                <hr class="greyBoldDivider uk-margin-medium-top uk-margin-medium-bottom">
422

    
423
                <div class="indicator">
424
                  <span class="number primary" *ngIf="countryPageOverviewData?.fundingOrganizations">{{countryPageOverviewData.fundingOrganizations}}</span>
425
                  <span class="number primary" *ngIf="!countryPageOverviewData || !countryPageOverviewData.fundingOrganizations">--</span>
426
                  <span><i>funding organizations</i></span>
427
                </div>
428

    
429
                <hr class="greyBoldDivider uk-margin-medium-top uk-margin-medium-bottom">
430

    
431
                <div class="indicator">
432
                  <span class="number primary" *ngIf="countryPageOverviewData?.ec_fundedProjects">{{countryPageOverviewData.ec_fundedProjects}}</span>
433
                  <span class="number primary" *ngIf="!countryPageOverviewData || !countryPageOverviewData.ec_fundedProjects">--</span>
434
                  <span><i>projects funded by the European Commission since 2013</i></span>
435
                </div>
436

    
437
              </div>
438

    
439

    
440
              <div class="uk-text-center uk-margin-xlarge-top">
441

    
442
                <div class="uk-text-center uk-margin-medium-bottom">
443
                <span class="openaire-symbol-wrapper">
444
                  <img class="" src="https://www.openaire.eu/images/OpenAIRE_branding/Symbol.png" height="30px" width="30px">
445
                </span>
446
                </div>
447
                <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>
448
              </div>
449

    
450
            </div>
451
          </div>
452
        </div>
453

    
454
        <!--Research Overview-->
455
        <!--MOBILE & PAD PORTRAIT-->
456
        <div class="uk-hidden@m uk-width-1-1@s uk-margin-medium-top">
457
          <div class="uk-container uk-container-expand">
458
            <div *ngIf="countryPageOverviewData" class="md-card chartCard overviewMobile">
459
              <div class="md-card-content">
460
                <div class="numbers">
461

    
462
                  <div class="">
463
                    <ng-container *ngIf="countryPageOverviewData?.rndExpenditure">
464
                      <span class="number big primary">{{countryPageOverviewData.rndExpenditure.expenditure}}%</span>
465
                      <span>
466
                      <span class="uk-margin-small-right uk-margin-small-left"> OF GDP FOR </span>
467
                      <span class="number big primary">{{countryPageOverviewData.rndExpenditure.year}}</span>
468
                      <div class="uk-margin-small-top"> R&D EXPENDITURE</div>
469
                    </span>
470
                    </ng-container>
471
                    <ng-container *ngIf="!countryPageOverviewData || !countryPageOverviewData.rndExpenditure">
472
                      <div class="number big primary">--</div>
473
                      <div class="uk-margin-small-top">R&D EXPENDITURE</div>
474
                    </ng-container>
475
                  </div>
476

    
477
                  <div class="uk-margin-medium-top">
478
                    <div class="number big primary" *ngIf="countryPageOverviewData?.funders">{{countryPageOverviewData.funders}}</div>
479
                    <div class="number big primary" *ngIf="!countryPageOverviewData || !countryPageOverviewData.funders">--</div>
480
                    <div class="uk-margin-small-top">FUNDERS</div>
481
                  </div>
482

    
483
                  <div class="uk-margin-medium-top">
484
                    <div class="number big primary" *ngIf="countryPageOverviewData?.fundingOrganizations">{{countryPageOverviewData.fundingOrganizations}}</div>
485
                    <div class="number big primary" *ngIf="!countryPageOverviewData || !countryPageOverviewData.fundingOrganizations">--</div>
486
                    <div class="uk-margin-small-top">FUNDING ORGANIZATIONS</div>
487
                  </div>
488

    
489
                  <div class=" uk-margin-medium-top">
490
                    <div class="number big primary" *ngIf="countryPageOverviewData?.ec_fundedProjects">{{countryPageOverviewData.ec_fundedProjects}}</div>
491
                    <div class="number big primary" *ngIf="!countryPageOverviewData || !countryPageOverviewData.ec_fundedProjects">--</div>
492
                    <div class="uk-margin-small-top">PROJECTS FUNDED BY THE EUROPEAN COMMISSION SINCE 2013</div>
493
                  </div>
494

    
495
                </div>
496
              </div>
497
            </div>
498
          </div>
499
        </div>
500

    
501

    
502
      </div>
503

    
504
    </div>
505
  </section>
506

    
507
  <!--TABS SECTION-->
508
  <section class="section uk-margin-large-top" id="sect-tabs">
509
    <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}">
510

    
511
      <div class="">
512

    
513
        <!--LAPTOP & PAD LANDSCAPE-->
514
        <ul class="uk-visible@m uk-tab uk-tab-large uk-flex-center" data-uk-tab="{connect:'#team_tabbed',animation: 'slide-bottom'}">
515
          <li [routerLinkActive]="['uk-active']" aria-expanded="true"><a [routerLink]="['./overview']">Overview</a></li>
516
          <li [routerLinkActive]="['uk-active']" aria-expanded="false"><a [routerLink]="['./open-science']">Open Science</a></li>
517
          <!--<li [routerLinkActive]="['uk-active']" aria-expanded="false"><a [routerLink]="['./collaboration']">Collaboration</a></li>-->
518
          <li class="uk-disabled" aria-expanded="false"><a href="#" data-uk-tooltip="{title: Stay tuned..; pos: top-left}">Collaboration</a></li>
519
          <li class="uk-disabled" aria-expanded="false" data-uk-tooltip="Stay tuned.."><a href="#">Impact</a></li>
520
          <li class="uk-disabled" aria-expanded="false" data-uk-tooltip="Stay tuned.."><a href="#">Innovation</a></li>
521
          <!--<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>-->
522
        </ul>
523

    
524
        <!--MOBILE & PAD PORTRAIT-->
525
        <ul class="uk-hidden@m uk-tab" data-uk-tab="{connect:'#team_tabbed',animation: 'slide-bottom'}">
526
          <li [routerLinkActive]="['uk-active']" aria-expanded="true"><a [routerLink]="['./overview']">Overview</a></li>
527
          <li [routerLinkActive]="['uk-active']" aria-expanded="false"><a [routerLink]="['./open-science']">Open Science</a></li>
528
          <!--<li [routerLinkActive]="['uk-active']" aria-expanded="false"><a [routerLink]="['./collaboration']">Collaboration</a></li>-->
529
          <li class="uk-disabled" aria-expanded="false"><a href="#" data-uk-tooltip="{title: Stay tuned..; pos: top-left}">Collaboration</a></li>
530
          <li class="uk-disabled" aria-expanded="false" data-uk-tooltip="Stay tuned.."><a href="#">Impact</a></li>
531
          <li class="uk-disabled" aria-expanded="false" data-uk-tooltip="Stay tuned.."><a href="#">Innovation</a></li>
532
          <!--<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>-->
533
        </ul>
534

    
535
        <div class="dataContainer">
536
          <router-outlet></router-outlet>
537
        </div>
538

    
539
      </div>
540

    
541
    </div>
542
  </section>
543

    
544

    
545
  <!--link to OpenAIRE page-->
546
  <!--MOBILE & PAD PORTRAIT-->
547
  <div class="uk-hidden@m">
548
    <div class="uk-text-center uk-margin-xlarge-top uk-margin-large-bottom">
549

    
550
      <div class="uk-text-center uk-margin-medium-bottom">
551
                <span class="openaire-symbol-wrapper">
552
                  <img class="" src="https://www.openaire.eu/images/OpenAIRE_branding/Symbol.png" height="30px" width="30px">
553
                </span>
554
      </div>
555
      <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>
556
    </div>
557
  </div>
558

    
559
</div>
560

    
(4-4/6)