<template>
  <div class="ks-form-layout">
    <form class="ks-form-layout__form ks-card" @submit.prevent="$emit('submit')"><slot /></form>
    <aside v-if="$slots.preview" class="ks-form-layout__preview ks-card"><slot name="preview" /></aside>
  </div>
</template>
<script setup lang="ts">defineEmits<{ submit: [] }>()</script>
<style scoped>
.ks-form-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--ks-preview-width, 24rem);
  gap: var(--ks-space-4);
  align-items: stretch;
  flex: 1;
  min-height: 0;
  height: 100%;
}

.ks-form-layout__form,
.ks-form-layout__preview {
  padding: var(--ks-space-4);
  overflow-y: auto;
  min-height: 0;
  height: 100%;
  box-sizing: border-box;
}

@media (max-width: 1100px) {
  .ks-form-layout {
    grid-template-columns: 1fr;
  }
}
</style>

