.task-reorder
    <% if(perms.modify_task) { %>
    tg-svg.icon-drag(
        svg-icon="icon-drag"
    )
    <% } %>

.task-name
    a.clickable(
        tg-nav="project-tasks-detail:project=project.slug,ref=task.ref")
        span #<%- task.ref %>
        span(ng-non-bindable) <%= emojify(task.subject) %>
    tg-due-date(
        due-date="task.due_date"
        obj-type="task"
        ng-if="task.due_date"
    )
.task-settings
    <% if(perms.modify_task) { %>
    a.edit-task(
        href=""
        title="{{'COMMON.EDIT' | translate}}"
    )
        tg-svg(svg-icon="icon-edit")
    <% } %>
    <% if(perms.delete_task) { %>
    a.delete-task(
        title="{{'COMMON.DELETE' | translate}}"
        href=""
    )
        tg-svg(svg-icon="icon-trash")
    <% } %>

.status(
    tg-related-task-status="task"
    ng-model="task"
)
    a.task-status(
        href=""
        title="{{'TASK.TITLE_SELECT_STATUS' | translate}}"
        ng-style="{'color': task.status_extra_info.color}"
    )
        span.task-status-bind
        <% if(perms.modify_task) { %>
        tg-svg(svg-icon="icon-arrow-down", ng-style="{'fill': task.status_extra_info.color}")
        <% } %>

.assigned-to(
    tg-related-task-assigned-to-inline-edition="task"
)
    .task-assignedto(
        title="{{'COMMON.FIELDS.ASSIGNED_TO' | translate}}"
        class="<% if(perms.modify_task) { %>editable<% } %>"
    )
        figure.avatar
        <% if(perms.modify_task) { %>
        tg-svg(svg-icon="icon-arrow-down")
        <% } %>