<template>
  <section class="business-block-page">
#if($businessBlocks && $businessBlocks.size() > 0)
#foreach($block in $businessBlocks)
    <div class="business-block-page__item business-block-page__item--span-${block.span}">
      <${block.componentName} />
    </div>
#end
#else
    <div class="business-block-empty">No business blocks configured.</div>
#end
  </section>
</template>

<script>
#foreach($block in $businessBlocks)
import ${block.componentName} from "${block.relativeImportPath}"
#end

export default {
  name: "${pageComponentName}",
#if($businessBlocks && $businessBlocks.size() > 0)
  components: {
#foreach($block in $businessBlocks)
    ${block.componentName}#if($foreach.hasNext),#end
#end
  }
#else
  components: {}
#end
}
</script>

<style scoped>
.business-block-page {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
  min-height: 100%;
  padding: 24px;
  background: #f5f7fb;
}

.business-block-page__item--span-12 { grid-column: span 12; }
.business-block-page__item--span-6 { grid-column: span 6; }
.business-block-page__item--span-4 { grid-column: span 4; }

.business-block-empty {
  grid-column: span 12;
  padding: 32px;
  color: #909399;
  text-align: center;
  background: #fff;
  border: 1px dashed #dcdfe6;
  border-radius: 6px;
}

@media (max-width: 900px) {
  .business-block-page__item {
    grid-column: span 12;
  }
}
</style>
