<template>
  <div class="min-h-full py-16 bg-white">
    <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
      <h1 class="text-4xl sm:text-5xl font-display font-bold text-gray-900 mb-6">
        TT-Regeln
      </h1>
      <!-- nosemgrep: javascript.vue.security.audit.xss.templates.avoid-v-html -->
      <div
        class="prose prose-lg max-w-none"
        v-html="content"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { useSanitizeHtml } from '~/composables/useSanitizeHtml'

const rawContent = ref('')

const content = computed(() => useSanitizeHtml(rawContent.value))

useHead({
  title: 'TT-Regeln - Harheimer TC',
})

async function loadConfig() {
  try {
    const data = await $fetch('/api/config')
    rawContent.value = data?.seiten?.ttRegeln || ''
  } catch (_e) {
    rawContent.value = ''
  }
}

onMounted(loadConfig)
</script>
