<script setup>
import { useProjectStore } from '../stores/projectStore';

const projectStore = useProjectStore();
</script>

<template>
  <div class="artboard-controls">
    <h4>Artboard Settings</h4>
    <div class="form-group">
        <label>Grid Size:</label>
        <span>{{ projectStore.gridSize }}px</span>
    </div>
    <div class="form-group-toggle">
        <label for="grid-visible">Show Grid</label>
        <input type="checkbox" id="grid-visible" :checked="projectStore.activePage?.gridVisible" @change="projectStore.toggleGrid" />
    </div>
    <div class="form-group-toggle">
        <label for="snap-to-grid">Snap to Grid</label>
        <input type="checkbox" id="snap-to-grid" :checked="projectStore.activePage?.snapToGrid" @change="projectStore.toggleSnap" />
    </div>
  </div>
</template>

<style scoped>
.artboard-controls {
  padding-top: 1rem;
}
h4 {
  margin-top: 0;
  margin-bottom: 1.5rem;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-color-darker);
}
.form-group, .form-group-toggle {
  margin-bottom: 1rem;
}
.form-group-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
label {
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--text-color-darker);
}
span {
  font-family: monospace;
  color: var(--text-color);
}
</style>
