D-Net

<!--MAP AND OVERVIEW NUMBERS SECTION-->

<section class="section greySection" id="sect-overview">

        <!--Map Container-->

        <app-map-overview *ngIf="overviewData?.countries" (emitSelectedCountry)="countrySelected($event)"></app-map-overview>

      </div>

          <ng-container *ngIf="!countrySelectedName">

            <div class="md-card-toolbar">

              <h3 class="uk-text-center">OPENAIRE MONITOR OBSERVATORY</h3>

              <div>An OpenAIRE service to:</div>

              <ul>

                <li>

                  Better understand the European open research landscape

                </li>

                <li>

                  Track trends for open access to publications, data, software

                </li>

                <li>

                  Reveal hidden potential on existing resources

                </li>

                <li>

                  View open collaboration patterns

                </li>

              </ul>

              <div class="uk-text-center uk-margin-medium-top uk-margin-medium-bottom">

                <button class="md-btn md-btn-primary">Learn More</button>

                <span class="uk-margin-right" style="opacity: 0.8; float: left; margin-top: 7px;">

                  <img src="../../../assets/img/Open_Research_Graph.svg">

                </span>

                <span>Powered by <a target="_blank" href="" style="text-decoration: underline">OpenAIRE Open Research Graph</a></span>

            </div>

          </ng-container>

          <ng-container *ngIf="countrySelectedName">

            <div class="md-card-toolbar">

              <h3 class="uk-text-center uk-margin-small-top">

                <a class="backToOriginalInfoBox uk-float-left" (click)="deselectCountry()"><i class="fas fa-angle-left"></i></a>{{countrySelectedName | uppercase}}

              </h3>

            </div>

            <div *ngIf="countrySelectedName" class="md-card-content">

              <div class="numbers">

                <div class="uk-margin-small-top">

                  <div class="indicator">

                    <span class="number publications" *ngIf="countrySelectedOverview.publications?.oa !=null">{{countrySelectedOverview.publications.oa | number}}</span>

                    <span class="number publications" *ngIf="countrySelectedOverview.publications===null || countrySelectedOverview.publications.oa===null">--</span>

                    <span><i>OA publications</i> from institutional repositories</span>

                  </div>

                  <div class="indicator uk-margin-small-top">

                    <span class="number publications" *ngIf="countrySelectedOverview.publications?.oa !=null">{{countrySelectedOverview.publications.oa | number}}</span>

                    <span class="number publications" *ngIf="countrySelectedOverview.publications===null || countrySelectedOverview.publications.oa===null">--</span>

                    <span><i>OA publications</i> affiliated to an organization in the country</span>

                  </div>

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

                  <div class="indicator">

                    <span class="number datasets" *ngIf="countrySelectedOverview.datasets?.oa !=null">{{countrySelectedOverview.datasets.oa | number}}</span>

                    <span class="number datasets" *ngIf="countrySelectedOverview.datasets===null || countrySelectedOverview.datasets.oa===null">--</span>

                    <span><i>OA datasets</i> from institutional repositories</span>

                  </div>

                  <div class="indicator uk-margin-small-top">

                    <span class="number datasets" *ngIf="countrySelectedOverview.datasets?.oa !=null">{{countrySelectedOverview.datasets.oa | number}}</span>

                    <span class="number datasets" *ngIf="countrySelectedOverview.datasets===null || countrySelectedOverview.datasets.oa===null">--</span>

                    <span><i>OA datasets</i> affiliated to an organization in the country</span>

                  </div>

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

                  <div class="indicator">

                    <span class="number repositories" *ngIf="countrySelectedOverview.repositories?.oa !=null">{{countrySelectedOverview.repositories.oa | number}}</span>

                    <span class="number repositories" *ngIf="countrySelectedOverview.repositories===null || countrySelectedOverview.repositories.oa===null">--</span>

                    <span><i>repositories</i> from openDOAR & re3data</span>

                  </div>

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

                  <div class="indicator">

                    <span class="number journals" *ngIf="countrySelectedOverview.journals?.oa !=null">{{countrySelectedOverview.journals.oa | number}}</span>

                    <span class="number journals" *ngIf="countrySelectedOverview.journals===null || countrySelectedOverview.journals.oa===null">--</span>

                    <span><i>OA journals</i> from DOAJ</span>

                  </div>

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

                  <div class="indicator">

                    <span class="number policies" *ngIf="countrySelectedOverview.policies?.oa !=null">{{countrySelectedOverview.policies.oa | number}}</span>

                    <span class="number policies" *ngIf="countrySelectedOverview.policies===null || countrySelectedOverview.policies.oa===null">--</span>

                    <span>organisations with <i>OA policies</i></span>

                  </div>

              <div class="uk-text-center uk-margin-medium-top">

                <a class="" [routerLink]="['/countryDashboard/' + countrySelectedName]">Detailed View <i class="fas fa-arrow-right uk-margin-small-left"></i></a>

              </div>

              <div class="uk-text-meta uk-text-small uk-margin-medium-top">

                <span class="uk-margin-right" style="opacity: 0.8; float: left; margin-top: 7px;">

                  <img src="../../../assets/img/Open_Research_Graph.svg">

                </span>

                <span>Powered by <a target="_blank" href="" style="text-decoration: underline">OpenAIRE Open Research Graph</a></span>

              </div>

          </ng-container>

      </div>

      <!--<div class="uk-width-large-3-5 uk-container-center uk-text-center">-->

        <!--<h2 class="heading_b">-->

          <!--Our Team-->

          <!--<span class="sub-heading">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>-->

        <!--</h2>-->

      <!--</div>-->

    </div>

  <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}">

      <!--Overview cards-->

      <div *ngIf="overviewData?.overview" class="uk-width-1-1 indicatorCards">

            <div class="md-card">

              <div class="md-card-content">

                <div class="uk-margin-top">

                  <div class="uk-float-right uk-margin-small-right">

                    <span *ngIf="!overviewData.overview.publications || !overviewData.overview.publications.oa" class="number">--</span>

                <div class="uk-margin-top">

                  <!--<span class="uk-text-muted uk-text-small">Number of OA publications</span>-->

                <div *ngIf="overviewData.overview.publications?.percentage" class="uk-margin-top">

                  <div class="progress uk-margin-small-top">

                    <div [ngStyle]="{'width': overviewData.overview.publications.percentage+'%'}" class="progress-bar progress-bar-publications animate-progress-bar"></div>

                  </div>

              </div>

            </div>

          </div>

          <div class="">

            <div class="md-card">

              <div class="md-card-content">

                <div class="uk-margin-top">

                  <div class="uk-float-right uk-margin-small-right">

                    <span *ngIf="!overviewData.overview.datasets || !overviewData.overview.datasets.oa" class="number">--</span>

                <div class="uk-margin-top">

                  <!--<span class="uk-text-muted uk-text-small">Number of OA publications</span>-->

                <div *ngIf="overviewData.overview.datasets?.percentage" class="uk-margin-top">

                  <div class="progress uk-margin-small-top">

                    <div [ngStyle]="{'width': overviewData.overview.datasets.percentage+'%'}" class="progress-bar progress-bar-datasets animate-progress-bar"></div>

                  </div>

              </div>

            </div>

          </div>

          <div class="">

            <div class="md-card">

              <div class="md-card-content">

                <div class="uk-margin-top">

                  <div class="uk-float-right uk-margin-small-right">

                    <span *ngIf="!overviewData.overview.repositories || !overviewData.overview.repositories.oa" class="number">--</span>

                <div class="uk-margin-top">

                  <span class="number">{{overviewData.overview.repositories.percentage | number : '1.0-1'}}%</span> Certified

                  <div class="progress uk-margin-small-top">

                    <div [ngStyle]="{'width': overviewData.overview.repositories.percentage+'%'}" class="progress-bar progress-bar-repositories animate-progress-bar"></div>

                  </div>

                </div>

            </div>

          </div>

          <div class="">

            <div class="md-card">

              <div class="md-card-content">

                <div class="uk-margin-top">

                  <div class="uk-float-right uk-margin-small-right">

                    <span *ngIf="!overviewData.overview.journals || !overviewData.overview.journals.oa" class="number">--</span>

                <div class="uk-margin-top">

                  <span class="number">{{overviewData.overview.journals.percentage | number : '1.0-1'}}%</span> Certified

                  <div class="progress uk-margin-small-top">

                    <div [ngStyle]="{'width': overviewData.overview.journals.percentage+'%'}" class="progress-bar progress-bar-journals animate-progress-bar"></div>

                  </div>

                </div>

            </div>

          </div>

          <div class="">

            <div class="md-card">

              <div class="md-card-content">

                <div class="uk-margin-top">

                  <div class="uk-float-right uk-margin-small-right">

                    <span *ngIf="!overviewData.overview.policies || !overviewData.overview.policies.oa" class="number">--</span>

                <div class="uk-margin-top">

                  <!--<span class="uk-text-muted uk-text-small">Number of OA publications</span>-->

                  <!--<span class="number">{{overviewData.overview.policies.percentage | number}}%</span> are OA-->

                <!--</div>-->

            </div>

          </div>

        </div>

      </div>

    </div>

  </div>

