<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">
        Satzung
      </h1>
      
      <!-- nosemgrep: javascript.vue.security.audit.xss.templates.avoid-v-html -->
      <div
        class="prose prose-lg max-w-none mb-8"
        v-html="content"
      />
      
      <div
        v-if="pdfUrl"
        class="mt-8 p-6 bg-gray-50 rounded-lg"
      >
        <h3 class="text-lg font-semibold mb-4">
          PDF-Download
        </h3>
        <a 
          :href="pdfUrl" 
          target="_blank" 
          class="inline-flex items-center px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700"
        >
          <svg
            class="w-5 h-5 mr-2"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
            />
          </svg>
          Satzung als PDF herunterladen
        </a>
      </div>
    </div>
  </div>
</template>

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

const rawContent = ref('')
const pdfUrl = ref('')

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

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

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

onMounted(loadConfig)
</script>
