<!-- components/SectionLayouts/PolicySectionLayout.vue -->
<template>
  <div class="policy-layout">
    <!-- Row 1: Heading + Effective Date side by side -->
    <div class="policy-top-row">
      <div class="policy-heading-col">
        <SectionField
          :field="section.fields.heading"
          field-key="heading"
          :section-key="sectionKey"
          :section-model="sectionModel"
          :user-role="userRole"
          :disabled="disabled"
          :is-super-admin="isSuperAdmin"
          @update-field="emitUpdate"
          @open-media-picker="emitMedia"
        />
      </div>
      <div class="policy-date-col">
        <SectionField
          :field="section.fields.effectiveDate"
          field-key="effectiveDate"
          :section-key="sectionKey"
          :section-model="sectionModel"
          :user-role="userRole"
          :disabled="disabled"
          :is-super-admin="isSuperAdmin"
          @update-field="emitUpdate"
          @open-media-picker="emitMedia"
        />
      </div>
    </div>

    <!-- Row 2: Content full width -->
    <div class="policy-content-row">
      <SectionField
        :field="section.fields.content"
        field-key="content"
        :section-key="sectionKey"
        :section-model="sectionModel"
        :user-role="userRole"
        :disabled="disabled"
        :is-super-admin="isSuperAdmin"
        @update-field="emitUpdate"
        @open-media-picker="emitMedia"
      />
    </div>
  </div>
</template>

<script setup>
import SectionField from "../SectionField.vue";

const props = defineProps({
  section: Object,
  sectionKey: String,
  sectionModel: Object,
  userRole: String,
  disabled: Boolean,
  isSuperAdmin: Boolean,
});

const emit = defineEmits(["update-field", "open-media-picker"]);

const emitUpdate = (sectionKey, fieldKey, value) => {
  emit("update-field", sectionKey, fieldKey, value);
};

const emitMedia = (payload) => emit("open-media-picker", payload);
</script>

<style scoped>
.policy-layout {
  background: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
}

.policy-top-row {
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 20px;
  align-items: start;
}

.policy-heading-col,
.policy-date-col {
  width: 100%;
}

.policy-content-row {
  width: 100%;
}

.policy-content-row :deep(.v-textarea textarea) {
  min-height: 260px;
}

@media (max-width: 768px) {
  .policy-layout {
    padding: 18px;
    gap: 18px;
  }

  .policy-top-row {
    grid-template-columns: 1fr;
  }
}
</style>
