<script setup>
  import { globalStore } from "../stores/index.js";
  import { defineProps } from "vue";

  const props = defineProps(['windowWidth']);
  const store = globalStore();
</script>

<template>
  <div class="reset-menu">
    <div class="desktop-title" v-if="windowWidth >= 800">Cellular Automata Explorer</div>
    <div class="reset-input">
      <div class="loop">
        <label>
          loop
          <input
            :value="store.loop"
            type="checkbox"
            :checked="store.loop"
            @input="store.toggleLoop()"
          />
        </label>
      </div>
      <input
        type="button"
        name="next"
        class="next"
        value="next"
        @click="store.toggleNext()"
      />
      <input
        type="button"
        name="stop"
        class="stop"
        value="stop"
        @click="store.toggleStop()"
      />
      <input
        type="button"
        name="reset"
        class="reset"
        value="reset"
        @click="store.toggleReset()"
      />
    </div>
  </div>
</template>
