doctype html

div.wrapper(
    ng-controller="EpicDetailController as ctrl",
    ng-init="section='epics'"
)
    tg-project-menu

    div.main.us-detail
        div.us-detail-header.header-with-actions
            include ../includes/components/mainTitle

        section.us-story-main-data
            header
                tg-vote-button.upvote-btn(
                    item="epic"
                    on-upvote="ctrl.onUpvote"
                    on-downvote="ctrl.onDownvote"
                )

                .detail-header-container
                    tg-color-selector(
                        color="epic.color",
                        on-select-color="ctrl.onSelectColor(color)"
                    )
                    tg-detail-header(
                        item="epic"
                        project="project"
                        required-perm="modify_epic"
                        ng-class="{blocked: epic.is_blocked}"
                        ng-if="project && epic"
                        format="text"
                    )
            .subheader
                tg-tag-line.tags-block(
                    ng-if="epic && project"
                    project="project"
                    item="epic"
                    permissions="modify_epic"
                )
                tg-created-by-display.ticket-created-by(ng-model="epic")

        section.duty-content(
            tg-editable-description
            tg-editable-wysiwyg
            ng-model="epic"
            required-perm="modify_epic"
        )

        // Custom Fields
        tg-custom-attributes-values(
            ng-model="epic"
            type="epic"
            project="project"
            required-edition-perm="modify_epic"
        )

        tg-related-userstories(
            project="immutableProject"
            userstories="userstories"
            epic="immutableEpic"
        )

        tg-attachments-full(
            obj-id="epic.id"
            type="epic",
            project-id="projectId"
            edit-permission = "modify_epic"
        )

        tg-history-section(
            ng-if="epic"
            type="epic"
            name="epic"
            id="epic.id"
            project-id="projectId"
        )

    sidebar.menu-secondary.sidebar.ticket-data

        .ticket-header
            span.ticket-title(
                tg-epic-status-display
                ng-model="epic"
            )
            span.detail-status(
                tg-epic-status-button
                ng-model="epic"
            )

        section.ticket-assigned-to(
            tg-assigned-to
            ng-model="epic"
            required-perm="modify_epic"
        )

        section.ticket-watch-buttons
            div.ticket-watch(
                tg-watch-button
                item="epic"
                data-environment="ticket"
                on-watch="ctrl.onWatch"
                on-unwatch="ctrl.onUnwatch"
            )
            div.ticket-watchers(
                tg-watchers
                ng-model="epic"
                required-perm="modify_epic"
            )

        section.ticket-detail-settings
            tg-us-team-requirement-button(ng-model="epic")
            tg-us-client-requirement-button(ng-model="epic")
            tg-block-button(
                tg-check-permission="modify_epic",
                ng-model="epic"
            )
            tg-delete-button(
                tg-check-permission="delete_epic",
                on-delete-title="{{'EPIC.ACTION_DELETE' | translate}}",
                on-delete-go-to-url="onDeleteGoToUrl",
                ng-model="epic"
            )

    div.lightbox.lightbox-block(tg-lb-block, ng-model="epic", title="EPIC.LIGHTBOX_TITLE_BLOKING_EPIC")
    div.lightbox.lightbox-select-user(tg-lb-assignedto)
    div.lightbox.lightbox-select-user(tg-lb-watchers)