</section>

<!--TABS SECTION-->

<section class="section greySection" 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="">

      <ul class="uk-tab uk-tab-large uk-flex-center" data-uk-tab="{connect:'#team_tabbed',animation: 'slide-bottom'}">

        <li class="uk-active" aria-expanded="true"><a href="#">Overview</a></li>

        <li aria-expanded="false"><a href="#">Open Science</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>

      <ul *ngIf="overviewData?.countries" id="team_tabbed" class="uk-switcher">

        <!--OVERVIEW tab-->

        <li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">

          <div class="uk-margin tabContent">

            <app-data-view [type]="'overview'" [countries]="overviewData.countries"></app-data-view>

            <!--<app-countries-table [isPercentage]="false" [type]="'overview'" [countries]="overviewData.countries"></app-countries-table>-->

          </div>

        </li>

        <!--OPEN SCIENCE tab-->

        <li aria-hidden="true" style="animation-duration: 200ms;">

          <div class="uk-margin tabContent">

            <app-data-view [type]="'openScience'" [countries]="overviewData.countries"></app-data-view>

            <!--<app-countries-table [isPercentage]="false" [type]="'openScience'" [countries]="overviewData.countries"></app-countries-table>-->

          </div>

        </li>

        <li aria-hidden="true">

          <div class="uk-grid uk-grid-medium uk-grid-width-small-1-2 uk-grid-width-medium-1-3 uk-grid-width-large-1-4" data-uk-grid-margin="">

          </div>

        </li>

        <li aria-hidden="true">

          <div class="uk-grid uk-grid-medium uk-grid-width-small-1-2 uk-grid-width-medium-1-3 uk-grid-width-large-1-4" data-uk-grid-margin="">

          </div>

        </li>

        <li aria-hidden="true">

          <div class="uk-grid uk-grid-medium uk-grid-width-small-1-2 uk-grid-width-medium-1-3 uk-grid-width-large-1-4" data-uk-grid-margin="">

          </div>

        </li>

      </ul>

    </div>

  </div>

</section>