<template>
  <div>
    <v-row justify="center" align="center" class="main-row">
      <v-col cols="12">
        <div class="d-flex justify-center">
          <div class="text-center">
            <h1 class="font-weight-light">Welcome to the EUbOPEN Portal</h1>
          </div>
        </div>
      </v-col>
      <v-col cols="12" md="6" xl="4">
        <p class="text-justify">
          The EUbOPEN consortium is an Innovative Medicines Initiative (IMI)
          funded project to enable and unlock biology in the open.
        </p>
        <p class="text-justify">
          The EUbOPEN Portal is a comprehensive tool that allows searching among
          an open access chemogenomic library comprising about 5,000 well
          annotated compounds covering roughly 1,000 different proteins.
        </p>
        <div class="d-flex justify-space-between flex-wrap align-center">
          <div class="buttons-container">
            <v-btn depressed color="primary" nuxt to="/compound/browse">
              Explore all Compounds
            </v-btn>
          </div>
          <div class="buttons-container">
            <v-btn depressed color="primary" nuxt to="/target/browse">
              Explore all Targets
            </v-btn>
          </div>
        </div>
      </v-col>
      <v-col cols="12" md="6">
        <VisualisationsCard />
      </v-col>
    </v-row>
    <v-row>
      <v-col cols="12">
        <Sponsors />
      </v-col>
    </v-row>
  </div>
</template>

<script>
import VisualisationsCard from '~/components/mainPage/visualisations/VisualisationsCard.vue'
import Sponsors from '~/components/mainPage/sponsors/Sponsors.vue'
export default {
  components: {
    VisualisationsCard,
    Sponsors,
  },
  layout: 'default',

  head() {
    const titleText = `Welcome to the EUbOPEN Portal`
    const descriptionText =
      'The EUbOPEN consortium is an Innovative Medicines Initiative (IMI) funded project to enable and unlock biology in the open.'
    const canonicalURL =
      `https://${process.env.primaryDomain}` + this.$route.path

    const imgURL = `https://${
      process.env.primaryDomain
    }${require('~/static/img/logo.png')}`
    return {
      meta: [
        { hid: 'og:title', name: 'og:title', content: titleText },
        {
          hid: 'og:description',
          name: 'og:description',
          content: descriptionText,
        },
        { hid: 'og:type', name: 'og:type', content: 'object' },
        { hid: 'og:url', name: 'og:url', content: canonicalURL },
        { hid: 'og:image', name: 'og:image', content: imgURL },
      ],
      link: [
        {
          rel: 'canonical',
          href: canonicalURL,
        },
      ],
    }
  },
  computed: {
    esProxyBaseUrl() {
      return process.env.esProxyBaseUrl
    },
  },
}
</script>
<style scoped lang="scss">
.main-row {
  margin-top: 30px;
  .buttons-container {
    padding: 5px;
  }
}
</style>