<script setup lang="ts">
import RunPicker from '@/components/RunPicker.vue'
import ExportBar from '@/components/ExportBar.vue'
import ReviewBody from '@/components/ReviewBody.vue'
</script>

<template>
  <div class="app">
    <header class="topbar">
      <RunPicker />
      <div class="spacer" />
      <ExportBar />
    </header>

    <div class="body">
      <ReviewBody :allow-edit="true" />
    </div>
  </div>
</template>

<style scoped>
.app {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}
.topbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: 52px;
  flex-shrink: 0;
  padding: 0 var(--space-4);
  background: var(--surface-1);
  border-bottom: var(--panel-border);
}
.spacer {
  flex: 1;
}
.body {
  flex: 1;
  min-height: 0;
  padding: var(--space-2);
}
.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: var(--space-6);
  text-align: center;
  color: var(--text-secondary);
}
</style>
