<template>
  <div style="padding: 0">
    <div class="q-pa-sm row items-start">
      <div class="new-card q-pa-sm" v-for="myNew in news" :key="myNew.id">
        <q-card>
          <q-img :src="`${$app.imageUrl}/news/full/${myNew.image}`"> </q-img>
          <q-card-section>
            <div class="text-h5">{{ myNew.title }}</div>
          </q-card-section>
          <q-card-section class="new-body">
            <div v-html="myNew.text" />
          </q-card-section>
        </q-card>
      </div>
    </div>
    <q-page-sticky>
      <q-btn
        fab
        icon="add_shopping_cart"
        color="accent"
        to="/ecomerce/catalog"
        :title="$t('startOrder')"
      />
    </q-page-sticky>
  </div>
</template>

<style lang="scss" scoped>
.new-card {
  width: 100%;

  @media screen and (min-width: 800px) and (max-width: 1400px) {
    width: 50%;
  }
  @media screen and (min-width: 1401px) and (max-width: 1920px) {
    width: 33.33%;
  }
  @media screen and (min-width: 19021) {
    width: 25%;
  }
}
.new-body {
  font-family: 'Open Sans';
}
</style>

<script>
export default {
    name: 'PageIndex',
    data () {
        return {
            news: []
        }
    },
    async mounted () {
        this.news = await this.$jApi.query(
            `SELECT title, text, image, id
        FROM news
        ORDER BY priority, created DESC`
        )
    }
}
</script>

<i18n lang="yaml">
en-US:
  startOrder: Start order
es-ES:
  startOrder: Empezar pedido
ca-ES:
  startOrder: Començar comanda
fr-FR:
  startOrder: Lancer commande
pt-PT:
  startOrder: Comece uma encomenda
</i18n>
