<template>
  <v-flex xs10>
    <h1 class="page-title">SPONSORS</h1>
    <v-layout row align-content-center wrap>
      <v-flex xs6 class="sponsor-element mb-3" v-for="i in sponsors" :key="i.id">
        <p class="sponsor-name">{{ i.category }}</p>
        <img :src="i.image" alt="" class="sponsor-logo" :class="i.name">
      </v-flex>
    </v-layout>
  </v-flex>
</template>

<style lang="scss" scoped>
.sponsor-name {
  width: 100%;
  display: block;
  text-align: center;
  margin-bottom: 20px;
}

.sponsor-logo {
  width: auto;
  height: 120px;
  display: block !important;
  margin: 0 auto;

  &.Kaspersky {
    width: 75%;
    height: auto;
  }

  &.SAS {
    width: 40%;
    height: auto;
  }
}
</style>


<script>
export default {
  name: 'information-sponsors',
  data () {
    return {
      sponsors: []
    }
  },
  async mounted () {
    try {
      const sponsors = await this.$axios.$get('/api/sponsor/')
      sponsors.map(value => this.sponsors.push(value))
    } catch (err) {
      console.error(err)
    }
  }
}
</script>