<template>
  <div class="console">
    <div class="group" v-for="group in history" :key="group">
      <pre><span class="host">{{group.host}}</span><span>{{group.command}}</span></pre>
      <pre><span v-for="output in group.output" :key="output" :class="output.color">{{output.content}}</span></pre>
    </div>
  </div>
</template>

<script>
import commands from "@/render-commands.js"

export default {
  name: "console",
  data(){
    return{
      console:{
      },
      history:[
        {
          host: "[cybre.town]$ > ",
          command: "welcome --help",
          output: commands.data().commands.welcome.output
        },
        {
          host: "[cybre.town]$ > ",
          command: "_",
          output: []
        }
      ]
    }
  }
}
</script>

<style scoped lang="scss">
  pre{
    margin: 0;
    padding: 0;
  }
  .console{
    color: #fff;
    .group{
      .host{color: #02a594;}
      .white{color: #fff}
      .green{color: #44dd88;}
      .blue{color: #0081b1;}
    }
  }
</style>