<template>
  <div>
  <div class="flex justify-center mt-8">
    <div>
      <div class="w-[1348px] grid grid-cols-3 gap-x-[160px] gap-y-8">
        <MalioInputText
          label="Nom du client (Entreprise)"
        />
        <MalioInputText
          label="Nom du contact principal"
        />
        <MalioInputText
          label="Prénom du contact principal"
        />
        <MalioSelectCheckbox
          label="Catégorie"
          v-model="multiselectValue"
          :options="[
            {label: 'Catégorie 1', value: 'Catégorie 1'},
            {label: 'Catégorie 2', value: 'Catégorie 2'}
          ]"
        />
        <MalioInputText
          label="Téléphone"
        />
        <MalioInputText
          label="Email"
        />
        <MalioSelect
          value=""
          label="Distributeur / Courtier"
          :options="[
            {label: 'Dépend du distributeur', value: 'Dépend du distributeur'},
            {label: 'Distributeur', value: 'Distributeur'},
            {label: 'Courtier', value: 'Courtier'},
          ]"
        />
        <MalioSelect
          value=""
          label="Nom du courtier"
          :options="[
            {label: 'Nom 1', value: 'Nom 1'}
          ]"
        />
        <MalioSelect
          value=""
          label="Distributeur / Courtier"
          :options="[
            {label: 'Nom 1', value: 'Nom 1'}
          ]"
        />
        <MalioCheckbox label="Prestation de triage"/>
      </div>
      <div class="mt-16 flex justify-center">
        <MalioButton label="Valider" variant="primary"/>
      </div>
    </div>
  </div>
  <div class="flex justify-center mt-16">
    <div>
      <div class="w-[1348px] grid grid-cols-3 gap-x-[80px] gap-y-8">
        <MalioInputText
          label="Nom du client (Entreprise)"
        />
        <MalioInputText
          label="Nom du contact principal"
        />
        <MalioInputText
          label="Prénom du contact principal"
        />
        <MalioSelectCheckbox
          label="Catégorie"
          v-model="multiselectValue"
          :options="[
            {label: 'Catégorie 1', value: 'Catégorie 1'},
            {label: 'Catégorie 2', value: 'Catégorie 2'}
          ]"
        />
        <MalioInputText
          label="Téléphone"
        />
        <MalioInputText
          label="Email"
        />
        <MalioSelect
          value=""
          label="Distributeur / Courtier"
          :options="[
            {label: 'Dépend du distributeur', value: 'Dépend du distributeur'},
            {label: 'Distributeur', value: 'Distributeur'},
            {label: 'Courtier', value: 'Courtier'},
          ]"
        />
        <MalioSelect
          value=""
          label="Nom du courtier"
          :options="[
            {label: 'Nom 1', value: 'Nom 1'}
          ]"
        />
        <MalioSelect
          value=""
          label="Distributeur / Courtier"
          :options="[
            {label: 'Nom 1', value: 'Nom 1'}
          ]"
        />
        <MalioCheckbox label="Prestation de triage"/>
      </div>
      <div class="mt-16 flex justify-center">
        <MalioButton label="Valider" variant="primary"/>
      </div>
    </div>
  </div>
  </div>
</template>

<script setup lang="ts">
import {ref} from "vue";
import MalioSelect from "../../../../app/components/malio/select/Select.vue";
import MalioCheckbox from "../../../../app/components/malio/checkbox/Checkbox.vue";
import MalioButton from "../../../../app/components/malio/button/Button.vue";

const multiselectValue = ref<Array<string | number>>([])
</script>
