<template>
  <div class="grid grid-cols-1 items-start gap-6 p-4 lg:grid-cols-2">
    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Simple</h2>
      <MalioInputRichText
        v-model="simpleValue"
        label="Note"
        placeholder="Écrire ici…"
      />
      <pre class="mt-3 overflow-auto rounded bg-m-bg p-2 text-xs">{{ simpleValue }}</pre>
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Avec contenu initial + hint</h2>
      <MalioInputRichText
        v-model="hintValue"
        label="Description"
        hint="Tu peux mettre en forme avec la barre d'outils"
      />
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Erreur</h2>
      <MalioInputRichText
        v-model="errorValue"
        label="Compte-rendu"
        error="Le compte-rendu doit faire au moins 20 caractères"
      />
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Succès</h2>
      <MalioInputRichText
        v-model="successValue"
        label="Compte-rendu"
        success="Compte-rendu validé"
      />
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Readonly</h2>
      <MalioInputRichText
        v-model="readonlyValue"
        label="Note (lecture seule)"
        readonly
      />
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Disabled</h2>
      <MalioInputRichText
        v-model="disabledValue"
        label="Note (désactivée)"
        disabled
      />
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Affichage seul (editable=false)</h2>
      <MalioInputRichText
        :model-value="readonlyValue"
        :editable="false"
      />
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Sortie HTML</h2>
      <MalioInputRichText
        v-model="htmlValue"
        label="Article"
        output-format="html"
        min-height="200px"
        placeholder="Tape ici, la sortie sera en HTML…"
      />
      <pre class="mt-3 overflow-auto rounded bg-m-bg p-2 text-xs">{{ htmlValue }}</pre>
    </div>
  </div>
</template>

<script setup lang="ts">
import {ref} from 'vue'
import MalioInputRichText from '../../../../app/components/malio/input/InputRichText.vue'

const simpleValue = ref('')
const hintValue = ref('## Titre\n\nUn paragraphe avec du **gras**, de l\'*italique* et un [lien](https://malio.fr).')
const errorValue = ref('Trop court')
const successValue = ref('Tout est bon de mon côté.')
const readonlyValue = ref('## Compte-rendu\n\n- Point 1\n- Point 2\n\n> Citation importante')
const disabledValue = ref('Contenu indisponible.')
const htmlValue = ref('<p>Contenu <strong>riche</strong>.</p>')
</script>
