<div id="app">
  <v-app class="tasks_app">
    <v-content>
      <v-container style="max-width: 550px">
        <div class="logo_container">
        <img src="https://static.platzi.com/static/css/logo.a76b2a87162b3b46529c30d1cb91ccc6.png">
        </div>
        
        <v-card class="pa-4 platzi__tasks_card">
        <v-text-field v-model="task" label="Agrega una tarea para navidad :D" solo @keydown.enter="create">
          <v-fade-transition slot="append">
            <v-icon v-if="task" @click="create">
              add_circle
            </v-icon>
          </v-fade-transition>
        </v-text-field>
        <h2 class="display-1 red--text pl-3">Tareas:&nbsp;
          <v-fade-transition leave-absolute>
            <span :key="`tasks-${tasks.length}`">
              {{ tasks.length }}
            </span>
          </v-fade-transition>
        </h2>
        <v-divider class="mt-3"></v-divider>
        <v-layout my-1 align-center class="white">
          <strong class="mx-3 grey--text text--darken-2">
            Restantes: {{ remainingTasks }}
          </strong>
          <v-divider vertical></v-divider>
          <strong class="mx-3 green--text text--darken-2">
            Complatedas: {{ completedTasks }}
          </strong>
          <v-spacer></v-spacer>
          <v-progress-circular :value="progress" color="green darken-2" class="mr-2"></v-progress-circular>
        </v-layout>
        <v-divider class="mb-3"></v-divider>
        <v-card v-if="tasks.length > 0">
          <v-slide-y-transition class="py-0" group tag="v-list">
            <template v-for="(task, i) in tasks">
              <v-divider v-if="i !== 0" :key="`${i}-divider`"></v-divider>
              <v-list-tile :key="`${i}-${task.text}`" class="task__list_item" :class="{'task__done': task.done}">
                <v-list-tile-action>
                  <v-checkbox v-model="task.done" color="success darken-1">
                    <div slot="label" :class="task.done && 'grey--text' || 'text--primary'" class="ml-3" v-text="task.text"></div>
                  </v-checkbox>
                </v-list-tile-action>
                <v-spacer></v-spacer>
                <v-scroll-x-transition>
                  <v-icon color="red" class="pl-5" @click="removeTask(task)">cancel</v-icon>
                </v-scroll-x-transition>
              </v-list-tile>
            </template>
          </v-slide-y-transition>
        </v-card>
      </v-container>
    </v-content>
  </v-app>
</div>