.project-list-wrapper.centered
    .project-list-title
        h1(translate="PROJECTS.MY_PROJECTS")
        .create-options
            a.create-project-btn.button-green(
                href="#"
                ng-click="vm.newProject()"
                title="{{'PROJECT.NAVIGATION.ACTION_CREATE_PROJECT' | translate}}"
                translate="PROJECT.NAVIGATION.ACTION_CREATE_PROJECT"
            )
            span(tg-import-project-button)
                a.button-blackish.import-project-button(
                    href=""
                    title="{{'PROJECT.NAVIGATION.TITLE_IMPORT_PROJECT' | translate}}"
                )
                    tg-svg(svg-icon="icon-upload")
                input.import-file.hidden(type="file")

    section.project-list-section
        .project-list
            ul(tg-sort-projects="vm.projects")
                li.list-itemtype-project(
                    tg-bind-scope
                    tg-repeat="project in vm.projects track by project.get('id')"
                    ng-class="{'blocked-project': project.get('blocked_code')}"
                )
                    .list-itemtype-project-left

                        .list-itemtype-project-data-wrapper
                            a.list-itemtype-project-image(
                                href="#"
                                tg-nav="project:project=project.get('slug')"
                                title="{{ ::project.get('name') }}"
                            )
                                img(
                                    tg-project-logo-small-src="::project"
                                    alt="{{::project.get('name')}}"
                                )
                            .list-itemtype-project-data
                                h2
                                    a.project-title(
                                        href="#"
                                        tg-nav="project:project=project.get('slug')"
                                        title="{{ ::project.get('name') }}"
                                    ) {{project.get('name')}}
                                    tg-svg(
                                        ng-if="project.get('is_private')",
                                        svg-icon="icon-lock",
                                        svg-title-translate="PROJECT.PRIVATE"
                                    )
                                    tg-svg(
                                        ng-if="project.get('i_am_owner')",
                                        svg-icon="icon-badge",
                                        svg-title-translate="COMMON.OWNER"
                                    )
                                    tg-svg(
                                        ng-if="project.get('blocked_code')",
                                        svg-icon="icon-blocked-project",
                                        svg-title-translate="PROJECT.BLOCKED_PROJECT.BLOCKED"
                                    )

                                p.project-description {{ ::project.get('description') | limitTo:300 }}
                                    span(ng-if="::project.get('description').length > 300") ...

                    tg-svg.drag(svg-icon="icon-drag")

        aside.help-area
            p(translate="PROJECT.HELP")