.create-project.import-project(ng-if="!vm.from")
    div(ng-include="'projects/create/import/import-header.html'")

    ul.import-project-from
        li.import-project-from-site(
            tg-click-input-file
            tg-import-taiga
        )
        li.import-project-from-site(
            ng-click="vm.unfoldOptions('jira')"
            ng-if="vm.isActiveImporter('jira')"
        )
            .import-project-logo
                img(
                    src="/#{v}/images/import-logos/jira.png"
                    alt="Jira Logo"
                )
            .import-project-name-wrapper
                span.import-project-name Jira
                p.import-project-description
                    span(translate="PROJECT.IMPORT.JIRA.SELECTOR")
                    a(
                        target="_blank"
                        href="https://tree.taiga.io/support/importers/jira-importer/"
                        translate="PROJECT.IMPORT.JIRA.HOW_TO_CONFIGURE"
                    )
                fieldset.import-project-url(ng-if="vm.unfoldedOptions == 'jira'")
                    label(
                        for="jira-host"
                        translate="PROJECT.IMPORT.JIRA.URL"
                    )
                    input.import-project-input(
                        ng-keyup="$event.keyCode == 13 && vm.select('jira')"
                        id="jira-host"
                        ng-model="vm.jiraUrl"
                    )
                    button.button-green.import-project-button(
                        ng-click="vm.select('jira')"
                        title="{{'PROJECT.IMPORT.ACCEEDE' | translate}}"
                        translate="PROJECT.IMPORT.ACCEEDE"
                    )
        li.import-project-from-site(
            ng-click="vm.select('github')"
            ng-if="vm.isActiveImporter('github')"
        )
            .import-project-logo
                img(
                    src="/#{v}/images/import-logos/github.png"
                    alt="Github Logo"
                )
            .import-project-name-wrapper
                span.import-project-name Github
                p.import-project-description(translate="PROJECT.IMPORT.GITHUB.SELECTOR")
        li.import-project-from-site(
            ng-click="vm.select('trello')"
            ng-if="vm.isActiveImporter('trello')"
        )
            .import-project-logo
                img(
                    src="/#{v}/images/import-logos/trello.png"
                    alt="Trello Logo"
                )
            .import-project-name-wrapper
                span.import-project-name Trello
                p.import-project-description(translate="PROJECT.IMPORT.TRELLO.SELECTOR")
        li.import-project-from-site(
            ng-click="vm.select('asana')"
            ng-if="vm.isActiveImporter('asana')"
        )
            .import-project-logo
                img(
                    src="/#{v}/images/import-logos/asana.png"
                    alt="Asana Logo"
                )
            .import-project-name-wrapper
                span.import-project-name Asana
                p.import-project-description(translate="PROJECT.IMPORT.ASANA.SELECTOR")

    .create-project-action
        button.trans-button.create-project-action-cancel(
            type="button"
            ng-click="vm.backToCreate()"
            title="{{'PROJECT.CREATE.BACK' | translate}}"
            translate="PROJECT.CREATE.BACK"
        )

tg-trello-import(
    ng-if="vm.from == 'trello' && vm.token"
    on-cancel="vm.cancelCurrentImport()"
)
tg-jira-import(
    ng-if="vm.from == 'jira'"
    on-cancel="vm.cancelCurrentImport()"
)
tg-github-import(
    ng-if="vm.from == 'github' && vm.token"
    on-cancel="vm.cancelCurrentImport()"
)
tg-asana-import(
    ng-if="vm.from == 'asana' && vm.token"
    on-cancel="vm.cancelCurrentImport()"
)