a.add-button.e2e-add-userstory-button(
    href=""
    ng-click="showLightbox(selectedProject)"
)
    tg-svg(svg-icon="icon-add")

.lightbox.lightbox-create-related-user-stories
    tg-lightbox-close

    .lightbox-create-related-user-stories-wrapper
        h2.title(translate="EPIC.CREATE_RELATED_USERSTORIES")

        .related-with-selector
            .related-with-selector-single
                input(
                    type="radio"
                    name="related-with-selector"
                    id="new-user-story"
                    value="new-user-story"
                    ng-model="relatedWithSelector"
                    ng-init="relatedWithSelector='new-user-story'"
                )
                label.e2e-new-userstory-label(for="new-user-story")
                    span.name {{ 'EPIC.NEW_USERSTORY' | translate}}

            .related-with-selector-single
                input(
                    type="radio"
                    name="related-with-selector"
                    id="existing-user-story"
                    value="existing-user-story"
                    ng-model="relatedWithSelector"
                )
                label.e2e-existing-user-story-label(for="existing-user-story")
                    span.name {{ 'EPIC.EXISTING_USERSTORY' | translate}}

        fieldset.project-selector
            label(
                ng-if="relatedWithSelector=='new-user-story'"
                translate="EPIC.CHOOSE_PROJECT_FOR_CREATION"
                for="project-selector-dropdown"
            )
            label(
                ng-if="relatedWithSelector=='existing-user-story'"
                translate="EPIC.CHOOSE_PROJECT_FROM"
                for="project-selector-dropdown"
            )
            select(
                ng-model="selectedProject"
                ng-change="selectProject(selectedProject)"
                data-required="true"
                ng-options="p.id as p.name for p in vm.projects | toMutable"
                id="project-selector-dropdown"
            )

        fieldset(ng-show="relatedWithSelector=='new-user-story'")
            .new-user-story-title
                label(
                    ng-show="creationMode=='single-new-user-story'"
                    translate="EPIC.SUBJECT"
                )

                label(
                    ng-show="creationMode=='bulk-new-user-stories'"
                    translate="EPIC.SUBJECT_BULK_MODE"
                )
                .new-user-story-options
                    .new-user-story-option-single
                        input(
                            type="radio"
                            name="new-user-story-selector"
                            id="single-new-user-story"
                            value="single-new-user-story"
                            ng-model="creationMode"
                            ng-init="creationMode='single-new-user-story'"
                        )
                        label.e2e-single-creation-label(for="single-new-user-story")
                            tg-svg(svg-icon="icon-add")

                    .new-user-story-option-single
                        input(
                            type="radio"
                            name="new-user-story-selector"
                            id="bulk-new-user-stories"
                            value="bulk-new-user-stories"
                            ng-model="creationMode"
                        )
                        label.e2e-bulk-creation-label(for="bulk-new-user-stories")
                            tg-svg(svg-icon="icon-bulk")


            form.new-user-story-form
                .single-creation(ng-show="creationMode=='single-new-user-story'")
                    input.e2e-new-userstory-input-text(
                        type="text"
                        ng-model="relatedUserstoriesText"
                        data-required="true"
                    )

                .bulk-creation(ng-show="creationMode=='bulk-new-user-stories'")
                    textarea.e2e-new-userstories-input-textarea(
                        ng-model="relatedUserstoriesText"
                        data-required="true"
                    )

            button.button-green.create-user-story.e2e-create-userstory-button.ng-animate-disabled(
                href=""
                ng-click="vm.bulkCreateRelatedUserStories(selectedProject, relatedUserstoriesText, closeLightbox)"
                tg-loading="vm.loading"
                translate="COMMON.SAVE"
                ng-show="relatedWithSelector=='new-user-story'"
            )

        fieldset.existing-user-story(ng-show="relatedWithSelector=='existing-user-story'")
            label(
                translate="EPIC.CHOOSE_USERSTORY"
                for="userstory-filter"
            )
            input.userstory-filter.e2e-filter-userstories-input(
                id="userstory-filter"
                type="text"
                placeholder="{{'EPIC.FILTER_USERSTORIES' | translate}}"
                ng-model="searchUserstory"
                ng-change="onUpdateSearchUserstory()"
            )

            form.existing-user-story-form(ng-show="relatedWithSelector=='existing-user-story' && vm.projectUserstories.size")
                select.userstory.e2e-userstories-select(
                    size="5"
                    ng-model="selectedUserstory"
                    data-required="true"
                )
                    - var hash = "#";
                    option.hidden(
                        value=""
                    )
                    option(
                        ng-repeat="us in vm.projectUserstories | toMutable track by us.id"
                        value="{{ ::us.id }}"
                    ) #{hash}{{::us.ref}} {{::us.subject}}

            p.no-stories-found(
                ng-show="relatedWithSelector=='existing-user-story' && !vm.projectUserstories.size"
                translate="EPIC.NO_USERSTORIES_FOUND"
            )

            button.button-green.e2e-select-related-userstory-button(
                href=""
                ng-click="vm.saveRelatedUserStory(selectedUserstory, closeLightbox)"
                tg-loading="vm.loading"
                translate="COMMON.SAVE"
            )
