.detail-title-wrapper.e2e-story-header(ng-class="{readonly: !vm.permissions.canEdit}")
    h2.detail-title-text.ng-animate-disabled(
        ng-show="!vm.editMode"
        ng-hide="vm.editMode"
    )
        span.detail-number {{'#' + vm.item.ref}}
        span.detail-subject.e2e-title-subject(
            ng-click="vm.editSubject(true)"
            ng-if="vm.permissions.canEdit"
            ng-bind-html="vm.item.subject | emojify"
        )
        span.detail-subject.e2e-title-subject(
            ng-if="!vm.permissions.canEdit"
            ng-bind-html="vm.item.subject | emojify"
        )
        a(
            href=""
            ng-if="vm.permissions.canEdit"
            ng-click="vm.editSubject(true)"
        )
            tg-svg.detail-edit.e2e-detail-edit(svg-icon="icon-edit")
        tg-due-date(
            due-date="vm.item.due_date"
            is-closed="vm.item.is_closed"
            ng-if="vm.item.due_date"
            obj-type="{{ vm.objType }}"
        )
    .edit-title-wrapper(ng-if="vm.editMode")
        input.edit-title-input.e2e-title-input(
            type="text"
            ng-model="vm.item.subject"
            maxlength="500"
            autofocus
            required
            ng-keydown="vm.onKeyDown($event)"
        )
        button.edit-title-button.save-title-button.e2e-title-button(
            ng-click="vm.saveSubject()"
            tg-loading="vm.loadingSubject"
        )
            tg-svg(
                svg-icon="icon-save"
            )
        button.edit-title-button.cancel-title-button.e2e-cancel-title-button(
            ng-click="vm.cancelEdit(false)"
        )
            tg-svg(svg-icon="icon-close")

//- User Story belongs to epic
.belong-to-epics-wrapper(ng-if="vm.item._name == 'userstories' && vm.project.is_epics_activated")
    .related-to-epics
        tg-belong-to-epics(
            epics="::vm.item.epics"
            item="::vm.item"
            format="text"
        )
    //- User Story relate to Epic
    a.relate-to-epic-button.ng-animate-disabled(
        ng-if="vm.permissions.canEdit"
        href=""
        title="{{'US.RELATE_TO_EPIC' | translate}}"
        ng-click="vm.relateToEpic(vm.item)"
    )
        tg-svg(
            svg-icon="icon-epics"
            svg-title-translate="US.RELATE_TO_EPIC"
        )
        span.relate-to-epic-text(translate="US.RELATE_TO_EPIC")
 
//- Task belongs to US
.task-belongs-to(
    ng-if="vm.item.user_story_extra_info"
    tg-check-permission="view_us"
)
    span(translate="TASK.OWNER_US")
    a(
        tg-nav="project-userstories-detail:project=vm.project.slug,ref=vm.item.user_story_extra_info.ref"
        title="{{'TASK.TITLE_LINK_GO_OWNER' | translate}}"
    )
        span.item-ref {{'#' + vm.item.user_story_extra_info.ref}}
        span(ng-bind-html="vm.item.user_story_extra_info.subject | emojify")
        tg-belong-to-epics(
            ng-if="::vm.item.user_story_extra_info.epics"
            epics="::vm.item.user_story_extra_info.epics"
            format="pill"
        )

//- User Stories generated from issue
.item-generated-us(ng-if="vm.item.generated_user_stories.length")
    span(translate="ISSUES.PROMOTED")
    a(
        ng-repeat="userstory in vm.item.generated_user_stories track by userstory.id"
        tg-check-permission="view_us"
        tg-nav="project-userstories-detail:project=vm.project.slug,ref=userstory.ref"
        ng-bind-html="'#'+userstory.ref+' '+userstory.subject | emojify"
    )

//- Issue origin from github
.issue-external-reference(ng-if="vm.item.external_reference")
    span(translate="ISSUES.EXTERNAL_REFERENCE")
    a(
        target="_blank"
        ng-href="{{::vm.item.external_reference[1]}}"
        ng-title="{{'ISSUES.GO_TO_EXTERNAL_REFERENCE' | translate}}"
    )
        span {{ ::vm.item.external_reference[1] }}

//- User Story promoted from issue
.item-origin-issue(ng-if="vm.item.origin_issue")
    span(translate="US.PROMOTED")
    a(
        href=""
        tg-check-permission="view_us"
        tg-nav="project-issues-detail:project=vm.project.slug,ref=vm.item.origin_issue.ref"
        title="{{'US.TITLE_LINK_GO_TO_ISSUE' | translate}}"
    )
        span.item-ref {{'#' + vm.item.origin_issue.ref}}
        span(ng-bind-html="vm.item.origin_issue.subject | emojify")

//- Blocked description
.block-desc-container(ng-show="vm.item.is_blocked")
    span.block-description-title(translate="COMMON.BLOCKED")
    span.block-description(ng-if="vm.item.blocked_note") {{vm.item.blocked_note}}

//- Navigation
.issue-nav
    a(
        ng-if="vm.previousUrl"
        ng-href="{{vm.previousUrl}}"
        title="{{'COMMON.PREVIOUS' | translate}}"
    )
        tg-svg(svg-icon="icon-arrow-left")
    a(
        ng-if="vm.nextUrl"
        ng-href="{{vm.nextUrl}}"
        title="{{'COMMON.NEXT' | translate}}"
    )
        tg-svg(svg-icon="icon-arrow-right")