<template>
  <div class="flex justify-center items-center">
    <div class="w-full">
      <Heading>Herzlich Willkommen</Heading>
      <p class="leading-tight mt-3">
        Hier können Sie die dynamischen Inhalte Ihrer Website selbständig verwalten.
      </p>
      <Card class="mt-8">
        <div class="md:grid md:grid-cols-2">
          <div class="border-r border-b border-gray-200 dark:border-gray-700" v-for="row in this.card.elements">
            <a v-if="row.link" :href="link(row.link)" class="no-underline">
              <DashboardElement :title="row.title" :text="row.text"></DashboardElement>
            </a>
            <DashboardElement v-else :title="row.title" :text="row.text"></DashboardElement>
          </div>
        </div>
      </Card>
    </div>
  </div>
</template>

<script>
import DashboardElement from './DashboardElement.vue'

export default {
  name: "Dashboard",
  props: {
    card: Object,
  },
  components: {
    DashboardElement
  },

  methods: {
    link(path) {
      return `/nova/resources/${path}`
    },
  },

}
</script>
