<template>
  <div class="flex justify-center items-centers">
    <div class="w-full max-w-xl">
      <heading class="flex mb-3">Herzlich Willkommen</heading>
      <p class="text-90 leading-tight mb-8">
        Hier können Sie die dynamischen Inhalte Ihrer Website selbständig verwalten.
      </p>
      <card>
        <table class="w-full" cellspacing="0" cellpadding="0">
          <tr v-for="row in this.card.elements">
            <td v-if="!row.length" class="align-top w-full border-r border-b border-50" colspan="2">
              <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>
            </td>
            <td v-else v-for="element in row" class="align-top w-1/2 border-r border-b border-50">
              <a v-if="element.link" :href="link(element.link)" class="no-underline">
                <DashboardElement :title="element.title" :text="element.text"></DashboardElement>
              </a>
              <DashboardElement v-else :title="element.title" :text="element.text"></DashboardElement>
            </td>
          </tr>
        </table>
      </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>
