<template>
  <div id="app">
    <div class="todo-app">
      <div class="todo-header">{{ message }}</div>
      <div class="form-group" >
        <input class="todo-input" v-model="newTodo" @keyup.enter="addTodo" placeholder="Add text and hit enter" />
      </div>
      <ul class="list-container" v-if="todos">
        <li class="todo" :class="todo.completed?'complete':''" v-for="todo, index in todos" :key="index" @click.ctrl="completeIt(todo)" kept2dblclick="removeTodo(index)"> {{todo.text}} <span class="close" @click="removeTodo(index)"></li>
      </ul>
      <p class="list-container" v-if="!todos.length">No todos</p>
      <div class="footer">
        <div class="badge-count">{{todoCount}}</div>
      </div>
    </div>
  </div>
</template>
<script>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Todo App',
    newTodo:'',
    todos: [
      { text: 'Learn JavaScript', completed: false },
      { text: 'Learn Vue' , completed: true},
      { text: 'Build something awesome', completed: false}
    ]
  },
  computed:{
    todoCount(){return this.todos.length}
  },
  methods:{
    addTodo(){
      console.log(this.newTodo)
      if(this.newTodo.trim()){
        this.todos.push({text:this.newTodo.trim(), completed:false})
      }
      this.newTodo='';
    },
    completeIt(todo){
      todo.completed=!todo.completed;
    },
    removeTodo(index){
      this.todos.splice(index, 1)
      //this.todos = this.todos.filter((todo,i)=> index!=i)
    }
  }
});




</script>
<style scoped>
$base-color : #2cb3b9;
$border-color : #e8e8e8;
$border-hover-color : #7CDDcc;
$base-width: 32px;
$text-color : #444;

$base-x-width: $base-width*12;
$base-half-width: $base-width/2;
@mixin base-x-width-mix{
  width: $base-x-width*.9;
}

*{padding: 0; margin: 0;}
body{
  font-family: Tahoma;
  font-size:14px;
  color: $text-color;
  letter-spacing: 1px;
}
#app{
  padding:$base-half-width;
}
.todo-app{
  width: $base-x-width;
  padding: $base-half-width 5px;
  box-shadow:$base-half-width/4 $base-half-width/2 $base-half-width  $base-half-width/2 $border-color ;
  .todo-header{
    color:$base-color;
    font-size:1.4em;
    letter-spacing: 3px;
    padding: $base-half-width;
    margin-bottom: $base-half-width;
    border-bottom:1px solid $base-color;
  }
  .form-group{
     padding-left: $base-half-width;
     @include base-x-width-mix;
    .todo-input{
      height:$base-width;
      width: 95.5%;
      border: 0;
      border-bottom:1px solid $border-color;
      padding-left: $base-half-width;
      &::focus{
        border:1px solid $border-color
      }
    }
  }
  .list-container{
    @include base-x-width-mix;
    box-shadow:$base-half-width/8 $base-half-width/4 $base-half-width  $base-half-width/4 $border-color inset;
    margin: $base-half-width/2 $base-half-width;
    .todo{
      border-bottom:1px solid $border-color;
      list-style:none;
      padding:10px 20px;
      &:hover{
        padding-left: $base-half-width;
        border-left: $base-half-width/4 solid $border-hover-color;
        .close{
          visibility: visible;
        }
      }
      &:first-child{
        border-top:1px solid $border-color;
      }
      &.complete{
        text-decoration: line-through;
        padding-right: $base-half-width/2;
        border-right: $base-half-width/2 solid $border-hover-color;
      }
    }
    .close{
      visibility: hidden;
      cursor: pointer;
      &::after{
        float: right;
        content: "X"
      }
      :hover{
        color: $base-color;
      }
    }
  }
  p.list-container{
    text-align:center;
    letter-spacing: 5px;
  }
  .footer{
    text-align: right;
    display: flex;
    .badge-count{
      flex-direction: right;
      border-radius: 50%;
      font-size: 1.3em;
      line-height: 1.7em;
      background-color: $base-color;
      width: $base-width;
      height: $base-width;
      text-align: center;
      vertical-align: middle;
      font-weight: bold;
      color: whitesmoke;
      position: absolute;
      top: $base-width;
      left: $base-x-width - $base-half-width;
    }
  }
}
</style>