<template>
  <div id="debug-information">
    <div class="toggle-content" :class="{ visible: showDebugInfo }">
      <ul>
        <li class="version"><label>version:</label>{{ version.version }}</li>
        <li class="hash"><label>build hash:</label>{{ version.hash }}</li>
        <li class="raw"><label>build hash (raw):</label>{{ version.raw }}</li>
      </ul>
      <label>device size: </label>
      <label class="mobile">mobile</label>
      <label class="tablet">tablet</label>
      <label class="desktop">desktop</label>
      <label class="ultrawide">ultrawide</label>
    </div>
    <button class="low-profile" @click="showDebugInfo = !showDebugInfo">
      <EyeOpenIcon v-if="showDebugInfo" />
      <EyeClosedIcon v-if="!showDebugInfo" />
    </button>
  </div>
</template>
<script lang="ts" src="./DebugInfo.ts"></script>
<style scoped lang="scss" src="./DebugInfo.scss"></style>
