<script setup>
  const special = ["blank"]

  const templates = await queryContent('template').where({ public: true }).sort({ priority: 1 }).find()
</script>

<template>
  <div class="templates" id="templates">
    <h3>Choose a starting point</h3>
    <p>Start from scratch or customize a ready made design.</p>

    <!-- Template cards - create & preview btns -->
    <div class="cards">
      <div class="template" v-for="tmpl in templates" :id="tmpl.slug" :key="tmpl.slug">
        <NuxtLink class="preview" :to="'/site/' + tmpl.slug">
          <img :src="tmpl.preview" :alt="tmpl.title" />
        </NuxtLink>
        <div class="details">
          <NuxtLink class="title" :to="'/site/' + tmpl.slug"><h5>{{ tmpl.title }}</h5></NuxtLink>
          <span v-if="tmpl.pro">Pro</span>
          <p>{{ tmpl.desc }}</p>
        </div>
      </div>
    </div>
  </div>
</template>