import {Component, OnInit} from "@angular/core";
import {BaseComponent} from "../../openaireLibrary/sharedComponents/base/base.component";
import {PiwikService} from "../../openaireLibrary/utils/piwik/piwik.service";
import {ActivatedRoute, Router} from "@angular/router";
import {Meta, Title} from "@angular/platform-browser";
import {SEOService} from "../../openaireLibrary/sharedComponents/SEO/SEO.service";

@Component({
  selector: 'engagement',
  template: `
      <div class="uk-banner uk-section uk-section-large">
          <div class="uk-container uk-container-small">
              <div class="uk-text-center">
                  <h1 class="uk-h2">Engage, learn, and contribute to the Open Science community.</h1>
                  <div class="uk-text-large">Explore essential resources and activities that enhance your interaction with the National Open Access Monitor of Ireland.</div>
              </div>
          </div>
      </div>
      <div class="uk-section uk-container uk-container-small">
          <div class="uk-grid uk-child-width-1-3@m uk-child-width-1-1" uk-grid>
              <div>
                  <div class="uk-card uk-card-default uk-padding-small">
                      <span class="uk-label uk-label-small webinar uk-padding-xsmall">Webinar</span>
                      <div class="uk-text-large uk-text-bold uk-margin-small-top">1st Stakeholder Webinar</div>
                      <a href="https://zenodo.org/records/8370579" target="_blank" class="uk-button uk-button-text uk-margin-medium-top">Learn more</a>
                  </div>
              </div>
              <div>
                  <div class="uk-card uk-card-default uk-padding-small">
                      <span class="uk-label uk-label-small training uk-padding-xsmall">Training</span>
                      <span class="uk-label uk-label-small funder uk-padding-xsmall uk-margin-xsmall-left">RFO</span>
                      <div class="uk-text-large uk-text-bold uk-margin-small-top">RFO Training</div>
                      <a href="https://zenodo.org/records/10202641" target="_blank" class="uk-button uk-button-text uk-margin-medium-top">Learn more</a>
                  </div>
              </div>
              <div>
                  <div class="uk-card uk-card-default uk-padding-small">
                      <span class="uk-label uk-label-small training uk-padding-xsmall">Training</span>
                      <span class="uk-label uk-label-small organization uk-padding-xsmall uk-margin-xsmall-left">RPO</span>
                      <div class="uk-text-large uk-text-bold uk-margin-small-top">RPO Training</div>
                      <a href="https://zenodo.org/records/10143613" target="_blank" class="uk-button uk-button-text uk-margin-medium-top">Learn more</a>
                  </div>
              </div>
          </div>
      </div>
      <div class="uk-section uk-container uk-container-small uk-flex uk-flex-center">
          <div class="uk-width-1-2@l uk-text-center">
              <div class="uk-text-large uk-text-primary uk-margin-xsmall-bottom">Contact us</div>
              <h3 class="uk-margin-remove-top">Stay in the loop</h3>
              <div>If you wish to stay updated on our engagement and training events, please contact us. We’ll ensure you’re informed about upcoming opportunities to connect and learn.</div>
              <a routerLink="/contact-us" class="uk-button uk-button-primary uk-margin-medium-top">Contact us</a>
          </div>
      </div>
  `,
  styleUrls: ['engagement.component.less']
})
export class EngagementComponent extends BaseComponent implements OnInit {
  title = 'Engagement & Training';
  description = 'Engagement & Training';

  constructor(protected _route: ActivatedRoute,
              protected _piwikService: PiwikService,
              protected _meta: Meta,
              protected seoService: SEOService,
              protected _title: Title,
              protected _router: Router) {
    super();
  }

  ngOnInit() {
    this.setMetadata();
  }
}
