import {Component} from "@angular/core";

@Component({
  selector: 'how',
  template: `
    <div class="how" uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-fade; delay: 200">
      <div class="uk-flex uk-flex-wrap">
        <div class="uk-width-1-3@s first" uk-scrollspy-class>
          <div>
            <img src="assets/common-assets/monitor-assets/how/1.png" loading="lazy">
          </div>
          <div class="uk-text-center uk-text-large">
            <span class="uk-text-uppercase uk-text-bold">Starting</span> from existing<br>research-related data sources
          </div>
        </div>
        <div class="uk-width-1-3@s second" uk-scrollspy-class>
          <div>
            <img src="assets/common-assets/monitor-assets/how/2.png" loading="lazy">
          </div>
        </div>
        <div class="uk-width-1-3@s third" uk-scrollspy-class>
          <div>
            <img src="assets/common-assets/monitor-assets/how/3.png" loading="lazy">
          </div>
          <div class="uk-text-center uk-text-large">
            build an open, global<br>and trusted Research graph
          </div>
        </div>
      </div>
      <div class="uk-flex uk-flex-wrap">
        <div class="uk-width-1-3@s fourth uk-flex-last@s" uk-scrollspy-class>
          <div>
            <img src="assets/common-assets/monitor-assets/how/4.png" loading="lazy">
          </div>
          <div class="uk-text-center">
            we perform <span class="uk-text-uppercase uk-text-bold">Statistical <br> Analysis</span> and produce <br>
            <span class="uk-text-primary">Open Science Indicators</span>
          </div>
        </div>
        <div class="uk-width-1-3@s fifth" uk-scrollspy-class>
          <div>
            <img src="assets/common-assets/monitor-assets/how/5.png" loading="lazy">
          </div>
          <div class="uk-text-center">
            furthermore <span class="uk-text-uppercase uk-text-bold">Network<br>Analysis</span> producing <br>
            <span class="uk-text-primary">Collaboration Indicators</span>
          </div>
        </div>
        <div class="uk-width-1-3@s sixth uk-flex-first@s" uk-scrollspy-class>
          <div>
            <img src="assets/common-assets/monitor-assets/how/6.png" loading="lazy">
          </div>
          <div class="uk-text-center">
            Often combine with external data <br>
            (patents, social, company) and
            perform <br><span class="uk-text-uppercase uk-text-bold">Impact Analysis</span> to
            produce <br><span class="uk-text-primary">Innovation Indicators</span>
          </div>
        </div>
      </div>
      <div class="final" uk-scrollspy-class>
        <div>
          <img src="assets/common-assets/monitor-assets/how/7.png" loading="lazy">
        </div>
      </div>
    </div>
  `,
  styleUrls: ['how.component.css']
})
export class HowComponent {

}