div.project-list-wrapper.centered
    div.project-list-title
        h1(translate="PROJECTS.MY_PROJECTS")
        div.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_ACTION_IMPORT' | translate}}")
                    span.icon.icon-upload
                input.import-file.hidden(type="file")

    section.project-list-section
        div.project-list
            ul(tg-sort-projects="vm.projects")
                li.project-list-single(tg-bind-scope, tg-repeat="project in vm.projects track by project.get('id')")
                    div.project-list-single-left
                        div.project-title
                            h1.project-name
                                a(href="#", tg-nav="project:project=project.get('slug')", title="{{ ::project.get('name') }}") {{project.get('name')}}
                            span.private(ng-if="project.get('is_private')", title="{{'PROJECT.PRIVATE' | translate}}")
                                include ../../../svg/lock.svg
                        p {{ ::project.get('description') | limitTo:300 }}
                            span(ng-if="::project.get('description').length > 300") ...

                        div.project-list-single-tags.tags-container(ng-if="::project.get('tags').size")
                            span.tag(style='border-left: 5px solid {{::tag.get("color")}};', tg-repeat="tag in ::project.get('colorized_tags')")
                                span.tag-name {{::tag.get('name')}}

                    span.drag.icon.icon-drag-v

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