<script setup lang="ts">
withDefaults(
  defineProps<{
    label: string;
    inspectorOpen?: boolean;
    indexWidth?: string;
    inspectorWidth?: string;
  }>(),
  {
    inspectorOpen: false,
    indexWidth: "minmax(250px, 28%)",
    inspectorWidth: "minmax(320px, 34%)",
  },
);
</script>

<template>
  <section
    class="operations-workspace"
    :style="{
      '--operations-index-width': indexWidth,
      '--operations-inspector-width': inspectorWidth,
    }"
    :data-inspector-open="inspectorOpen ? 'true' : 'false'"
    :aria-label="label"
  >
    <aside class="operations-index"><slot name="index" /></aside>
    <main class="operations-main"><slot /></main>
    <aside v-if="inspectorOpen" class="operations-inspector">
      <slot name="inspector" />
    </aside>
  </section>
</template>
