<div class="task-list"
     as-sortable="$ctrl.dragControlListeners"
     ng-class="{
     'is-hide-controls': $ctrl.isHideControls,
     'is-disable-drop-into': $ctrl.disableDropInto,
     }"
     ng-model="$ctrl.tasks">
  <div class="task"
       as-sortable-item
       ng-class="{
      'is-current': $ctrl.currentTaskId === task.id,
      'is-done':task.isDone
      }"
       ng-repeat="task in $ctrl.tasks|limitTo:$ctrl.limitTo|filter:$ctrl.filter track by task.id"
       tabindex="1"
       ng-focus="$ctrl.onFocus($event)">

    <div class="inner-wrapper">

      <div class="first-line">
        <div class="title-bar-wrapper">
          <button class="ico-btn update-indicator-btn"
                  aria-label="is updated"
                  tabindex="2"
                  ng-click="task.showNotes = !task.showNotes;"
                  ng-if="task.isUpdated">
            <md-tooltip>
              Click to show updates
            </md-tooltip>
            <ng-md-icon class="update update-icon"
                        icon="update"></ng-md-icon>
          </button>


          <ng-md-icon class="handle"
                      as-sortable-item-handle
                      icon="drag_handle"></ng-md-icon>

          <button class="ico-btn play-btn"
                  aria-label="mark as current"
                  tabindex="2"
                  ng-click="$ctrl.togglePlay(task)"
                  ng-if="!task.isDone && $ctrl.allowTaskSelection && !task.subTasks.length">

            <ng-md-icon icon="{{$ctrl.currentTaskId === task.id ? 'pause':'play_arrow'}}"
                        aria-label="mark as current"></ng-md-icon>
          </button>

          <a class="ico-btn original-link-btn"
             aria-label="link"
             tabindex="2"
             target="_blank"
             external-link
             ng-if="::task.originalLink"
             ng-href="{{ ::task.originalLink }}">

            <ng-md-icon icon="explore"
                        ng-if="::task.originalType !=='GITHUB'"
                        aria-label="link"></ng-md-icon>
            <ng-md-icon icon="github-circle"
                        ng-if="::task.originalType ==='GITHUB'"
                        aria-label="link"></ng-md-icon>
          </a>

          <div class="task-title"
               tabindex="2"
               contenteditable="true"
               edit-on-click-on-edit-finished="$ctrl.focusTaskEl($taskEl, event); $ctrl.onChangeTitle(task, isChanged, newVal);"
               edit-on-click-ev-id="task.id"
               edit-on-click
               ng-model="task.title"></div>
        </div>

        <div class="time">
          <span ng-if="task.subTasks.length>0">∑</span>
          <span ng-bind="(task.timeSpent|duration) +' / ' + (task.timeEstimate|duration)"></span>
          <button class="ico-btn"
                  tabindex="2"
                  ng-if="!(task.subTasks.length>0)"
                  aria-label="time estimation"
                  ng-click="$ctrl.estimateTime(task)">

            <ng-md-icon icon="access_time"
                        aria-label="time estimation"></ng-md-icon>
          </button>
        </div>

        <div class="controls">
          <button class="ico-btn"
                  aria-label="add sub task"
                  ng-if="!$ctrl.isSubTasksDisabled&&!task.isDone"
                  tabindex="2"
                  ng-click="$ctrl.addSubTask(task, $event);">

            <ng-md-icon icon="playlist_add"
                        aria-label="add sub task"></ng-md-icon>
          </button>
          <button class="ico-btn show-notes-btn"
                  aria-label="notes"
                  tabindex="2"
                  ng-class="{'is-active':task.showNotes}"
                  ng-click="task.showNotes=!task.showNotes">

            <ng-md-icon icon="{{(task.notes||task.originalKey) ?'insert_comment': 'mode_comment'}}"
                        aria-label="notes"></ng-md-icon>
          </button>
          <button class="ico-btn delete-btn"
                  aria-label="delete"
                  tabindex="2"
                  ng-click="$ctrl.deleteTask(task, $index)">

            <ng-md-icon icon="delete_forever"
                        class="delete-icon"
                        aria-label="delete"></ng-md-icon>
          </button>
          <button ng-click="task.isDone= !task.isDone; $ctrl.onTaskDoneChanged(task)"
                  class="ico-btn mark-as-done-btn"
                  tabindex="2"
                  aria-label="un-/mark as done">
            <ng-md-icon icon="{{(task.isDone?'undo':'check')}}"></ng-md-icon>
          </button>
        </div>
      </div>

      <div ng-if="$ctrl.r.jiraSettings.isShowComponents && task.originalComponents.length"
           class="tags">
        <div class="tag" ng-repeat="componentName in task.originalComponents"
             ng-bind="componentName"></div>
      </div>


      <progress-bar progress="task.progress"
                    mdx-paint-bg="primary"></progress-bar>


      <div class="notes ani-expand-collapse"
           ng-if="task.showNotes===true">

        <section ng-if="task.isUpdated;">
          <div class="md-caption">
            Changes since last update
          </div>

          <ul class="changelog">
            <li ng-repeat="changelogEntry in task.originalChangelog">
              <div ng-if="::changelogEntry.author">
                <em>[<span ng-bind="::changelogEntry.author"></span>]
                  <span ng-bind="::changelogEntry.created| amDateFormat:'Y.MM.DD HH:mm'"></span></em>
              </div>
              <div ng-repeat="change in changelogEntry.items">
                <strong ng-bind="::change.field"></strong>
                <span ng-if="change.toString.length"><em>changed to:</em> <span
                  ng-bind="::change.toString"></span></span></span>
              </div>
            </li>
          </ul>
          <md-button class="md-raised"
                     ng-click="task.isUpdated=false;task.originalChangelog=undefined;task.showNotes=false">
            <ng-md-icon icon="delete"></ng-md-icon>
            Hide changes
          </md-button>
        </section>

        <section>
          <div class="md-caption"
               ng-bind="task.originalId ? 'Description': 'Notes'"></div>
          <div class="actual-notes-wrapper">
            <inline-markdown ng-model="task.notes"
                             on-edit-finished="$ctrl.onTaskNotesEditFinished(newVal, isChanged, task)"></inline-markdown>
          </div>
        </section>

        <section ng-if="task.status.length > 0 || task.originalStatus.length > 0"
                 class="status">
          <div class="md-caption">Status: <span ng-bind="task.originalStatus.name || task.originalStatus"></span>
            <ng-md-icon icon="arrow_forward"
                        ng-if="task.status.length > 0 "
                        aria-label="arrow forward"></ng-md-icon>
            <span ng-bind="task.status"></span>
          </div>
        </section>

        <section ng-if="task.originalAssigneeKey"
                 class="assignee">
          <div class="md-caption">Assignee: <span ng-bind="task.originalAssigneeKey"></span></div>
        </section>

        <section ng-if="task.originalAttachment.length > 0">
          <collapsible collapsible-title="Attachments ({{ ::task.originalAttachment.length }})">
            <ul class="attachments">
              <li ng-repeat="attachment in task.originalAttachment track by $index">
                <a href="{{ ::attachment}}"
                   external-link
                   target="_blank"
                   class="md-accent">{{ ::attachment}}</a>
                <a href="{{ ::attachment}}"
                   download="{{ ::attachment}}"
                   class="md-accent">
                  <ng-md-icon icon="file_download"
                              aria-label="download file directly"></ng-md-icon>
                </a>
                <span ng-if="::$ctrl.isImage(attachment)"
                      enlarge-image="attachment"
                      class="md-accent enlarge-image">
                  <ng-md-icon icon="image"
                              aria-label="preview image"></ng-md-icon>
                </span>
              </li>
            </ul>
          </collapsible>
        </section>

        <section ng-if="task.originalComments.length > 0">
          <collapsible collapsible-title="Comments ({{:: task.originalComments.length }})">
            <md-divider></md-divider>
            <ul class="comments">
              <li ng-repeat="comment in task.originalComments"
                  class="comment">
                <strong class="author">[<span ng-bind="::comment.author"></span>]: </strong>
                <span marked="comment.body"></span>
              </li>
            </ul>
          </collapsible>
        </section>

        <section>
          <collapsible collapsible-title="Local attachments and links"
                       counter="task.localAttachments.length"
                       btn-action="$ctrl.addLocalAttachment(task)"
                       btn-icon="add">
            <task-local-links local-links="task.localAttachments"></task-local-links>
          </collapsible>
        </section>
      </div>

      <sub-task-list ng-if="task.subTasks.length > 0"
                     allow-task-selection="{{$ctrl.allowTaskSelection}}"
                     current-task-id="$ctrl.currentTaskId"
                     task="task"></sub-task-list>
    </div>
  </div>
</div>
