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

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

}