{{#each sortedTasks as |task|}}
  {{task-list-item name=task.name steps=model.steps taskLeader=task.admin.name admins=model.admins step=task.step dueDate=task.dueDate this=this store=store id=task.id complete=task.completed}}
{{/each}}

{{#if taskComplete}}
<div class="todo-list-completed">
    <div class="squaredThree">
        <input type="checkbox" id={{name}} name="check" value={{id}} onclick={{action "toggleTask"}} checked/>
        <label for={{name}}></label>
    </div>
    <div class="todo-name-completed">
        <p>{{name}}</p>
    </div>
    <div class="todo-date-completed">
        <p>Completed</p>
    </div>
    <div class="todo-member-completed">
        <p>{{taskLeader}}</p>
    </div>
</div>
{{else}}
    <div class="todo-list" {{action "hoverOver" on="mouseEnter"}} {{action "hoverOff" on="mouseLeave"}}>
        <div class="squaredThree">
            <input type="checkbox" id={{name}} name="check" value={{id}} onclick={{action "toggleTask"}}/>
            <label for={{name}}></label>
        </div>
        <div class="todo-name">
            <p>{{name}}</p>
        </div>
        {{#unless taskAdmin}}
        <div class="todo-date">
            <p>{{moment-from-now dueDate interval=60000}}</p>
        </div>
        <div class="todo-member">
            <p>{{taskLeader}}</p>
        </div>
        {{/unless}}
        {{#if taskAdmin}}
        <div class="todo-delete">
            <svg {{action 'deleteTask' id}} class="icon-padding" width="25px" height="25px" viewBox="0 0 612 612" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
            <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                <g id="x-button" fill="#cc1818">
                    <g id="Capa_1">
                        <g id="Cross">
                            <path d="M306,0 C137.012,0 0,136.992 0,306 C0,475.008 137.012,612 306,612 C474.988,612 612,475.008 612,306 C612,136.992 474.988,0 306,0 L306,0 Z M306,535.5 C179.45,535.5 76.5,432.55 76.5,306 C76.5,179.45 179.45,76.5 306,76.5 C432.55,76.5 535.5,179.45 535.5,306 C535.5,432.55 432.55,535.5 306,535.5 L306,535.5 Z M410.098,202.419 L409.581,201.902 C395.391,187.712 372.363,187.712 358.173,201.902 L306,254.076 L253.808,201.903 C239.617,187.712 216.61,187.712 202.4,201.903 L201.883,202.419 C187.693,216.61 187.693,239.617 201.883,253.827 L254.076,306 L201.884,358.192 C187.694,372.381 187.694,395.389 201.884,409.599 L202.401,410.116 C216.592,424.306 239.618,424.306 253.809,410.116 L306,357.925 L358.173,410.116 C372.363,424.306 395.371,424.306 409.581,410.116 L410.098,409.599 C424.288,395.409 424.288,372.381 410.098,358.192 L357.925,306 L410.116,253.808 C424.308,239.617 424.308,216.61 410.098,202.419 L410.098,202.419 Z" id="Shape"></path>
                        </g>
                    </g>
                </g>
            </g>
        </svg>
        </div>
        <div class="todo-member">
            <p>{{taskLeader}}</p>
        </div>
        {{/if}}
    </div>
{{/if}}

import Ember from 'ember';

export default Ember.Component.extend({
    classNameBindings: ['taskComplete'],
    user: Ember.inject.service(),
    //completed: false,
    taskComplete: false,
    taskAdmin: false,
    init: function() {
       this._super();
       this.setTaskStatus();
    },
    setTaskStatus: function() {
        this.set('taskComplete', this.get('complete'));
    },

    actions: {

            deleteTask: function(taskId) {
                this.store.findRecord('task', taskId).then(function(task) {
                task.destroyRecord();
                });
            },
            toggleTask: function() {
                self = this;
                this.set('taskComplete', !this.get('complete'));
                //this.toggleProperty('completed');
                this.store.findRecord('task', this.get('id')).then(function(currentTask) {
                    currentTask.set('completed', self.get('taskComplete'));
                    currentTask.save();
                })

            },
            hoverOver: function() {
                this.set('taskAdmin', true);
            },
            hoverOff: function() {
                this.set('taskAdmin', false);
            }
    }
});

export default DS.Model.extend({
    name: DS.attr('string'),
    description: DS.attr('string'),
    process: DS.belongsTo('process'),
    createdOn: DS.attr('date', {
        defaultValue() {
            return new Date();
        }
    }),
    dueDate: DS.attr('date'),
    completedOn: DS.attr('date'),
    onTime: DS.attr('boolean', { defaultValue: true }),
    completed: DS.attr('boolean'),
    optional: DS.attr('boolean'),
    step: DS.belongsTo('step'),
    firstInStep: DS.attr('boolean'),
    users: DS.hasMany('user'),
    admins: DS.hasMany('user', { inverse: 'tasksLead' }),
    members: DS.hasMany('user', { inverse: 'taskMember' })
});

export default Model.extend({
  firstName: DS.attr('string'),
  lastName: DS.attr('string'),
  name: Ember.computed('firstName', 'lastName', function() {
    return `${this.get('firstName')} ${this.get('lastName')}`;
  }),
  email: DS.attr('string'),
  password: DS.attr('string'),
  totalTeams: DS.attr('number'),
  totalProcesses: DS.attr('number'),
  completedProcesses: DS.attr('number'),
  totalTasks: DS.attr('number'),
  completedTasks: DS.attr('number'),
  teams: DS.hasMany('team'),
  processes: DS.hasMany('process'),
  tasks: DS.hasMany('task'),
  processesLead: DS.hasMany('process', { inverse: 'admins' }),
  teamsLead: DS.hasMany('team', { inverse: 'admins' }),
  tasksLead: DS.hasMany('task', { inverse: 'admins' }),
  processMember: DS.hasMany('process', { inverse: 'members' }),
  teamMember: DS.hasMany('team', { inverse: 'members' }),
  taskMember: DS.hasMany('task', { inverse: 'members' })
});