<template>
<div id="sidebar">
  <MenuRow row-title="General Properties">
    <div class="form-field">
      <label for="live">Canvas Resolution</label>
    </div>
    <div class="form-field">
      <input name="canvasWidth" type="number" id="canvasWidth" value="1280"/>
    </div>
    <div class="form-field">
      <input name="canvasHeight" type="number" id="canvasHeight" value="1024"/>
    </div>
    <div class="form-field">
      <input type="button" name="canvasRefresh" id="canvasRefresh" value="refresh"/>
    </div>
  </MenuRow>
  <MenuRow row-title="Cell Properties">
    <div class="form-field">
      <label for="live">Living cell color</label>
      <input name="live" type="color" id="live" value="#000000"/>
    </div>
    <div class="form-field">
      <label for="dead">Dead cell color</label>
      <input name="dead" type="color" id="dead" value="#AA78E8"/>
    </div>
    <div class="form-field">
      <label>Cell size</label>
      <input name="cellSize" type="number" id="cellSize" value="5"/>
    </div>
  </MenuRow>
  <MenuRow row-title="Elementary Cellular Automata">
    <div class="form-field">
      <label>Rules</label>
    </div>
    <div class="form-field">
      <label>111
        <input type="checkbox" name="111" checked>
      </label>
    </div>
    <div class="form-field">
      <label>110
        <input type="checkbox" name="110">
      </label>
    </div>
    <div class="form-field">
      <label>101
        <input type="checkbox" name="101" checked>
      </label>
    </div>
    <div class="form-field">
      <label>100
        <input type="checkbox" name="100">
      </label>
    </div>
    <div class="form-field">
      <label>011
        <input type="checkbox" name="011" checked>
      </label>
    </div>
    <div class="form-field">
      <label>010
        <input type="checkbox" name="010">
      </label>
    </div>
    <div class="form-field">
      <label>001
        <input type="checkbox" name="001">
      </label>
    </div>
    <div class="form-field">
      <label>000
        <input type="checkbox" name="000" checked>
      </label>
    </div>
    <div class="form-field">
      <input type="button" name="start" id="start" value="start"/>
      <input type="button" name="stop" class="stop" value="stop"/>
      <input type="button" name="reset" class="reset" value="reset"/>
    </div>
  </MenuRow>
  <MenuRow row-title="2D Cellular Automata">
    <div class="form-field">
      <input type="button" name="start2d" id="start2d" value="start"/>
      <input type="button" name="stop" class="stop" value="stop"/>
      <input type="button" name="reset" class="reset" value="reset"/>
    </div>
  </MenuRow>
</div>
</template>

<script>
import MenuRow from './MenuRow.vue'
export default {
  name: 'MainMenu',
  components: {
    MenuRow
  }
}
</script>

<style>
#sidebar {
    flex-basis: fit-content;
    padding: 0 10px;
    width: fit-content;
}
</style>
