Merge pull request #273 from taigaio/us/1684/coffee-templates-to-jade

Us/1684/coffee templates to jade

app/coffee/app.coffee

@@ -38,111 +38,111 @@ taiga.sessionId = taiga.generateUniqueSessionIdentifier()
 
 configure = ($routeProvider, $locationProvider, $httpProvider, $provide, $tgEventsProvider, tgLoaderProvider) ->
     $routeProvider.when("/",
-        {templateUrl: "/partials/projects.html", resolve: {loader: tgLoaderProvider.add()}})
+        {templateUrl: "project/projects.html", resolve: {loader: tgLoaderProvider.add()}})
     $routeProvider.when("/project/:pslug/",
-        {templateUrl: "/partials/project.html"})
+        {templateUrl: "project/project.html"})
     $routeProvider.when("/project/:pslug/backlog",
-        {templateUrl: "/partials/backlog.html", resolve: {loader: tgLoaderProvider.add()}})
+        {templateUrl: "backlog/backlog.html", resolve: {loader: tgLoaderProvider.add()}})
     $routeProvider.when("/project/:pslug/taskboard/:sslug",
-        {templateUrl: "/partials/taskboard.html", resolve: {loader: tgLoaderProvider.add()}})
+        {templateUrl: "taskboard/taskboard.html", resolve: {loader: tgLoaderProvider.add()}})
     $routeProvider.when("/project/:pslug/search",
-        {templateUrl: "/partials/search.html", reloadOnSearch: false})
+        {templateUrl: "search/search.html", reloadOnSearch: false})
     $routeProvider.when("/project/:pslug/kanban",
-        {templateUrl: "/partials/kanban.html", resolve: {loader: tgLoaderProvider.add()}})
+        {templateUrl: "kanban/kanban.html", resolve: {loader: tgLoaderProvider.add()}})
 
     # User stories
     $routeProvider.when("/project/:pslug/us/:usref",
-        {templateUrl: "/partials/us-detail.html", resolve: {loader: tgLoaderProvider.add()}})
+        {templateUrl: "us/us-detail.html", resolve: {loader: tgLoaderProvider.add()}})
 
     # Tasks
     $routeProvider.when("/project/:pslug/task/:taskref",
-        {templateUrl: "/partials/task-detail.html", resolve: {loader: tgLoaderProvider.add()}})
+        {templateUrl: "task/task-detail.html", resolve: {loader: tgLoaderProvider.add()}})
 
     # Wiki
     $routeProvider.when("/project/:pslug/wiki",
         {redirectTo: (params) -> "/project/#{params.pslug}/wiki/home"}, )
     $routeProvider.when("/project/:pslug/wiki/:slug",
-        {templateUrl: "/partials/wiki.html", resolve: {loader: tgLoaderProvider.add()}})
+        {templateUrl: "wiki/wiki.html", resolve: {loader: tgLoaderProvider.add()}})
 
     # Team
     $routeProvider.when("/project/:pslug/team",
-        {templateUrl: "/partials/views/team/team.html", resolve: {loader: tgLoaderProvider.add()}})
+        {templateUrl: "team/team.html", resolve: {loader: tgLoaderProvider.add()}})
 
     # Issues
     $routeProvider.when("/project/:pslug/issues",
-        {templateUrl: "/partials/issues.html", resolve: {loader: tgLoaderProvider.add()}})
+        {templateUrl: "issue/issues.html", resolve: {loader: tgLoaderProvider.add()}})
     $routeProvider.when("/project/:pslug/issue/:issueref",
-        {templateUrl: "/partials/issues-detail.html", resolve: {loader: tgLoaderProvider.add()}})
+        {templateUrl: "issue/issues-detail.html", resolve: {loader: tgLoaderProvider.add()}})
 
     # Admin
     $routeProvider.when("/project/:pslug/admin/project-profile/details",
-        {templateUrl: "/partials/admin-project-profile.html"})
+        {templateUrl: "admin/admin-project-profile.html"})
     $routeProvider.when("/project/:pslug/admin/project-profile/default-values",
-        {templateUrl: "/partials/admin-project-default-values.html"})
+        {templateUrl: "admin/admin-project-default-values.html"})
     $routeProvider.when("/project/:pslug/admin/project-profile/modules",
-        {templateUrl: "/partials/admin-project-modules.html"})
+        {templateUrl: "admin/admin-project-modules.html"})
     $routeProvider.when("/project/:pslug/admin/project-values/us-status",
-        {templateUrl: "/partials/admin-project-values-us-status.html"})
+        {templateUrl: "admin/admin-project-values-us-status.html"})
     $routeProvider.when("/project/:pslug/admin/project-values/us-points",
-        {templateUrl: "/partials/admin-project-values-us-points.html"})
+        {templateUrl: "admin/admin-project-values-us-points.html"})
     $routeProvider.when("/project/:pslug/admin/project-values/task-status",
-        {templateUrl: "/partials/admin-project-values-task-status.html"})
+        {templateUrl: "admin/admin-project-values-task-status.html"})
     $routeProvider.when("/project/:pslug/admin/project-values/issue-status",
-        {templateUrl: "/partials/admin-project-values-issue-status.html"})
+        {templateUrl: "admin/admin-project-values-issue-status.html"})
     $routeProvider.when("/project/:pslug/admin/project-values/issue-types",
-        {templateUrl: "/partials/admin-project-values-issue-types.html"})
+        {templateUrl: "admin/admin-project-values-issue-types.html"})
     $routeProvider.when("/project/:pslug/admin/project-values/issue-priorities",
-        {templateUrl: "/partials/admin-project-values-issue-priorities.html"})
+        {templateUrl: "admin/admin-project-values-issue-priorities.html"})
     $routeProvider.when("/project/:pslug/admin/project-values/issue-severities",
-        {templateUrl: "/partials/admin-project-values-issue-severities.html"})
+        {templateUrl: "admin/admin-project-values-issue-severities.html"})
     $routeProvider.when("/project/:pslug/admin/memberships",
-        {templateUrl: "/partials/admin-memberships.html"})
+        {templateUrl: "admin/admin-memberships.html"})
     $routeProvider.when("/project/:pslug/admin/roles",
-        {templateUrl: "/partials/admin-roles.html"})
+        {templateUrl: "admin/admin-roles.html"})
     $routeProvider.when("/project/:pslug/admin/third-parties/github",
-        {templateUrl: "/partials/admin-third-parties-github.html"})
+        {templateUrl: "admin/admin-third-parties-github.html"})
     $routeProvider.when("/project/:pslug/admin/third-parties/gitlab",
-        {templateUrl: "/partials/admin-third-parties-gitlab.html"})
+        {templateUrl: "admin/admin-third-parties-gitlab.html"})
     $routeProvider.when("/project/:pslug/admin/third-parties/bitbucket",
-        {templateUrl: "/partials/admin-third-parties-bitbucket.html"})
+        {templateUrl: "admin/admin-third-parties-bitbucket.html"})
     $routeProvider.when("/project/:pslug/admin/contrib/:plugin",
-        {templateUrl: "/partials/contrib/main.html"})
+        {templateUrl: "contrib/main.html"})
 
     # User settings
     $routeProvider.when("/project/:pslug/user-settings/user-profile",
-        {templateUrl: "/partials/user-profile.html"})
+        {templateUrl: "user/user-profile.html"})
     $routeProvider.when("/project/:pslug/user-settings/user-change-password",
-        {templateUrl: "/partials/user-change-password.html"})
+        {templateUrl: "user/user-change-password.html"})
     $routeProvider.when("/project/:pslug/user-settings/user-avatar",
-        {templateUrl: "/partials/user-avatar.html"})
+        {templateUrl: "user/user-avatar.html"})
     $routeProvider.when("/project/:pslug/user-settings/mail-notifications",
-        {templateUrl: "/partials/mail-notifications.html"})
+        {templateUrl: "user/mail-notifications.html"})
     $routeProvider.when("/change-email/:email_token",
-        {templateUrl: "/partials/change-email.html"})
+        {templateUrl: "user/change-email.html"})
     $routeProvider.when("/cancel-account/:cancel_token",
-        {templateUrl: "/partials/cancel-account.html"})
+        {templateUrl: "user/cancel-account.html"})
 
     # Auth
     $routeProvider.when("/login",
-        {templateUrl: "/partials/login.html"})
+        {templateUrl: "auth/login.html"})
     $routeProvider.when("/register",
-        {templateUrl: "/partials/register.html"})
+        {templateUrl: "auth/register.html"})
     $routeProvider.when("/forgot-password",
-        {templateUrl: "/partials/forgot-password.html"})
+        {templateUrl: "auth/forgot-password.html"})
     $routeProvider.when("/change-password",
-        {templateUrl: "/partials/change-password-from-recovery.html"})
+        {templateUrl: "auth/change-password-from-recovery.html"})
     $routeProvider.when("/change-password/:token",
-        {templateUrl: "/partials/change-password-from-recovery.html"})
+        {templateUrl: "auth/change-password-from-recovery.html"})
     $routeProvider.when("/invitation/:token",
-        {templateUrl: "/partials/invitation.html"})
+        {templateUrl: "auth/invitation.html"})
 
     # Errors/Exceptions
     $routeProvider.when("/error",
-        {templateUrl: "/partials/error.html"})
+        {templateUrl: "error/error.html"})
     $routeProvider.when("/not-found",
-        {templateUrl: "/partials/not-found.html"})
+        {templateUrl: "error/not-found.html"})
     $routeProvider.when("/permission-denied",
-        {templateUrl: "/partials/permission-denied.html"})
+        {templateUrl: "error/permission-denied.html"})
 
     $routeProvider.otherwise({redirectTo: '/not-found'})
     $locationProvider.html5Mode({enabled: true, requireBase: false})
@@ -257,6 +257,9 @@ modules = [
     "taigaPlugins",
     "taigaIntegrations",
 
+    # template cache
+    "templates"
+
     # Vendor modules
     "ngRoute",
     "ngAnimate",

app/coffee/modules/admin/memberships.coffee

@@ -105,40 +105,8 @@ module.controller("MembershipsController", MembershipsController)
 ## Member Avatar Directive
 #############################################################################
 
-paginatorTemplate = """
+MembershipsDirective = ($template) ->
-<ul class="paginator">
+    template = $template.get("admin/admin-membership-paginator.html", true)
-    <% if (showPrevious) { %>
-    <li class="previous">
-        <a href="" class="previous next_prev_button" class="disabled">
-            <span i18next="pagination.prev">Prev</span>
-        </a>
-    </li>
-    <% } %>
-
-    <% _.each(pages, function(item) { %>
-    <li class="<%- item.classes %>">
-        <% if (item.type === "page") { %>
-        <a href="" data-pagenum="<%- item.num %>"><%- item.num %></a>
-        <% } else if (item.type === "page-active") { %>
-        <span class="active"><%- item.num %></span>
-        <% } else { %>
-        <span>...</span>
-        <% } %>
-    </li>
-    <% }); %>
-
-    <% if (showNext) { %>
-    <li class="next">
-        <a href="" class="next next_prev_button" class="disabled">
-            <span i18next="pagination.next">Next</span>
-        </a>
-    </li>
-    <% } %>
-</ul>
-"""
-
-MembershipsDirective = ->
-    template = _.template(paginatorTemplate)
 
     linkPagination = ($scope, $el, $attrs, $ctrl) ->
         # Constants
@@ -215,6 +183,7 @@ MembershipsDirective = ->
                 $ctrl.selectFilter("page", pagenum)
                 $ctrl.loadMembers()
 
+
     link = ($scope, $el, $attrs) ->
         $ctrl = $el.controller()
         linkPagination($scope, $el, $attrs, $ctrl)
@@ -224,23 +193,15 @@ MembershipsDirective = ->
 
     return {link:link}
 
-module.directive("tgMemberships", MembershipsDirective)
+module.directive("tgMemberships", ["$tgTemplate", MembershipsDirective])
 
 
 #############################################################################
 ## Member Avatar Directive
 #############################################################################
 
-MembershipsRowAvatarDirective = ($log) ->
+MembershipsRowAvatarDirective = ($log, $template) ->
-    template = _.template("""
+    template = $template.get("admin/memberships-row-avatar.html", true)
-    <figure class="avatar">
-        <img src="<%- imgurl %>" alt="<%- full_name %>">
-        <figcaption>
-            <span class="name"><%- full_name %></span>
-            <span class="email"><%- email %></span>
-        </figcaption>
-    </figure>
-    """)
 
     link = ($scope, $el, $attrs) ->
         render = (member) ->
@@ -265,22 +226,15 @@ MembershipsRowAvatarDirective = ($log) ->
     return {link: link}
 
 
-module.directive("tgMembershipsRowAvatar", ["$log", MembershipsRowAvatarDirective])
+module.directive("tgMembershipsRowAvatar", ["$log", "$tgTemplate", MembershipsRowAvatarDirective])
 
 
 #############################################################################
 ## Member IsAdminCheckbox Directive
 #############################################################################
 
-MembershipsRowAdminCheckboxDirective = ($log, $repo, $confirm) ->
+MembershipsRowAdminCheckboxDirective = ($log, $repo, $confirm, $template) ->
-    template = _.template("""
+    template = $template.get("admin/admin-memberships-row-checkbox.html", true)
-    <div class="check">
-        <input type="checkbox" id="<%- inputId %>" />
-        <div></div>
-        <span class="check-text check-yes">Yes</span>
-        <span class="check-text check-no">No</span>
-    </div>
-    """) # TODO: i18n
 
     link = ($scope, $el, $attrs) ->
         render = (member) ->
@@ -317,7 +271,7 @@ MembershipsRowAdminCheckboxDirective = ($log, $repo, $confirm) ->
     return {link: link}
 
 
-module.directive("tgMembershipsRowAdminCheckbox", ["$log", "$tgRepo", "$tgConfirm",
+module.directive("tgMembershipsRowAdminCheckbox", ["$log", "$tgRepo", "$tgConfirm", "$tgTemplate",
                                                    MembershipsRowAdminCheckboxDirective])
 
 

app/coffee/modules/auth.coffee

@@ -153,12 +153,8 @@ module.service("$tgAuth", AuthService)
 # Directive that manages the visualization of public register
 # message/link on login page.
 
-PublicRegisterMessageDirective = ($config, $navUrls) ->
+PublicRegisterMessageDirective = ($config, $navUrls, templates) ->
-    template = _.template("""
+    template = templates.get("auth/login-text.html", true)
-    <p class="login-text">
-        <span>Not registered yet?</span>
-        <a href="<%- url %>" tg-nav="register" title="Register"> create your free account here</a>
-    </p>""")
 
     templateFn = ->
         publicRegisterEnabled = $config.get("publicRegisterEnabled")
@@ -172,7 +168,7 @@ PublicRegisterMessageDirective = ($config, $navUrls) ->
         template: templateFn
     }
 
-module.directive("tgPublicRegisterMessage", ["$tgConfig", "$tgNavUrls", PublicRegisterMessageDirective])
+module.directive("tgPublicRegisterMessage", ["$tgConfig", "$tgNavUrls", "$tgTemplate", PublicRegisterMessageDirective])
 
 
 LoginDirective = ($auth, $confirm, $location, $config, $routeParams, $navUrls, $events) ->

app/coffee/modules/backlog/filters.coffee

@@ -35,43 +35,9 @@ module = angular.module("taigaBacklog")
 ## Issues Filters Directive
 #############################################################################
 
-BacklogFiltersDirective = ($log, $location) ->
+BacklogFiltersDirective = ($log, $location, $templates) ->
-    template = _.template("""
+    template = $templates.get("backlog/filters.html", true)
-    <% _.each(filters, function(f) { %>
+    templateSelected = $templates.get("backlog/filter-selected.html", true)
-        <% if (f.selected) { %>
-        <a class="single-filter active"
-            data-type="<%- f.type %>"
-            data-id="<%- f.id %>">
-            <span class="name" <% if (f.color){ %>style="border-left: 3px solid <%- f.color %>;"<% } %>>
-                <%- f.name %>
-            </span>
-            <span class="number"><%- f.count %></span>
-        </a>
-        <% } else { %>
-        <a class="single-filter"
-            data-type="<%- f.type %>"
-            data-id="<%- f.id %>">
-            <span class="name" <% if (f.color){ %>style="border-left: 3px solid <%- f.color %>;"<% } %>>
-                <%- f.name %>
-            </span>
-            <span class="number"><%- f.count %></span>
-        </a>
-        <% } %>
-    <% }) %>
-    """)
-
-    templateSelected = _.template("""
-    <% _.each(filters, function(f) { %>
-    <a class="single-filter selected"
-       data-type="<%- f.type %>"
-       data-id="<%- f.id %>">
-        <span class="name" <% if (f.color){ %>style="border-left: 3px solid <%- f.color %>;"<% } %>>
-            <%- f.name %></span>
-        <span class="icon icon-delete"></span>
-    </a>
-    <% }) %>
-    """)
-
 
     link = ($scope, $el, $attrs) ->
         $ctrl = $el.closest(".wrapper").controller()
@@ -100,10 +66,18 @@ BacklogFiltersDirective = ($log, $location) ->
             renderSelectedFilters()
 
         renderSelectedFilters = ->
+            _.map selectedFilters, (f) =>
+                if f.color
+                    f.style = "border-left: 3px solid #{f.color}"
+
             html = templateSelected({filters: selectedFilters})
             $el.find(".filters-applied").html(html)
 
         renderFilters = (filters) ->
+            _.map filters, (f) =>
+                if f.color
+                    f.style = "border-left: 3px solid #{f.color}"
+
             html = template({filters:filters})
             $el.find(".filter-list").html(html)
 
@@ -178,4 +152,4 @@ BacklogFiltersDirective = ($log, $location) ->
 
     return {link:link}
 
-module.directive("tgBacklogFilters", ["$log", "$tgLocation", BacklogFiltersDirective])
+module.directive("tgBacklogFilters", ["$log", "$tgLocation", "$tgTemplate", BacklogFiltersDirective])

app/coffee/modules/backlog/main.coffee

@@ -686,19 +686,9 @@ module.directive("tgBacklog", ["$tgRepo", "$rootScope", BacklogDirective])
 ## User story points directive
 #############################################################################
 
-UsRolePointsSelectorDirective = ($rootscope) ->
+UsRolePointsSelectorDirective = ($rootscope, $template) ->
     #TODO: i18n
-    selectionTemplate = _.template("""
+    selectionTemplate = $template.get("backlog/us-role-points-popover.html", true)
-    <ul class="popover pop-role">
-        <li><a class="clear-selection" href="" title="All">All</a></li>
-        <% _.each(roles, function(role) { %>
-        <li>
-            <a href="" class="role" title="<%- role.name %>"
-               data-role-id="<%- role.id %>"><%- role.name %></a>
-        </li>
-        <% }); %>
-    </ul>
-    """)
 
     link = ($scope, $el, $attrs) ->
         # Watchers
@@ -747,39 +737,12 @@ UsRolePointsSelectorDirective = ($rootscope) ->
 
     return {link: link}
 
-module.directive("tgUsRolePointsSelector", ["$rootScope", UsRolePointsSelectorDirective])
+module.directive("tgUsRolePointsSelector", ["$rootScope", "$tgTemplate", UsRolePointsSelectorDirective])
 
 
-UsPointsDirective = ($repo) ->
+UsPointsDirective = ($repo, $tgTemplate) ->
-    rolesTemplate = _.template("""
+    rolesTemplate = $tgTemplate.get("backlog/us-points-roles-popover.html", true)
-    <ul class="popover pop-role">
+    pointsTemplate = $tgTemplate.get("backlog/us-points-popover.html", true)
-        <% _.each(roles, function(role) { %>
-        <li>
-            <a href="" class="role" title="<%- role.name %>"
-               data-role-id="<%- role.id %>">
-                <%- role.name %>
-                (<%- role.points %>)
-            </a>
-        </li>
-        <% }); %>
-    </ul>
-    """)
-
-    pointsTemplate = _.template("""
-    <ul class="popover pop-points-open">
-        <% _.each(points, function(point) { %>
-        <li>
-            <% if (point.selected) { %>
-            <a href="" class="point" title="<%- point.name %>"
-               data-point-id="<%- point.id %>"><%- point.name %></a>
-            <% } else { %>
-            <a href="" class="point active" title="<%- point.name %>"
-               data-point-id="<%- point.id %>"><%- point.name %></a>
-            <% } %>
-        </li>
-        <% }); %>
-    </ul>
-    """)
 
     link = ($scope, $el, $attrs) ->
         $ctrl = $el.controller()
@@ -940,7 +903,7 @@ UsPointsDirective = ($repo) ->
 
     return {link: link}
 
-module.directive("tgBacklogUsPoints", ["$tgRepo", UsPointsDirective])
+module.directive("tgBacklogUsPoints", ["$tgRepo", "$tgTemplate", UsPointsDirective])
 
 #############################################################################
 ## Burndown graph directive
@@ -1067,12 +1030,8 @@ module.directive("tgGmBacklogGraph", tgBacklogGraphDirective)
 ## Backlog progress bar directive
 #############################################################################
 
-TgBacklogProgressBarDirective = ->
+TgBacklogProgressBarDirective = ($template) ->
-    template = _.template("""
+    template = $template.get("backlog/progress-bar.html", true)
-        <div class="defined-points" title="Excess of points"></div>
-        <div class="project-points-progress" title="Pending Points" style="width: <%- projectPointsPercentaje %>%"></div>
-        <div class="closed-points-progress" title="Closed points" style="width: <%- closedPointsPercentaje %>%"></div>
-    """)
 
     render = (el, projectPointsPercentaje, closedPointsPercentaje) ->
         el.html(template({
@@ -1109,4 +1068,4 @@ TgBacklogProgressBarDirective = ->
 
     return {link: link}
 
-module.directive("tgBacklogProgressBar", TgBacklogProgressBarDirective)
+module.directive("tgBacklogProgressBar", ["$tgTemplate", TgBacklogProgressBarDirective])

app/coffee/modules/backlog/sprints.coffee

@@ -84,36 +84,8 @@ module.directive("tgBacklogSprint", ["$tgRepo", "$rootScope", BacklogSprintDirec
 ## Sprint Header Directive
 #############################################################################
 
-BacklogSprintHeaderDirective = ($navUrls) ->
+BacklogSprintHeaderDirective = ($navUrls, $template) ->
-    template = _.template("""
+    template = $template.get("backlog/sprint-header.html", true)
-    <div class="sprint-name">
-        <a class="icon icon-arrow-up" href="" title="Compact Sprint"></a>
-
-        <% if(isVisible){ %>
-        <a href="<%- taskboardUrl %>" title="'Go to the taskboard of '<%- name %>'">
-            <span><%- name %></span>
-        </a>
-        <% } %>
-
-        <% if(isEditable){ %>
-        <a class="icon icon-edit" href="" title="Edit Sprint"></a>
-        <% } %>
-    </div>
-
-    <div class="sprint-summary">
-        <div class="sprint-date"><%- estimatedDateRange %></div>
-        <ul>
-            <li>
-                <span class="number"><%- closedPoints %></span>
-                <span class="description">closed</span>
-            </li>
-            <li>
-                <span class="number"><%- totalPoints %></span>
-                <span class="description">total</span>
-            </li>
-        </ul>
-    </div>
-    """)
 
     link = ($scope, $el, $attrs, $model) ->
         isEditable = ->
@@ -157,7 +129,7 @@ BacklogSprintHeaderDirective = ($navUrls) ->
         require: "ngModel"
     }
 
-module.directive("tgBacklogSprintHeader", ["$tgNavUrls", "$tgRepo", "$rootScope", BacklogSprintHeaderDirective])
+module.directive("tgBacklogSprintHeader", ["$tgNavUrls", "$tgTemplate", BacklogSprintHeaderDirective])
 
 #############################################################################
 ## Toggle Closed Sprints Directive

app/coffee/modules/common.coffee

@@ -187,3 +187,20 @@ Qqueue = ($q) ->
     return qqueue
 
 module.factory("$tgQqueue", ["$q", Qqueue])
+
+#############################################################################
+## Templates
+#############################################################################
+
+Template = ($templateCache) ->
+    return {
+        get: (name, lodash = false) =>
+            tmp = $templateCache.get(name)
+
+            if lodash
+                tmp = _.template(tmp)
+
+            return tmp
+    }
+
+module.factory("$tgTemplate", ["$templateCache", Template])

app/coffee/modules/common/attachments.coffee

@@ -155,53 +155,8 @@ class AttachmentsController extends taiga.Controller
         return not item.is_deprecated
 
 
-AttachmentsDirective = ($config, $confirm) ->
+AttachmentsDirective = ($config, $confirm, $templates) ->
-    template = _.template("""
+    template = $templates.get("attachment/attachments.html", true)
-    <section class="attachments">
-        <div class="attachments-header">
-            <h3 class="attachments-title">
-                <span class="attachments-num" tg-bind-html="ctrl.attachmentsCount"></span>
-                <span class="attachments-text">attachments</span>
-            </h3>
-            <div tg-check-permission="modify_<%- type %>" class="add-attach"
-                 title="Add new attachment. <%- maxFileSizeMsg %>">
-                <% if (maxFileSize){ %>
-                <span class="size-info hidden">[Max. size:  <%- maxFileSize %>]</span>
-                <% }; %>
-                <label for="add-attach" class="icon icon-plus related-tasks-buttons"></label>
-                <input id="add-attach" type="file" multiple="multiple"/>
-            </div>
-        </div>
-
-        <div class="attachment-body sortable">
-            <div ng-repeat="attach in ctrl.attachments|filter:ctrl.filterAttachments track by attach.id"
-                tg-attachment="attach"
-                class="single-attachment">
-            </div>
-
-            <div ng-repeat="file in ctrl.uploadingAttachments" class="single-attachment">
-                <div class="attachment-name">
-                    <a href="" tg-bo-title="file.name" tg-bo-bind="file.name"></a>
-                </div>
-                <div class="attachment-size">
-                    <span tg-bo-bind="file.size" class="attachment-size"></span>
-                </div>
-                <div class="attachment-comments">
-                    <span ng-bind="file.progressMessage"></span>
-                    <div ng-style="{'width': file.progressPercent}" class="percentage"></div>
-                </div>
-            </div>
-
-            <a href="" title="show deprecated atachments" class="more-attachments"
-                ng-if="ctrl.deprecatedAttachmentsCount > 0">
-                <span class="text" data-type="show">+ show deprecated atachments</span>
-                <span class="text hidden" data-type="hide">- hide deprecated atachments</span>
-                <span class="more-attachments-num">
-                    ({{ctrl.deprecatedAttachmentsCount }} deprecated)
-                </span>
-            </a>
-        </div>
-    </section>""")
 
     link = ($scope, $el, $attrs, $ctrls) ->
         $ctrl = $ctrls[0]
@@ -283,56 +238,12 @@ AttachmentsDirective = ($config, $confirm) ->
         template: templateFn
     }
 
-module.directive("tgAttachments", ["$tgConfig", "$tgConfirm", AttachmentsDirective])
+module.directive("tgAttachments", ["$tgConfig", "$tgConfirm", "$tgTemplate", AttachmentsDirective])
 
 
-AttachmentDirective = ->
+AttachmentDirective = ($template) ->
-    template = _.template("""
+    template = $template.get("attachment/attachment.html", true)
-    <div class="attachment-name">
+    templateEdit = $template.get("attachment/attachment-edit.html", true)
-        <a href="<%- url %>" title="<%- name %> uploaded on <%- created_date %>" target="_blank">
-            <span class="icon icon-documents"></span>
-            <span><%- name %><span>
-        </a>
-    </div>
-    <div class="attachment-size">
-        <span><%- size %></span>
-    </div>
-    <div class="attachment-comments">
-        <% if (isDeprecated){ %> <span class="deprecated-file">(deprecated)</span> <% } %>
-        <span><%- description %></span>
-    </div>
-    <% if (modifyPermission) {%>
-    <div class="attachment-settings">
-        <a class="settings icon icon-edit" href="" title="Edit"></a>
-        <a class="settings icon icon-delete" href="" title="Delete"></a>
-        <a class="settings icon icon-drag-v" href="" title=""Drag"></a>
-    </div>
-    <% } %>
-    """)
-
-    templateEdit = _.template("""
-    <div class="attachment-name">
-        <span class="icon.icon-document"></span>
-        <a href="<%- url %>" title="<%- name %> uploaded on <%- created_date %>" target="_blank"><%- name %></a>
-    </div>
-    <div class="attachment-size">
-        <span><%- size %></span>
-    </div>
-    <div class="editable editable-attachment-comment">
-        <input type="text" name="description" maxlength="140"
-               value="<%- description %>""
-               placeholder="Type a short description" />
-    </div>
-    <div class="editable editable-attachment-deprecated">
-        <input type="checkbox" name="is-deprecated" id="attach-<%- id %>-is-deprecated"
-               <% if (isDeprecated){ %>checked<% } %> />
-        <label for="attach-<%- id %>-is-deprecated">Deprecated?</label>
-    </div>
-    <div class="attachment-settings">
-        <a class="editable-settings icon icon-floppy" href="" title="Save"></a>
-        <a class="editable-settings icon icon-delete" href="" title="Cancel"></a>
-    </div>
-    """)
 
     link = ($scope, $el, $attrs, $ctrl) ->
         render = (attachment, edit=false) ->
@@ -356,8 +267,10 @@ AttachmentDirective = ->
                 html = template(ctx)
 
             $el.html(html)
+
             if attachment.is_deprecated
                 $el.addClass("deprecated")
+                $el.find("input:checkbox").prop('checked', true)
 
         saveAttachment = ->
             attachment.description = $el.find("input[name='description']").val()
@@ -408,4 +321,4 @@ AttachmentDirective = ->
         restrict: "AE"
     }
 
-module.directive("tgAttachment", AttachmentDirective)
+module.directive("tgAttachment", ["$tgTemplate", AttachmentDirective])

app/coffee/modules/common/components.coffee

@@ -107,7 +107,7 @@ module.directive("tgSprintProgressbar", SprintProgressBarDirective)
 ## Created-by display directive
 #############################################################################
 
-CreatedByDisplayDirective = ->
+CreatedByDisplayDirective = ($template)->
     # Display the owner information (full name and photo) and the date of
     # creation of an object (like USs, tasks and issues).
     #
@@ -119,16 +119,7 @@ CreatedByDisplayDirective = ->
     #     'owner'(ng-model)
     #   - scope.usersById object is required.
 
-    template = _.template("""
+    template = $template.get("common/components/created-by.html", true) # TODO: i18n
-    <div class="user-avatar">
-        <img src="<%- owner.photo %>" alt="<%- owner.full_name_display %>" />
-    </div>
-
-    <div class="created-by">
-        <span class="created-title">Created by <%- owner.full_name_display %></span>
-        <span class="created-date"><%- date %></span>
-    </div>
-    """) # TODO: i18n
 
     link = ($scope, $el, $attrs) ->
         render = (model) ->
@@ -154,51 +145,19 @@ CreatedByDisplayDirective = ->
         require: "ngModel"
     }
 
-module.directive("tgCreatedByDisplay", CreatedByDisplayDirective)
+module.directive("tgCreatedByDisplay", ["$tgTemplate", CreatedByDisplayDirective])
 
 
 #############################################################################
 ## Watchers directive
 #############################################################################
 
-WatchersDirective = ($rootscope, $confirm, $repo, $qqueue) ->
+WatchersDirective = ($rootscope, $confirm, $repo, $qqueue, $template) ->
     # You have to include a div with the tg-lb-watchers directive in the page
     # where use this directive
     #
     # TODO: i18n
-    template = _.template("""
+    template = $template.get("common/components/watchers.html", true)
-    <% if(isEditable){ %>
-    <div class="watchers-header">
-        <span class="title">watchers</span>
-        <a href="" title="Add watcher" class="icon icon-plus add-watcher"></a>
-    </div>
-    <% } else if(watchers.length > 0){ %>
-    <div class="watchers-header">
-        <span class="title">watchers</span>
-    </div>
-    <% }; %>
-
-    <% _.each(watchers, function(watcher) { %>
-    <% if(watcher) { %>
-    <div class="watcher-single">
-        <div class="watcher-avatar">
-            <span class="avatar" href="" title="<%- watcher.full_name_display %>">
-                <img src="<%- watcher.photo %>" alt="<%- watcher.full_name_display %>">
-            </span>
-        </div>
-        <div class="watcher-name">
-            <span><%- watcher.full_name_display %></span>
-
-            <% if(isEditable){ %>
-            <a class="icon icon-delete"
-               data-watcher-id="<%- watcher.id %>" href="" title="delete-watcher">
-            </a>
-            <% }; %>
-        </div>
-    </div>
-    <% } %>
-    <% }); %>
-    """)
 
     link = ($scope, $el, $attrs, $model) ->
         isEditable = ->
@@ -288,43 +247,19 @@ WatchersDirective = ($rootscope, $confirm, $repo, $qqueue) ->
 
     return {link:link, require:"ngModel"}
 
-module.directive("tgWatchers", ["$rootScope", "$tgConfirm", "$tgRepo", "$tgQqueue", WatchersDirective])
+module.directive("tgWatchers", ["$rootScope", "$tgConfirm", "$tgRepo", "$tgQqueue", "$tgTemplate", WatchersDirective])
 
 
 #############################################################################
 ## Assigned to directive
 #############################################################################
 
-AssignedToDirective = ($rootscope, $confirm, $repo, $loading, $qqueue) ->
+AssignedToDirective = ($rootscope, $confirm, $repo, $loading, $qqueue, $template) ->
     # You have to include a div with the tg-lb-assignedto directive in the page
     # where use this directive
     #
     # TODO: i18n
-    template = _.template("""
+    template = $template.get("common/components/assigned-to.html", true)
-    <% if (assignedTo) { %>
-    <div class="user-avatar">
-        <img src="<%- assignedTo.photo %>" alt="<%- assignedTo.full_name_display %>" />
-    </div>
-    <% } %>
-
-    <div class="assigned-to">
-        <span class="assigned-title">Assigned to</span>
-
-        <a href="" title="edit assignment" class="user-assigned <% if(isEditable){ %>editable<% }; %>">
-            <span class="assigned-name">
-            <% if (assignedTo) { %>
-                <%- assignedTo.full_name_display %>
-            <% } else { %>
-                Not assigned
-            <% } %>
-            </span>
-            <% if(isEditable){ %><span class="icon icon-arrow-bottom"></span><% }; %>
-        </a>
-        <% if (assignedTo!==null && isEditable) { %>
-        <a href="" title="delete assignment" class="icon icon-delete"></a>
-        <% } %>
-    </div>
-    """) # TODO: i18n
 
     link = ($scope, $el, $attrs, $model) ->
         isEditable = ->
@@ -391,18 +326,15 @@ AssignedToDirective = ($rootscope, $confirm, $repo, $loading, $qqueue) ->
         require:"ngModel"
     }
 
-module.directive("tgAssignedTo", ["$rootScope", "$tgConfirm", "$tgRepo", "$tgLoading", "$tgQqueue", AssignedToDirective])
+module.directive("tgAssignedTo", ["$rootScope", "$tgConfirm", "$tgRepo", "$tgLoading", "$tgQqueue", "$tgTemplate", AssignedToDirective])
 
 
 #############################################################################
 ## Block Button directive
 #############################################################################
 
-BlockButtonDirective = ($rootscope, $loading) ->
+BlockButtonDirective = ($rootscope, $loading, $template) ->
-    template = """
+    template = $template.get("common/components/block-button.html")
-      <a href="#" class="button button-gray item-block">Block</a>
-      <a href="#" class="button button-red item-unblock">Unblock</a>
-    """
 
     link = ($scope, $el, $attrs, $model) ->
         isEditable = ->
@@ -443,17 +375,15 @@ BlockButtonDirective = ($rootscope, $loading) ->
         template: template
     }
 
-module.directive("tgBlockButton", ["$rootScope", "$tgLoading", BlockButtonDirective])
+module.directive("tgBlockButton", ["$rootScope", "$tgLoading", "$tgTemplate", BlockButtonDirective])
 
 
 #############################################################################
 ## Delete Button directive
 #############################################################################
 
-DeleteButtonDirective = ($log, $repo, $confirm, $location) ->
+DeleteButtonDirective = ($log, $repo, $confirm, $location, $template) ->
-    template = """
+    template = $template.get("common/components/delete-button.html")
-        <a href="" class="button button-red">Delete</a>
-    """ #TODO: i18n
 
     link = ($scope, $el, $attrs, $model) ->
         if not $attrs.onDeleteGoToUrl
@@ -485,26 +415,15 @@ DeleteButtonDirective = ($log, $repo, $confirm, $location) ->
         template: template
     }
 
-module.directive("tgDeleteButton", ["$log", "$tgRepo", "$tgConfirm", "$tgLocation", DeleteButtonDirective])
+module.directive("tgDeleteButton", ["$log", "$tgRepo", "$tgConfirm", "$tgLocation", "$tgTemplate", DeleteButtonDirective])
 
 
 #############################################################################
 ## Editable subject directive
 #############################################################################
 
-EditableSubjectDirective = ($rootscope, $repo, $confirm, $loading, $qqueue) ->
+EditableSubjectDirective = ($rootscope, $repo, $confirm, $loading, $qqueue, $template) ->
-    template = """
+    template = $template.get("common/components/editable-subject.html")
-        <div class="view-subject">
-            {{ item.subject }}
-            <a class="edit icon icon-edit" href="" title="Edit" />
-        </div>
-        <div class="edit-subject">
-            <input type="text" ng-model="item.subject" data-required="true" data-maxlength="500"/>
-            <span class="save-container">
-                <a class="save icon icon-floppy" href="" title="Save" />
-            </span>
-        </div>
-    """
 
     link = ($scope, $el, $attrs, $model) ->
 
@@ -571,46 +490,17 @@ EditableSubjectDirective = ($rootscope, $repo, $confirm, $loading, $qqueue) ->
         template: template
     }
 
-module.directive("tgEditableSubject", ["$rootScope", "$tgRepo", "$tgConfirm", "$tgLoading", "$tgQqueue",
+module.directive("tgEditableSubject", ["$rootScope", "$tgRepo", "$tgConfirm", "$tgLoading", "$tgQqueue", "$tgTemplate", EditableSubjectDirective])
-                                       EditableSubjectDirective])
 
 
 #############################################################################
 ## Editable subject directive
 #############################################################################
 
-EditableDescriptionDirective = ($rootscope, $repo, $confirm, $compile, $loading, $selectedText, $qqueue) ->
+EditableDescriptionDirective = ($rootscope, $repo, $confirm, $compile, $loading, $selectedText, $qqueue, $template) ->
-    template = """
+    template = $template.get("common/components/editable-description.html") # TODO: i18n
-        <div class="view-description">
+    noDescriptionMegEditMode = $template.get("common/components/editable-description-msg-edit-mode.html") # TODO: i18n
-            <section class="us-content wysiwyg"
+    noDescriptionMegReadMode = $template.get("common/components/editable-description-msg-read-mode.html") # TODO: i18n
-                     tg-bind-html="item.description_html || noDescriptionMsg"></section>
-            <span class="edit icon icon-edit" href="" title="Edit" />
-        </div>
-        <div class="edit-description">
-            <textarea placeholder="Empty space is so boring... go on be descriptive... A rose by any other name would smell as sweet..."
-                      ng-model="item.description"
-                      tg-markitup="tg-markitup"></textarea>
-            <a class="help-markdown" href="https://taiga.io/support/taiga-markdown-syntax/" target="_blank" title="Mardown syntax help">
-                <span class="icon icon-help"></span>
-                <span>Markdown syntax help</span>
-            </a>
-            <span class="save-container">
-                <a class="save icon icon-floppy" href="" title="Save" />
-            </span>
-        </div>
-    """ # TODO: i18n
-    noDescriptionMegEditMode = """
-    <p class="no-description editable">
-        Empty space is so boring...
-        go on be descriptive...
-        A rose by any other name would smell as sweet...
-    </p>
-    """ # TODO: i18n
-    noDescriptionMegReadMode = """
-    <p class="no-description">
-        No description yet.
-    </p>
-    """ # TODO: i18n
 
     link = ($scope, $el, $attrs, $model) ->
         $el.find('.edit-description').hide()
@@ -678,7 +568,7 @@ EditableDescriptionDirective = ($rootscope, $repo, $confirm, $compile, $loading,
     }
 
 module.directive("tgEditableDescription", ["$rootScope", "$tgRepo", "$tgConfirm",
-                                           "$compile", "$tgLoading", "$selectedText", "$tgQqueue", EditableDescriptionDirective])
+                                           "$compile", "$tgLoading", "$selectedText", "$tgQqueue", "$tgTemplate", EditableDescriptionDirective])
 
 
 #############################################################################
@@ -715,13 +605,8 @@ ListItemUsStatusDirective = ->
     return {link:link}
 
 
-ListItemAssignedtoDirective = ->
+ListItemAssignedtoDirective = ($template) ->
-    template = _.template("""
+    template = $template.get("common/components/list-item-assigned-to-avatar.html", true)
-    <figure class="avatar">
-        <img src="<%- imgurl %>" alt="<%- name %>"/>
-        <figcaption><%- name %></figcaption>
-    </figure>
-    """)
 
     link = ($scope, $el, $attrs) ->
         bindOnce $scope, "membersById", (membersById) ->
@@ -737,12 +622,9 @@ ListItemAssignedtoDirective = ->
 
     return {link:link}
 
+module.directive("tgListitemAssignedto", ["$tgTemplate", ListItemAssignedtoDirective])
 
 ListItemPriorityDirective = ->
-    template = """
-    <div class="level"></div>
-    """
-
     link = ($scope, $el, $attrs) ->
         render = (priorityById, issue) ->
             priority = priorityById[issue.priority]
@@ -759,15 +641,12 @@ ListItemPriorityDirective = ->
 
     return {
         link: link
-        template: template
+        templateUrl: "common/components/level.html"
     }
 
+module.directive("tgListitemPriority", ListItemPriorityDirective)
 
 ListItemSeverityDirective = ->
-    template = """
-    <div class="level"></div>
-    """
-
     link = ($scope, $el, $attrs) ->
         render = (severityById, issue) ->
             severity = severityById[issue.severity]
@@ -784,15 +663,11 @@ ListItemSeverityDirective = ->
 
     return {
         link: link
-        template: template
+        templateUrl: "common/components/level.html"
     }
 
 
 ListItemTypeDirective = ->
-    template = """
-    <div class="level"></div>
-    """
-
     link = ($scope, $el, $attrs) ->
         render = (issueTypeById, issue) ->
             type = issueTypeById[issue.type]
@@ -809,7 +684,7 @@ ListItemTypeDirective = ->
 
     return {
         link: link
-        template: template
+        templateUrl: "common/components/level.html"
     }
 
 
@@ -817,10 +692,8 @@ ListItemTypeDirective = ->
 ## Progress bar directive
 #############################################################################
 
-TgProgressBarDirective = ->
+TgProgressBarDirective = ($template) ->
-    template = _.template("""
+    template = $template.get("common/components/progress-bar.html", true)
-        <div class="current-progress" style="width: <%- percentage %>%"></div>
-    """)
 
     render = (el, percentage) ->
         el.html(template({percentage: percentage}))
@@ -838,16 +711,14 @@ TgProgressBarDirective = ->
 
     return {link: link}
 
+module.directive("tgProgressBar", ["$tgTemplate", TgProgressBarDirective])
 
 #############################################################################
 ## Main title directive
 #############################################################################
 
-TgMainTitleDirective = ->
+TgMainTitleDirective = ($template) ->
-    template = _.template("""
+    template = $template.get("common/components/main-title.html", true)
-        <span class="project-name"><%- projectName %></span>
-        <span class="green"><%- sectionName %></span>
-    """)
 
     render = (el, projectName, sectionName) ->
         el.html(template({
@@ -867,13 +738,10 @@ TgMainTitleDirective = ->
 
     return {link: link}
 
+module.directive("tgMainTitle", ["$tgTemplate", TgMainTitleDirective])
 
 module.directive("tgListitemType", ListItemTypeDirective)
 module.directive("tgListitemIssueStatus", ListItemIssueStatusDirective)
-module.directive("tgListitemAssignedto", ListItemAssignedtoDirective)
-module.directive("tgListitemPriority", ListItemPriorityDirective)
 module.directive("tgListitemSeverity", ListItemSeverityDirective)
 module.directive("tgListitemTaskStatus", ListItemTaskStatusDirective)
 module.directive("tgListitemUsStatus", ListItemUsStatusDirective)
-module.directive("tgProgressBar", TgProgressBarDirective)
-module.directive("tgMainTitle", TgMainTitleDirective)

app/coffee/modules/common/estimation.coffee

@@ -27,7 +27,7 @@ module = angular.module("taigaCommon")
 ## User story estimation directive (for Lightboxes)
 #############################################################################
 
-LbUsEstimationDirective = ($rootScope, $repo, $confirm) ->
+LbUsEstimationDirective = ($rootScope, $repo, $confirm, $template) ->
     # Display the points of a US and you can edit it.
     #
     # Example:
@@ -37,35 +37,8 @@ LbUsEstimationDirective = ($rootScope, $repo, $confirm) ->
     #   - Us object (ng-model)
     #   - scope.project object
 
-    mainTemplate = _.template("""
+    mainTemplate = $template.get("common/estimation/lb-us-estimation-points-per-role.html", true)
-    <ul class="points-per-role">
+    pointsTemplate = $template.get("common/estimation/lb-us-estimation-points.html", true)
-        <li class="total">
-            <span class="points"><%- totalPoints %></span>
-            <span class="role">total</span>
-        </li>
-        <% _.each(roles, function(role) { %>
-        <li class="total clickable" data-role-id="<%- role.id %>">
-            <span class="points"><%- role.points %></span>
-            <span class="role"><%- role.name %></span></li>
-        <% }); %>
-    </ul>
-    """)
-
-    pointsTemplate = _.template("""
-    <ul class="popover pop-points-open">
-        <% _.each(points, function(point) { %>
-        <li>
-            <% if (point.selected) { %>
-            <a href="" class="point" title="<%- point.name %>"
-               data-point-id="<%- point.id %>" data-role-id="<%- roleId %>"><%- point.name %></a>
-            <% } else { %>
-            <a href="" class="point active" title="<%- point.name %>"
-               data-point-id="<%- point.id %>" data-role-id="<%- roleId %>"><%- point.name %></a>
-            <% } %>
-        </li>
-        <% }); %>
-    </ul>
-    """)
 
     link = ($scope, $el, $attrs, $model) ->
         render = (points) ->
@@ -158,14 +131,14 @@ LbUsEstimationDirective = ($rootScope, $repo, $confirm) ->
         require: "ngModel"
     }
 
-module.directive("tgLbUsEstimation", ["$rootScope", "$tgRepo", "$tgConfirm", LbUsEstimationDirective])
+module.directive("tgLbUsEstimation", ["$rootScope", "$tgRepo", "$tgConfirm", "$tgTemplate", LbUsEstimationDirective])
 
 
 #############################################################################
 ## User story estimation directive
 #############################################################################
 
-UsEstimationDirective = ($rootScope, $repo, $confirm, $qqueue) ->
+UsEstimationDirective = ($rootScope, $repo, $confirm, $qqueue, $template) ->
     # Display the points of a US and you can edit it.
     #
     # Example:
@@ -175,35 +148,8 @@ UsEstimationDirective = ($rootScope, $repo, $confirm, $qqueue) ->
     #   - Us object (ng-model)
     #   - scope.project object
 
-    mainTemplate = _.template("""
+    mainTemplate = $template.get("common/estimation/us-estimation-points-per-role.html", true)
-    <ul class="points-per-role">
+    pointsTemplate = $template.get("common/estimation/us-estimation-points.html", true)
-        <li class="total">
-            <span class="points"><%- totalPoints %></span>
-            <span class="role">total</span>
-        </li>
-        <% _.each(roles, function(role) { %>
-        <li class="total <% if(editable){ %>clickable<% } %>" data-role-id="<%- role.id %>">
-            <span class="points"><%- role.points %></span>
-            <span class="role"><%- role.name %></span></li>
-        <% }); %>
-    </ul>
-    """)
-
-    pointsTemplate = _.template("""
-    <ul class="popover pop-points-open">
-        <% _.each(points, function(point) { %>
-        <li>
-            <% if (point.selected) { %>
-            <a href="" class="point" title="<%- point.name %>"
-               data-point-id="<%- point.id %>" data-role-id="<%- roleId %>"><%- point.name %></a>
-            <% } else { %>
-            <a href="" class="point active" title="<%- point.name %>"
-               data-point-id="<%- point.id %>" data-role-id="<%- roleId %>"><%- point.name %></a>
-            <% } %>
-        </li>
-        <% }); %>
-    </ul>
-    """)
 
     link = ($scope, $el, $attrs, $model) ->
         isEditable = ->
@@ -329,4 +275,4 @@ UsEstimationDirective = ($rootScope, $repo, $confirm, $qqueue) ->
         require: "ngModel"
     }
 
-module.directive("tgUsEstimation", ["$rootScope", "$tgRepo", "$tgConfirm", "$tgQqueue", UsEstimationDirective])
+module.directive("tgUsEstimation", ["$rootScope", "$tgRepo", "$tgConfirm", "$tgQqueue", "$tgTemplate", UsEstimationDirective])

app/coffee/modules/common/history.coffee

@@ -61,191 +61,15 @@ class HistoryController extends taiga.Controller
         return @rs.history.undeleteComment(type, objectId, activityId).then => @.loadHistory(type, objectId)
 
 
-HistoryDirective = ($log, $loading, $qqueue) ->
+HistoryDirective = ($log, $loading, $qqueue, $template) ->
-    templateChangeDiff = _.template("""
+    templateChangeDiff = $template.get("common/history/history-change-diff.html", true)
-    <div class="change-entry">
+    templateChangePoints = $template.get("common/history/history-change-points.html", true)
-        <div class="activity-changed">
+    templateChangeGeneric = $template.get("common/history/history-change-generic.html", true)
-            <span><%- name %></span>
+    templateChangeAttachment = $template.get("common/history/history-change-attachment.html", true)
-        </div>
+    templateDeletedComment = $template.get("common/history/history-deleted-comment.html", true)
-        <div class="activity-fromto">
+    templateActivity = $template.get("common/history/history-activity.html", true)
-            <p>
+    templateBaseEntries = $template.get("common/history/history-base-entries.html", true)
-                <span><%= diff %></span>
+    templateBase = $template.get("common/history/history-base.html", true)
-            </p>
-        </div>
-    </div>
-    """)
-
-    templateChangePoints = _.template("""
-    <% _.each(points, function(point, name) { %>
-    <div class="change-entry">
-        <div class="activity-changed">
-            <span>US points (<%- name.toLowerCase() %>)</span>
-        </div>
-        <div class="activity-fromto">
-            <p>
-                <strong> from </strong> <br />
-                <span><%- point[0] %></span>
-            </p>
-            <p>
-                <strong> to </strong> <br />
-                <span><%- point[1] %></span>
-            </p>
-        </div>
-    </div>
-    <% }); %>
-    """)
-
-    templateChangeGeneric = _.template("""
-    <div class="change-entry">
-        <div class="activity-changed">
-            <span><%- name %></span>
-        </div>
-        <div class="activity-fromto">
-            <p>
-                <strong> from </strong> <br />
-                <span><%- from %></span>
-            </p>
-            <p>
-                <strong> to </strong> <br />
-                <span><%- to %></span>
-            </p>
-        </div>
-    </div>
-    """)
-    templateChangeAttachment = _.template("""
-    <div class="change-entry">
-        <div class="activity-changed">
-            <span><%- name %></span>
-        </div>
-        <div class="activity-fromto">
-            <% _.each(diff, function(change) { %>
-                <p>
-                    <strong><%- change.name %> from </strong> <br />
-                    <span><%- change.from %></span>
-                </p>
-                <p>
-                    <strong><%- change.name %> to </strong> <br />
-                    <span><%- change.to %></span>
-                </p>
-            <% }) %>
-        </div>
-    </div>
-    """)
-
-    templateDeletedComment = _.template("""
-        <div class="activity-single comment deleted-comment">
-            <div>
-                <span>Comment deleted by <%- deleteCommentUser %> on <%- deleteCommentDate %></span>
-                <a href="" title="Show comment" class="show-deleted-comment">(Show deleted comment)</a>
-                <a href="" title="Show comment" class="hide-deleted-comment hidden">(Hide deleted comment)</a>
-                <div class="comment-body wysiwyg"><%= deleteComment %></div>
-            </div>
-            <% if (canRestoreComment) { %>
-                <a href="" class="comment-restore" data-activity-id="<%- activityId %>">
-                    <span class="icon icon-reload"></span>
-                    <span>Restore comment</span>
-                </a>
-            <% } %>
-        </div>
-    """)
-
-    templateActivity = _.template("""
-    <div class="activity-single <%- mode %>">
-        <div class="activity-user">
-            <a class="avatar" href="" title="<%- userFullName %>">
-                <img src="<%- avatar %>" alt="<%- userFullName %>">
-            </a>
-        </div>
-        <div class="activity-content">
-            <div class="activity-username">
-                <a class="username" href="" title="<%- userFullName %>">
-                    <%- userFullName %>
-                </a>
-                <span class="date">
-                    <%- creationDate %>
-                </span>
-            </div>
-
-            <% if (comment.length > 0) { %>
-                <% if ((deleteCommentDate || deleteCommentUser)) { %>
-                    <div class="deleted-comment">
-                        <span>Comment deleted by <%- deleteCommentUser %> on <%- deleteCommentDate %></span>
-                    </div>
-                <% } %>
-                <div class="comment wysiwyg">
-                    <%= comment %>
-                </div>
-                <% if (!deleteCommentDate && mode !== "activity" && canDeleteComment) { %>
-                    <a href="" class="icon icon-delete comment-delete" data-activity-id="<%- activityId %>"></a>
-                <% } %>
-            <% } %>
-
-            <% if(changes.length > 0) { %>
-            <div class="changes">
-                <% if (mode != "activity") { %>
-                <a class="changes-title" href="" title="Show activity">
-                  <span><%- changesText %></span>
-                  <span class="icon icon-arrow-up"></span>
-                </a>
-                <% } %>
-
-                <% _.each(changes, function(change) { %>
-                    <%= change %>
-                <% }) %>
-            </div>
-            <% } %>
-        </div>
-    </div>
-    """)
-
-    templateBaseEntries = _.template("""
-
-    <% if (showMore > 0) { %>
-    <a href="" title="Show more" class="show-more show-more-comments">
-    + Show previous entries (<%- showMore %> more)
-    </a>
-    <% } %>
-    <% _.each(entries, function(entry) { %>
-        <%= entry %>
-    <% }) %>
-    """)
-
-    templateBase = _.template("""
-    <section class="history">
-        <ul class="history-tabs">
-            <li>
-                <a href="#" class="active">
-                    <span class="icon icon-comment"></span>
-                    <span class="tab-title">Comments</span>
-                </a>
-            </li>
-            <li>
-                <a href="#">
-                    <span class="icon icon-issues"></span>
-                    <span class="tab-title">Activity</span>
-                </a>
-            </li>
-        </ul>
-        <section class="history-comments">
-            <div class="comments-list"></div>
-            <div tg-check-permission="modify_<%- type %>" tg-toggle-comment class="add-comment">
-                <textarea placeholder="Type a new comment here"
-                    ng-model="<%- ngmodel %>.comment" tg-markitup="tg-markitup">
-                </textarea>
-                <% if (mode !== "edit") { %>
-                <a class="help-markdown" href="https://taiga.io/support/taiga-markdown-syntax/" target="_blank" title="Mardown syntax help">
-                    <span class="icon icon-help"></span>
-                    <span>Markdown syntax help</span>
-                </a>
-                <a href="" title="Comment" class="button button-green save-comment">Comment</a>
-                <% } %>
-            </div>
-        </section>
-        <section class="history-activity hidden">
-            <div class="changes-list"></div>
-        </section>
-    </section>
-    """)
 
     link = ($scope, $el, $attrs, $ctrl) ->
         # Bootstraping
@@ -333,6 +157,7 @@ HistoryDirective = ($log, $loading, $qqueue) ->
                                 from: formatChange(values[0])
                                 to: formatChange(values[1])
                                 }
+
                         return templateChangeAttachment({name: name, diff: diff})
 
             return _.flatten(attachments).join("\n")
@@ -532,4 +357,4 @@ HistoryDirective = ($log, $loading, $qqueue) ->
     }
 
 
-module.directive("tgHistory", ["$log", "$tgLoading", "$tgQqueue", HistoryDirective])
+module.directive("tgHistory", ["$log", "$tgLoading", "$tgQqueue", "$tgTemplate", HistoryDirective])

app/coffee/modules/common/lightboxes.coffee

@@ -201,7 +201,7 @@ BlockLightboxDirective = ($rootscope, $tgrepo, $confirm, lightboxService, $loadi
             block(item)
 
     return {
-        templateUrl: "/partials/views/modules/lightbox-block.html"
+        templateUrl: "common/lightbox/lightbox-block.html"
         link: link
         require: "ngModel"
     }
@@ -213,15 +213,8 @@ module.directive("tgLbBlock", ["$rootScope", "$tgRepo", "$tgConfirm", "lightboxS
 ## Generic Lightbox Blocking-Message Input Directive
 #############################################################################
 
-BlockingMessageInputDirective = ($log) ->
+BlockingMessageInputDirective = ($log, $template) ->
-    template = _.template("""
+    template = $template.get("common/lightbox/lightbox-blocking-message-input.html", true)
-    <fieldset class="blocked-note hidden">
-        <textarea name="blocked_note"
-            placeholder="Why is this user story blocked?"
-            ng-model="<%- ngmodel %>">
-        </textarea>
-    </fieldset>
-    """)
 
     link = ($scope, $el, $attrs, $model) ->
         if not $attrs.watch
@@ -243,7 +236,7 @@ BlockingMessageInputDirective = ($log) ->
         restrict: "EA"
     }
 
-module.directive("tgBlockingMessageInput", ["$log", BlockingMessageInputDirective])
+module.directive("tgBlockingMessageInput", ["$log", "$tgTemplate", BlockingMessageInputDirective])
 
 
 #############################################################################
@@ -426,45 +419,11 @@ module.directive("tgLbCreateBulkUserstories", [
 ## AssignedTo Lightbox Directive
 #############################################################################
 
-usersTemplate = _.template("""
+AssignedToLightboxDirective = (lightboxService, lightboxKeyboardNavigationService, $template) ->
-<% if (selected) { %>
-<div class="watcher-single active">
-    <div class="watcher-avatar">
-        <a href="" title="Assigned to" class="avatar">
-            <img src="<%- selected.photo %>"/>
-        </a>
-    </div>
-    <a href="" title="<%- selected.full_name_display %>" class="watcher-name">
-        <%-selected.full_name_display %>
-    </a>
-    <a href="" title="Remove assigned" class="icon icon-delete remove-assigned-to"></a>
-</div>
-<% } %>
-
-<% _.each(users, function(user) { %>
-<div class="watcher-single" data-user-id="<%- user.id %>">
-    <div class="watcher-avatar">
-        <a href="#" title="Assigned to" class="avatar">
-            <img src="<%- user.photo %>" />
-        </a>
-    </div>
-    <a href="" title="<%- user.full_name_display %>" class="watcher-name">
-        <%- user.full_name_display %>
-    </a>
-</div>
-<% }) %>
-
-<% if (showMore) { %>
-<div ng-show="filteringUsers" class="more-watchers">
-    <span>...too many users, keep filtering</span>
-</div>
-<% } %>
-""")
-
-AssignedToLightboxDirective = (lightboxService, lightboxKeyboardNavigationService) ->
     link = ($scope, $el, $attrs) ->
         selectedUser = null
         selectedItem = null
+        usersTemplate = $template.get("common/lightbox/lightbox-assigned-to-users.html", true)
 
         normalizeString = (string) ->
             normalizedString = string
@@ -547,12 +506,12 @@ AssignedToLightboxDirective = (lightboxService, lightboxKeyboardNavigationServic
             $el.off()
 
     return {
-        templateUrl: "/partials/views/modules/lightbox-assigned-to.html"
+        templateUrl: "common/lightbox/lightbox-assigned-to.html"
         link:link
     }
 
 
-module.directive("tgLbAssignedto", ["lightboxService", "lightboxKeyboardNavigationService", AssignedToLightboxDirective])
+module.directive("tgLbAssignedto", ["lightboxService", "lightboxKeyboardNavigationService", "$tgTemplate", AssignedToLightboxDirective])
 
 
 #############################################################################
@@ -632,7 +591,7 @@ WatchersLightboxDirective = ($repo, lightboxService, lightboxKeyboardNavigationS
             $el.off()
 
     return {
-        templateUrl: "/partials/views/modules/lightbox-users.html"
+        templateUrl: "common/lightbox/lightbox-users.html"
         link:link
     }
 

app/coffee/modules/common/popovers.coffee

@@ -29,7 +29,7 @@ module = angular.module("taigaCommon")
 ## UserStory status Directive (popover for change status)
 #############################################################################
 
-UsStatusDirective = ($repo, popoverService) ->
+UsStatusDirective = ($repo, $template) ->
     ###
     Print the status of a US and a popover to change it.
     - tg-us-status: The user story
@@ -42,16 +42,7 @@ UsStatusDirective = ($repo, popoverService) ->
 
     NOTE: This directive need 'usStatusById' and 'project'.
     ###
-    template = _.template("""
+    template = $template.get("common/popover/popover-us-status.html", true)
-    <ul class="popover pop-status">
-        <% _.each(statuses, function(status) { %>
-        <li>
-            <a href="" class="status" title="<%- status.name %>" data-status-id="<%- status.id %>">
-                <%- status.name %>
-            </a>
-        </li>
-        <% }); %>
-    </ul>""")
 
     link = ($scope, $el, $attrs) ->
         $ctrl = $el.controller()
@@ -106,13 +97,13 @@ UsStatusDirective = ($repo, popoverService) ->
 
     return {link: link}
 
-module.directive("tgUsStatus", ["$tgRepo", UsStatusDirective])
+module.directive("tgUsStatus", ["$tgRepo", "$tgTemplate", UsStatusDirective])
 
 #############################################################################
 ## Related Task Status Directive
 #############################################################################
 
-RelatedTaskStatusDirective = ($repo, popoverService) ->
+RelatedTaskStatusDirective = ($repo, $template) ->
     ###
     Print the status of a related task and a popover to change it.
     - tg-related-task-status: The related task
@@ -125,16 +116,7 @@ RelatedTaskStatusDirective = ($repo, popoverService) ->
 
     NOTE: This directive need 'taskStatusById' and 'project'.
     ###
-    selectionTemplate = _.template("""
+    selectionTemplate = $template.get("common/popover/popover-related-task-status.html", true)
-    <ul class="popover pop-status">
-        <% _.forEach(statuses, function(status) { %>
-        <li>
-            <a href="" class="status" title="<%- status.name %>" data-status-id="<%- status.id %>">
-                <%- status.name %>
-            </a>
-        </li>
-        <% }); %>
-    </ul>""")
 
     updateTaskStatus = ($el, task, taskStatusById) ->
         taskStatusDomParent = $el.find(".us-status")
@@ -187,7 +169,7 @@ RelatedTaskStatusDirective = ($repo, popoverService) ->
 
     return {link: link}
 
-module.directive("tgRelatedTaskStatus", ["$tgRepo", RelatedTaskStatusDirective])
+module.directive("tgRelatedTaskStatus", ["$tgRepo", "$tgTemplate", RelatedTaskStatusDirective])
 
 #############################################################################
 ## jQuery plugin for Popover

app/coffee/modules/common/tags.coffee

@@ -99,25 +99,11 @@ module.directive("tgColorizeTags", ColorizeTagsDirective)
 ## TagLine  Directive (for Lightboxes)
 #############################################################################
 
-LbTagLineDirective = ($rs) ->
+LbTagLineDirective = ($rs, $template) ->
     ENTER_KEY = 13
     COMMA_KEY = 188
 
-    template = """
+    templateTags = $template.get("common/tag/lb-tag-line-tags.html", true)
-    <div class="tags-container"></div>
-    <input type="text" placeholder="I'm it! Tag me..." class="tag-input" />
-    <a href="" title="Save" class="save icon icon-floppy hidden"></a>
-    """ # TODO: i18n
-
-    # Tags template (rendered manually using lodash)
-    templateTags = _.template("""
-    <% _.each(tags, function(tag) { %>
-        <span class="tag"  <% if (tag.color) { %> style="border-left: 5px solid <%- tag.color %>;"<% } %>>
-            <span class="tag-name"><%- tag.name %></span>
-            <a href="" title="delete tag" class="icon icon-delete"></a>
-        </span>
-    <% }); %>
-    """) # TODO: i18n
 
     link = ($scope, $el, $attrs, $model) ->
         ## Render
@@ -125,6 +111,11 @@ LbTagLineDirective = ($rs) ->
             ctx = {
                 tags: _.map(tags, (t) -> {name: t, color: tagsColors[t]})
             }
+
+            _.map ctx.tags, (tag) =>
+                if tag.color
+                    tag.style = "border-left: 5px solid #{tag.color}"
+
             html = templateTags(ctx)
             $el.find("div.tags-container").html(html)
 
@@ -226,42 +217,22 @@ LbTagLineDirective = ($rs) ->
     return {
         link:link,
         require:"ngModel"
-        template: template
+        templateUrl: "common/tag/lb-tag-line.html"
     }
 
-module.directive("tgLbTagLine", ["$tgResources", LbTagLineDirective])
+module.directive("tgLbTagLine", ["$tgResources", "$tgTemplate", LbTagLineDirective])
 
 
 #############################################################################
 ## TagLine  Directive (for detail pages)
 #############################################################################
 
-TagLineDirective = ($rootScope, $repo, $rs, $confirm, $qqueue) ->
+TagLineDirective = ($rootScope, $repo, $rs, $confirm, $qqueue, $template) ->
     ENTER_KEY = 13
     ESC_KEY = 27
     COMMA_KEY = 188
 
-    template = """
+    templateTags = $template.get("common/tag/tags-line-tags.html", true)
-    <div class="tags-container"></div>
-    <a href="#" class="add-tag hidden" title="Add tag">
-        <span class="icon icon-plus"></span>
-        <span class="add-tag-text">Add tag</span>
-    </a>
-    <input type="text" placeholder="I'm it! Tag me..." class="tag-input hidden" />
-    <a href="" title="Save" class="save icon icon-floppy hidden"></a>
-    """ # TODO: i18n
-
-    # Tags template (rendered manually using lodash)
-    templateTags = _.template("""
-    <% _.each(tags, function(tag) { %>
-        <span class="tag" style="border-left: 5px solid <%- tag.color %>;">
-            <span class="tag-name"><%- tag.name %></span>
-            <% if (isEditable) { %>
-            <a href="" title="delete tag" class="icon icon-delete"></a>
-            <% } %>
-        </span>
-    <% }); %>
-    """) # TODO: i18n
 
     link = ($scope, $el, $attrs, $model) ->
         isEditable = ->
@@ -430,7 +401,7 @@ TagLineDirective = ($rootScope, $repo, $rs, $confirm, $qqueue) ->
     return {
         link:link,
         require:"ngModel"
-        template: template
+        templateUrl: "common/tag/tag-line.html"
     }
 
-module.directive("tgTagLine", ["$rootScope", "$tgRepo", "$tgResources", "$tgConfirm", "$tgQqueue", TagLineDirective])
+module.directive("tgTagLine", ["$rootScope", "$tgRepo", "$tgResources", "$tgConfirm", "$tgQqueue", "$tgTemplate", TagLineDirective])

app/coffee/modules/common/wisiwyg.coffee

@@ -28,17 +28,8 @@ module = angular.module("taigaCommon")
 #############################################################################
 ## WYSIWYG markitup editor directive
 #############################################################################
-tgMarkitupDirective = ($rootscope, $rs, $tr, $selectedText) ->
+tgMarkitupDirective = ($rootscope, $rs, $tr, $selectedText, $template) ->
-    previewTemplate = _.template("""
+    previewTemplate = $template.get("common/wysiwyg/wysiwyg-markitup-preview.html", true)
-    <div class="preview">
-        <div class="actions">
-            <a href="#" title="Edit" class="icon icon-edit edit"></a>
-        </div>
-        <div class="content wysiwyg">
-            <%= data %>
-        </div>
-    </div>
-    """)
 
     link = ($scope, $el, $attrs, $model) ->
         element = angular.element($el)
@@ -283,4 +274,4 @@ tgMarkitupDirective = ($rootscope, $rs, $tr, $selectedText) ->
 
     return {link:link, require:"ngModel"}
 
-module.directive("tgMarkitup", ["$rootScope", "$tgResources", "$tgI18n", "$selectedText", tgMarkitupDirective])
+module.directive("tgMarkitup", ["$rootScope", "$tgResources", "$tgI18n", "$selectedText", "$tgTemplate", tgMarkitupDirective])

app/coffee/modules/issues/detail.coffee

@@ -142,7 +142,7 @@ module.controller("IssueDetailController", IssueDetailController)
 ## Issue status display directive
 #############################################################################
 
-IssueStatusDisplayDirective = ->
+IssueStatusDisplayDirective = ($template)->
     # Display if a Issue is open or closed and its issueboard status.
     #
     # Example:
@@ -152,18 +152,7 @@ IssueStatusDisplayDirective = ->
     #   - Issue object (ng-model)
     #   - scope.statusById object
 
-    template = _.template("""
+    template = $template.get("common/components/status-display.html", true)
-    <span>
-        <% if (status.is_closed) { %>
-            Closed
-        <% } else { %>
-            Open
-        <% } %>
-    </span>
-    <span class="us-detail-status" style="color:<%- status.color %>">
-        <%- status.name %>
-    </span>
-    """) # TODO: i18n
 
     link = ($scope, $el, $attrs) ->
         render = (issue) ->
@@ -184,14 +173,14 @@ IssueStatusDisplayDirective = ->
         require: "ngModel"
     }
 
-module.directive("tgIssueStatusDisplay", IssueStatusDisplayDirective)
+module.directive("tgIssueStatusDisplay", ["$tgTemplate", IssueStatusDisplayDirective])
 
 
 #############################################################################
 ## Issue status button directive
 #############################################################################
 
-IssueStatusButtonDirective = ($rootScope, $repo, $confirm, $loading, $qqueue) ->
+IssueStatusButtonDirective = ($rootScope, $repo, $confirm, $loading, $qqueue, $template) ->
     # Display the status of Issue and you can edit it.
     #
     # Example:
@@ -202,21 +191,7 @@ IssueStatusButtonDirective = ($rootScope, $repo, $confirm, $loading, $qqueue) ->
     #   - scope.statusById object
     #   - $scope.project.my_permissions
 
-    template = _.template("""
+    template = $template.get("issue/issues-status-button.html", true)
-    <div class="status-data <% if(editable){ %>clickable<% }%>">
-        <span class="level" style="background-color:<%- status.color %>"></span>
-        <span class="status-status"><%- status.name %></span>
-        <% if(editable){ %><span class="icon icon-arrow-bottom"></span><% }%>
-        <span class="level-name">status</span>
-
-        <ul class="popover pop-status">
-            <% _.each(statuses, function(st) { %>
-            <li><a href="" class="status" title="<%- st.name %>"
-                   data-status-id="<%- st.id %>"><%- st.name %></a></li>
-            <% }); %>
-        </ul>
-    </div>
-    """) #TODO: i18n
 
     link = ($scope, $el, $attrs, $model) ->
         isEditable = ->
@@ -281,13 +256,13 @@ IssueStatusButtonDirective = ($rootScope, $repo, $confirm, $loading, $qqueue) ->
         require: "ngModel"
     }
 
-module.directive("tgIssueStatusButton", ["$rootScope", "$tgRepo", "$tgConfirm", "$tgLoading", "$tgQqueue", IssueStatusButtonDirective])
+module.directive("tgIssueStatusButton", ["$rootScope", "$tgRepo", "$tgConfirm", "$tgLoading", "$tgQqueue", "$tgTemplate", IssueStatusButtonDirective])
 
 #############################################################################
 ## Issue type button directive
 #############################################################################
 
-IssueTypeButtonDirective = ($rootScope, $repo, $confirm, $loading, $qqueue) ->
+IssueTypeButtonDirective = ($rootScope, $repo, $confirm, $loading, $qqueue, $template) ->
     # Display the type of Issue and you can edit it.
     #
     # Example:
@@ -298,21 +273,7 @@ IssueTypeButtonDirective = ($rootScope, $repo, $confirm, $loading, $qqueue) ->
     #   - scope.typeById object
     #   - $scope.project.my_permissions
 
-    template = _.template("""
+    template = $template.get("issue/issue-type-button.html", true)
-    <div class="type-data <% if(editable){ %>clickable<% }%>">
-        <span class="level" style="background-color:<%- type.color %>"></span>
-        <span class="type-type"><%- type.name %></span>
-        <% if(editable){ %><span class="icon icon-arrow-bottom"></span><% }%>
-        <span class="level-name">type</span>
-
-        <ul class="popover pop-type">
-            <% _.each(typees, function(tp) { %>
-            <li><a href="" class="type" title="<%- tp.name %>"
-                   data-type-id="<%- tp.id %>"><%- tp.name %></a></li>
-            <% }); %>
-        </ul>
-    </div>
-    """) #TODO: i18n
 
     link = ($scope, $el, $attrs, $model) ->
         isEditable = ->
@@ -376,14 +337,14 @@ IssueTypeButtonDirective = ($rootScope, $repo, $confirm, $loading, $qqueue) ->
         require: "ngModel"
     }
 
-module.directive("tgIssueTypeButton", ["$rootScope", "$tgRepo", "$tgConfirm", "$tgLoading", "$tgQqueue", IssueTypeButtonDirective])
+module.directive("tgIssueTypeButton", ["$rootScope", "$tgRepo", "$tgConfirm", "$tgLoading", "$tgQqueue", "$tgTemplate", IssueTypeButtonDirective])
 
 
 #############################################################################
 ## Issue severity button directive
 #############################################################################
 
-IssueSeverityButtonDirective = ($rootScope, $repo, $confirm, $loading, $qqueue) ->
+IssueSeverityButtonDirective = ($rootScope, $repo, $confirm, $loading, $qqueue, $template) ->
     # Display the severity of Issue and you can edit it.
     #
     # Example:
@@ -394,21 +355,7 @@ IssueSeverityButtonDirective = ($rootScope, $repo, $confirm, $loading, $qqueue)
     #   - scope.severityById object
     #   - $scope.project.my_permissions
 
-    template = _.template("""
+    template = $template.get("issue/issue-severity-button.html", true)
-    <div class="severity-data <% if(editable){ %>clickable<% }%>">
-        <span class="level" style="background-color:<%- severity.color %>"></span>
-        <span class="severity-severity"><%- severity.name %></span>
-        <% if(editable){ %><span class="icon icon-arrow-bottom"></span><% }%>
-        <span class="level-name">severity</span>
-
-        <ul class="popover pop-severity">
-            <% _.each(severityes, function(sv) { %>
-            <li><a href="" class="severity" title="<%- sv.name %>"
-                   data-severity-id="<%- sv.id %>"><%- sv.name %></a></li>
-            <% }); %>
-        </ul>
-    </div>
-    """) #TODO: i18n
 
     link = ($scope, $el, $attrs, $model) ->
         isEditable = ->
@@ -473,14 +420,14 @@ IssueSeverityButtonDirective = ($rootScope, $repo, $confirm, $loading, $qqueue)
         require: "ngModel"
     }
 
-module.directive("tgIssueSeverityButton", ["$rootScope", "$tgRepo", "$tgConfirm", "$tgLoading", "$tgQqueue", IssueSeverityButtonDirective])
+module.directive("tgIssueSeverityButton", ["$rootScope", "$tgRepo", "$tgConfirm", "$tgLoading", "$tgQqueue", "$tgTemplate", IssueSeverityButtonDirective])
 
 
 #############################################################################
 ## Issue priority button directive
 #############################################################################
 
-IssuePriorityButtonDirective = ($rootScope, $repo, $confirm, $loading, $qqueue) ->
+IssuePriorityButtonDirective = ($rootScope, $repo, $confirm, $loading, $qqueue, $template) ->
     # Display the priority of Issue and you can edit it.
     #
     # Example:
@@ -491,21 +438,7 @@ IssuePriorityButtonDirective = ($rootScope, $repo, $confirm, $loading, $qqueue)
     #   - scope.priorityById object
     #   - $scope.project.my_permissions
 
-    template = _.template("""
+    template = $template.get("issue/issue-priority-button.html", true)
-    <div class="priority-data <% if(editable){ %>clickable<% }%>">
-        <span class="level" style="background-color:<%- priority.color %>"></span>
-        <span class="priority-priority"><%- priority.name %></span>
-        <% if(editable){ %><span class="icon icon-arrow-bottom"></span><% }%>
-        <span class="level-name">priority</span>
-
-        <ul class="popover pop-priority">
-            <% _.each(priorityes, function(pr) { %>
-            <li><a href="" class="priority" title="<%- pr.name %>"
-                   data-priority-id="<%- pr.id %>"><%- pr.name %></a></li>
-            <% }); %>
-        </ul>
-    </div>
-    """) #TODO: i18n
 
     link = ($scope, $el, $attrs, $model) ->
         isEditable = ->
@@ -570,7 +503,7 @@ IssuePriorityButtonDirective = ($rootScope, $repo, $confirm, $loading, $qqueue)
         require: "ngModel"
     }
 
-module.directive("tgIssuePriorityButton", ["$rootScope", "$tgRepo", "$tgConfirm", "$tgLoading", "$tgQqueue", IssuePriorityButtonDirective])
+module.directive("tgIssuePriorityButton", ["$rootScope", "$tgRepo", "$tgConfirm", "$tgLoading", "$tgQqueue", "$tgTemplate", IssuePriorityButtonDirective])
 
 
 #############################################################################
@@ -578,12 +511,6 @@ module.directive("tgIssuePriorityButton", ["$rootScope", "$tgRepo", "$tgConfirm"
 #############################################################################
 
 PromoteIssueToUsButtonDirective = ($rootScope, $repo, $confirm, $qqueue) ->
-    template = _.template("""
-        <a class="button button-gray editable" tg-check-permission="add_us">
-            Promote to User Story
-        </a>
-    """)  # TODO: i18n
-
     link = ($scope, $el, $attrs, $model) ->
 
         save = $qqueue.bindAdd (issue, finish) =>
@@ -627,7 +554,7 @@ PromoteIssueToUsButtonDirective = ($rootScope, $repo, $confirm, $qqueue) ->
     return {
         restrict: "AE"
         require: "ngModel"
-        template: template
+        templateUrl: "issue/promote-issue-to-us-button.html"
         link: link
     }
 

app/coffee/modules/issues/list.coffee

@@ -307,41 +307,9 @@ module.controller("IssuesController", IssuesController)
 ## Issues Directive
 #############################################################################
 
-paginatorTemplate = """
+IssuesDirective = ($log, $location, $template) ->
-<ul class="paginator">
-    <% if (showPrevious) { %>
-    <li class="previous">
-        <a href="" class="previous next_prev_button" class="disabled">
-            <span i18next="pagination.prev">Prev</span>
-        </a>
-    </li>
-    <% } %>
-
-    <% _.each(pages, function(item) { %>
-    <li class="<%- item.classes %>">
-        <% if (item.type === "page") { %>
-        <a href="" data-pagenum="<%- item.num %>"><%- item.num %></a>
-        <% } else if (item.type === "page-active") { %>
-        <span class="active"><%- item.num %></span>
-        <% } else { %>
-        <span>...</span>
-        <% } %>
-    </li>
-    <% }); %>
-
-    <% if (showNext) { %>
-    <li class="next">
-        <a href="" class="next next_prev_button" class="disabled">
-            <span i18next="pagination.next">Next</span>
-        </a>
-    </li>
-    <% } %>
-</ul>
-"""
-
-IssuesDirective = ($log, $location) ->
     ## Issues Pagination
-    template = _.template(paginatorTemplate)
+    template = $template.get("issue/issue-paginator.html", true)
 
     linkPagination = ($scope, $el, $attrs, $ctrl) ->
         # Constants
@@ -456,51 +424,16 @@ IssuesDirective = ($log, $location) ->
 
     return {link:link}
 
-module.directive("tgIssues", ["$log", "$tgLocation", IssuesDirective])
+module.directive("tgIssues", ["$log", "$tgLocation", "$tgTemplate", IssuesDirective])
 
 
 #############################################################################
 ## Issues Filters Directive
 #############################################################################
 
-IssuesFiltersDirective = ($log, $location, $rs, $confirm, $loading) ->
+IssuesFiltersDirective = ($log, $location, $rs, $confirm, $loading, $template) ->
-    template = _.template("""
+    template = $template.get("issue/issues-filters.html", true)
-    <% _.each(filters, function(f) { %>
+    templateSelected = $template.get("issue/issues-filters-selected.html", true)
-        <% if (!f.selected) { %>
-        <a class="single-filter"
-            data-type="<%- f.type %>"
-            data-id="<%- f.id %>">
-            <span class="name" <% if (f.color){ %>style="border-left: 3px solid <%- f.color %>;"<% } %>>
-                <%- f.name %>
-            </span>
-            <% if (f.count){ %>
-            <span class="number"><%- f.count %></span>
-            <% } %>
-            <% if (f.type == "myFilters"){ %>
-            <span class="icon icon-delete"></span>
-            <% } %>
-        </a>
-        <% } %>
-    <% }) %>
-    <span class="new">
-        <input class="hidden my-filter-name" type="text"
-               placeholder="Type a descriptive filter name and press Enter" />
-    </span>
-    """)
-
-    templateSelected = _.template("""
-    <% _.each(filters, function(f) { %>
-    <a class="single-filter selected"
-       data-type="<%- f.type %>"
-       data-id="<%- f.id %>">
-        <span class="name" <% if (f.color){ %>style="border-left: 3px solid <%- f.color %>;"<% } %>>
-            <%- f.name %>
-        </span>
-        <span class="icon icon-delete"></span>
-    </a>
-    <% }) %>
-    """)
-
 
     link = ($scope, $el, $attrs) ->
         $ctrl = $el.closest(".wrapper").controller()
@@ -527,14 +460,23 @@ IssuesFiltersDirective = ($log, $location, $rs, $confirm, $loading) ->
             renderSelectedFilters(selectedFilters)
 
         renderSelectedFilters = (selectedFilters) ->
+            _.filter selectedFilters, (f) =>
+                if f.color
+                    f.style = "border-left: 3px solid #{f.color}"
+
             html = templateSelected({filters:selectedFilters})
             $el.find(".filters-applied").html(html)
+
             if selectedFilters.length > 0
                 $el.find(".save-filters").show()
             else
                 $el.find(".save-filters").hide()
 
         renderFilters = (filters) ->
+            _.filter filters, (f) =>
+                if f.color
+                    f.style = "border-left: 3px solid #{f.color}"
+
             html = template({filters:filters})
             $el.find(".filter-list").html(html)
 
@@ -700,7 +642,7 @@ IssuesFiltersDirective = ($log, $location, $rs, $confirm, $loading) ->
 
     return {link:link}
 
-module.directive("tgIssuesFilters", ["$log", "$tgLocation", "$tgResources", "$tgConfirm", "$tgLoading",
+module.directive("tgIssuesFilters", ["$log", "$tgLocation", "$tgResources", "$tgConfirm", "$tgLoading", "$tgTemplate",
                                      IssuesFiltersDirective])
 
 
@@ -708,7 +650,7 @@ module.directive("tgIssuesFilters", ["$log", "$tgLocation", "$tgResources", "$tg
 ## Issue status Directive (popover for change status)
 #############################################################################
 
-IssueStatusInlineEditionDirective = ($repo, popoverService) ->
+IssueStatusInlineEditionDirective = ($repo, $template) ->
     ###
     Print the status of an Issue and a popover to change it.
     - tg-issue-status-inline-edition: The issue
@@ -720,16 +662,7 @@ IssueStatusInlineEditionDirective = ($repo, popoverService) ->
 
     NOTE: This directive need 'issueStatusById' and 'project'.
     ###
-    selectionTemplate = _.template("""
+    selectionTemplate = $template.get("issue/issue-status-inline-edition-selection.html", true)
-    <ul class="popover pop-status">
-        <% _.forEach(statuses, function(status) { %>
-        <li>
-            <a href="" class="status" title="<%- status.name %>" data-status-id="<%- status.id %>">
-                <%- status.name %>
-            </a>
-        </li>
-        <% }); %>
-    </ul>""")
 
     updateIssueStatus = ($el, issue, issueStatusById) ->
         issueStatusDomParent = $el.find(".issue-status")
@@ -779,7 +712,7 @@ IssueStatusInlineEditionDirective = ($repo, popoverService) ->
 
     return {link: link}
 
-module.directive("tgIssueStatusInlineEdition", ["$tgRepo", IssueStatusInlineEditionDirective])
+module.directive("tgIssueStatusInlineEdition", ["$tgRepo", "$tgTemplate", IssueStatusInlineEditionDirective])
 
 
 #############################################################################

app/coffee/modules/kanban/main.coffee

@@ -445,7 +445,7 @@ KanbanUserstoryDirective = ($rootscope) ->
             $el.off()
 
     return {
-        templateUrl: "/partials/views/components/kanban-task.html"
+        templateUrl: "kanban/kanban-task.html"
         link: link
         require: "ngModel"
     }

app/coffee/modules/nav.coffee

@@ -71,42 +71,9 @@ class ProjectsNavigationController extends taiga.Controller
 module.controller("ProjectsNavigationController", ProjectsNavigationController)
 
 
-ProjectsNavigationDirective = ($rootscope, animationFrame, $timeout, tgLoader, $location, $compile) ->
+ProjectsNavigationDirective = ($rootscope, animationFrame, $timeout, tgLoader, $location, $compile, $template) ->
-    baseTemplate = _.template("""
+    baseTemplate = $template.get("project/project-navigation-base.html", true)
-    <h1>Your projects</h1>
+    projectsTemplate = $template.get("project/project-navigation-list.html", true)
-    <form>
-        <fieldset>
-            <input type="text" placeholder="Search in..." class="search-project"/>
-            <a class="icon icon-search"></a>
-        </fieldset>
-    </form>
-
-    <div class="create-project-button">
-        <a class="button button-green" href="">
-            Create project
-        </a>
-    </div>
-
-    <div class="projects-pagination" tg-projects-pagination>
-        <a class="v-pagination-previous icon icon-arrow-up " href=""></a>
-        <div class="v-pagination-list">
-            <ul class="projects-list">
-            </ul>
-        </div>
-        <a class="v-pagination-next icon icon-arrow-bottom" href=""></a>
-    </div>
-    """) # TODO: i18n
-
-    projectsTemplate = _.template("""
-    <% _.each(projects, function(project) { %>
-    <li>
-        <a href="<%- project.url %>">
-            <span class="project-name"><%- project.name %></span>
-            <span class="icon icon-arrow-right"/>
-        </a>
-    </li>
-    <% }) %>
-    """) # TODO: i18n
 
     overlay = $(".projects-nav-overlay")
     loadingStart = 0
@@ -201,93 +168,15 @@ ProjectsNavigationDirective = ($rootscope, animationFrame, $timeout, tgLoader, $
     }
 
 
-module.directive("tgProjectsNav", ["$rootScope", "animationFrame", "$timeout", "tgLoader", "$tgLocation", "$compile", ProjectsNavigationDirective])
+module.directive("tgProjectsNav", ["$rootScope", "animationFrame", "$timeout", "tgLoader", "$tgLocation", "$compile", "$tgTemplate", ProjectsNavigationDirective])
 
 
 #############################################################################
 ## Project
 #############################################################################
 
-ProjectMenuDirective = ($log, $compile, $auth, $rootscope, $tgAuth, $location, $navUrls, $config) ->
+ProjectMenuDirective = ($log, $compile, $auth, $rootscope, $tgAuth, $location, $navUrls, $config, $template) ->
-    menuEntriesTemplate = _.template("""
+    menuEntriesTemplate = $template.get("project/project-menu.html", true)
-    <div class="menu-container">
-        <ul class="main-nav">
-        <li id="nav-search">
-            <a href="" title="Search">
-                <span class="icon icon-search"></span><span class="item">Search</span>
-            </a>
-        </li>
-        <% if (project.is_backlog_activated && project.my_permissions.indexOf("view_us") != -1) { %>
-        <li id="nav-backlog">
-            <a href="" title="Backlog" tg-nav="project-backlog:project=project.slug">
-                <span class="icon icon-backlog"></span>
-                <span class="item">Backlog</span>
-            </a>
-        </li>
-        <% } %>
-        <% if (project.is_kanban_activated && project.my_permissions.indexOf("view_us") != -1) { %>
-        <li id="nav-kanban">
-            <a href="" title="Kanban" tg-nav="project-kanban:project=project.slug">
-                <span class="icon icon-kanban"></span><span class="item">Kanban</span>
-            </a>
-        </li>
-        <% } %>
-        <% if (project.is_issues_activated && project.my_permissions.indexOf("view_issues") != -1) { %>
-        <li id="nav-issues">
-            <a href="" title="Issues" tg-nav="project-issues:project=project.slug">
-                <span class="icon icon-issues"></span><span class="item">Issues</span>
-            </a>
-        </li>
-        <% } %>
-        <% if (project.is_wiki_activated && project.my_permissions.indexOf("view_wiki_pages") != -1) { %>
-        <li id="nav-wiki">
-            <a href="" title="Wiki" tg-nav="project-wiki:project=project.slug">
-                <span class="icon icon-wiki"></span>
-                <span class="item">Wiki</span>
-            </a>
-        </li>
-        <% } %>
-        <li id="nav-team">
-            <a href="" title="Team" tg-nav="project-team:project=project.slug">
-                <span class="icon icon-team"></span>
-                <span class="item">Team</span>
-            </a>
-        </li>
-        <% if (project.videoconferences) { %>
-        <li id="nav-video">
-            <a href="<%- project.videoconferenceUrl %>" target="_blank" title="Meet Up">
-                <span class="icon icon-video"></span>
-                <span class="item">Meet Up</span>
-            </a>
-        </li>
-        <% } %>
-        <% if (project.i_am_owner) { %>
-        <li id="nav-admin">
-            <a href="" tg-nav="project-admin-home:project=project.slug" title="Admin">
-                <span class="icon icon-settings"></span>
-                <span class="item">Admin</span>
-            </a>
-        </li>
-        <% } %>
-        </ul>
-        <div class="user">
-            <div class="user-settings">
-                <ul class="popover">
-                    <li><a href="" title="User Profile", tg-nav="user-settings-user-profile:project=project.slug">User Profile</a></li>
-                    <li><a href="" title="Change Password", tg-nav="user-settings-user-change-password:project=project.slug">Change Password</a></li>
-                    <li><a href="" title="Notifications", tg-nav="user-settings-mail-notifications:project=project.slug">Notifications</a></li>
-                    <% if (feedbackEnabled) { %>
-                    <li><a href="" class="feedback" title="Feedback"">Feedback</a></li>
-                    <% } %>
-                    <li><a href="" title="Logout" class="logout">Logout</a></li>
-                </ul>
-                <a href="" title="User preferences" class="avatar" id="nav-user-settings">
-                    <img src="<%- user.photo %>" alt="<%- user.full_name_display %>" />
-                </a>
-            </div>
-        </div>
-    </div>
-    """)
 
     mainTemplate = _.template("""
     <div class="logo-container logo">
@@ -416,4 +305,4 @@ ProjectMenuDirective = ($log, $compile, $auth, $rootscope, $tgAuth, $location, $
     return {link: link}
 
 module.directive("tgProjectMenu", ["$log", "$compile", "$tgAuth", "$rootScope", "$tgAuth", "$tgLocation",
-                                   "$tgNavUrls", "$tgConfig", ProjectMenuDirective])
+                                   "$tgNavUrls", "$tgConfig", "$tgTemplate", ProjectMenuDirective])

app/coffee/modules/projects/main.coffee

@@ -249,26 +249,8 @@ ProjectsPaginationDirective = ($timeout) ->
 
 module.directive("tgProjectsPagination", ['$timeout', ProjectsPaginationDirective])
 
-ProjectsListDirective = ($compile) ->
+ProjectsListDirective = ($compile, $template) ->
-    template = _.template("""
+    template = $template.get('project/project-list.html', true)
-        <div tg-projects-pagination>
-            <div class="projects-pagination">
-                <a class="v-pagination-previous icon icon-arrow-up" href=""></a>
-                <div class="v-pagination-list">
-                    <ul class="projects-list">
-                        <% _.each(projects, function(project) { %>
-                        <li>
-                            <a class="button" href="<%- project.url %>">
-                                <%- project.name %>
-                            </a>
-                        </li>
-                        <% }) %>
-                    </ul>
-                </div>
-                <a class="v-pagination-next icon icon-arrow-bottom" href=""></a>
-            </div>
-        </div>
-    """)
 
     link = ($scope, $el, $attrs, $ctrls) ->
         render = (projects) ->
@@ -282,4 +264,4 @@ ProjectsListDirective = ($compile) ->
         link: link
     }
 
-module.directive("tgProjectsList", ["$compile", ProjectsListDirective])
+module.directive("tgProjectsList", ["$compile", "$tgTemplate", ProjectsListDirective])

app/coffee/modules/related-tasks.coffee

@@ -25,66 +25,9 @@ debounce = @.taiga.debounce
 
 module = angular.module("taigaRelatedTasks", [])
 
-RelatedTaskRowDirective = ($repo, $compile, $confirm, $rootscope, $loading) ->
+RelatedTaskRowDirective = ($repo, $compile, $confirm, $rootscope, $loading, $template) ->
-    templateView = _.template("""
+    templateView = $template.get("task/related-task-row.html", true)
-    <div class="tasks">
+    templateEdit = $template.get("task/related-task-row-edit.html", true)
-        <div class="task-name">
-            <span class="icon icon-iocaine"></span>
-            <a tg-nav="project-tasks-detail:project=project.slug,ref=task.ref" title="<%- task.ref %> <%- task.subject %>" class="clickable">
-                <span>#<%- task.ref %></span>
-                <span><%- task.subject %></span>
-            </a>
-            <div class="task-settings">
-                <% if(perms.modify_task) { %>
-                    <a href="" title="Edit" class="icon icon-edit"></a>
-                <% } %>
-                <% if(perms.delete_task) { %>
-                    <a href="" title="Delete" class="icon icon-delete delete-task"></a>
-                <% } %>
-            </div>
-        </div>
-    </div>
-    <div tg-related-task-status="task" ng-model="task" class="status">
-        <a href="" title="Status Name" class="task-status">
-            <span class="task-status-bind"></span>
-            <% if(perms.modify_task) { %>
-                <span class="icon icon-arrow-bottom"></span>
-            <% } %>
-        </a>
-    </div>
-    <div tg-related-task-assigned-to-inline-edition="task" class="assigned-to">
-        <div title="Assigned to" class="task-assignedto <% if(perms.modify_task) { %>editable<% } %>">
-            <figure class="avatar"></figure>
-            <% if(perms.modify_task) { %>
-                <span class="icon icon-arrow-bottom"></span>
-            <% } %>
-        </div>
-    </div>
-    """)
-
-    templateEdit = _.template("""
-    <div class="tasks">
-        <div class="task-name">
-            <input type="text" value="<%- task.subject %>" placeholder="Type the task subject" />
-            <div class="task-settings">
-                <a href="" title="Save" class="icon icon-floppy"></a>
-                <a href="" title="Cancel" class="icon icon-delete cancel-edit"></a>
-            </div>
-        </div>
-    </div>
-    <div tg-related-task-status="task" ng-model="task" class="status">
-        <a href="" title="Status Name" class="task-status">
-            <span class="task-status-bind"></span>
-            <span class="icon icon-arrow-bottom"></span>
-        </a>
-    </div>
-    <div tg-related-task-assigned-to-inline-edition="task" class="assigned-to">
-        <div title="Assigned to" class="task-assignedto">
-            <figure class="avatar"></figure>
-            <span class="icon icon-arrow-bottom"></span>
-        </div>
-    </div>
-    """)
 
     link = ($scope, $el, $attrs, $model) ->
         saveTask = debounce 2000, (task) ->
@@ -166,32 +109,10 @@ RelatedTaskRowDirective = ($repo, $compile, $confirm, $rootscope, $loading) ->
 
     return {link:link, require:"ngModel"}
 
-module.directive("tgRelatedTaskRow", ["$tgRepo", "$compile", "$tgConfirm", "$rootScope", "$tgLoading", "$tgAnalytics", RelatedTaskRowDirective])
+module.directive("tgRelatedTaskRow", ["$tgRepo", "$compile", "$tgConfirm", "$rootScope", "$tgLoading", "$tgTemplate", RelatedTaskRowDirective])
 
-RelatedTaskCreateFormDirective = ($repo, $compile, $confirm, $tgmodel, $loading, $analytics) ->
+RelatedTaskCreateFormDirective = ($repo, $compile, $confirm, $tgmodel, $loading, $analytics, $template) ->
-    template = _.template("""
+    template = $template.get("task/related-task-create-form.html", true)
-    <div class="tasks">
-        <div class="task-name">
-            <input type="text" placeholder="Type the new task subject" />
-            <div class="task-settings">
-                <a href="" title="Save" class="icon icon-floppy"></a>
-                <a href="" title="Cancel" class="icon icon-delete cancel-edit"></a>
-            </div>
-        </div>
-    </div>
-    <div tg-related-task-status="newTask" ng-model="newTask" class="status" not-auto-save="true">
-        <a href="" title="Status Name" class="task-status">
-            <span class="task-status-bind"></span>
-            <span class="icon icon-arrow-bottom"></span>
-        </a>
-    </div>
-    <div tg-related-task-assigned-to-inline-edition="newTask" class="assigned-to" not-auto-save="true">
-        <div title="Assigned to" class="task-assignedto">
-            <figure class="avatar"></figure>
-            <span class="icon icon-arrow-bottom"></span>
-        </div>
-    </div>
-    """)
 
     newTask = {
         subject: ""
@@ -256,7 +177,7 @@ RelatedTaskCreateFormDirective = ($repo, $compile, $confirm, $tgmodel, $loading,
             $el.off()
 
     return {link: link}
-module.directive("tgRelatedTaskCreateForm", ["$tgRepo", "$compile", "$tgConfirm", "$tgModel", "$tgLoading", "$tgAnalytics", RelatedTaskCreateFormDirective])
+module.directive("tgRelatedTaskCreateForm", ["$tgRepo", "$compile", "$tgConfirm", "$tgModel", "$tgLoading", "$tgAnalytics", "$tgTemplate", RelatedTaskCreateFormDirective])
 
 RelatedTaskCreateButtonDirective = ($repo, $compile, $confirm, $tgmodel) ->
     template = _.template("""

app/coffee/modules/taskboard/main.coffee

@@ -416,20 +416,6 @@ module.directive("tgTaskboardSquishColumn", ["$tgResources", TaskboardSquishColu
 #############################################################################
 
 TaskboardUserDirective = ($log) ->
-    template = """
-    <figure class="avatar avatar-assigned-to">
-       <a href="#" title="Assign task" ng-class="{'not-clickable': !clickable}">
-            <img ng-src="{{imgurl}}">
-        </a>
-    </figure>
-
-    <figure class="avatar avatar-task-link">
-       <a tg-nav="project-tasks-detail:project=project.slug,ref=task.ref" ng-attr-title="{{task.subject}}">
-            <img ng-src="{{imgurl}}">
-        </a>
-    </figure>
-    """ # TODO: i18n
-
     clickable = false
 
     link = ($scope, $el, $attrs) ->
@@ -464,7 +450,7 @@ TaskboardUserDirective = ($log) ->
 
     return {
         link: link,
-        template: template,
+        template: "taskboard/taskboard-user.html",
         scope: {
             "usersById": "=users",
             "project": "=",

app/coffee/modules/tasks/detail.coffee

@@ -143,7 +143,7 @@ module.controller("TaskDetailController", TaskDetailController)
 ## Task status display directive
 #############################################################################
 
-TaskStatusDisplayDirective = ->
+TaskStatusDisplayDirective = ($template) ->
     # Display if a Task is open or closed and its taskboard status.
     #
     # Example:
@@ -153,18 +153,7 @@ TaskStatusDisplayDirective = ->
     #   - Task object (ng-model)
     #   - scope.statusById object
 
-    template = _.template("""
+    template = $template.get("common/components/status-display.html", true)
-    <span>
-        <% if (status.is_closed) { %>
-            Closed
-        <% } else { %>
-            Open
-        <% } %>
-    </span>
-    <span class="us-detail-status" style="color:<%- status.color %>">
-        <%- status.name %>
-    </span>
-    """) # TODO: i18n
 
     link = ($scope, $el, $attrs) ->
         render = (task) ->
@@ -185,7 +174,7 @@ TaskStatusDisplayDirective = ->
         require: "ngModel"
     }
 
-module.directive("tgTaskStatusDisplay", TaskStatusDisplayDirective)
+module.directive("tgTaskStatusDisplay", ["$tgTemplate", TaskStatusDisplayDirective])
 
 
 #############################################################################

app/coffee/modules/team/main.coffee

@@ -142,25 +142,8 @@ module.controller("TeamController", TeamController)
 #############################################################################
 
 TeamFiltersDirective = () ->
-    template = """
-    <ul>
-        <li>
-            <a ng-class="{active: !filtersRole.id}" ng-click="ctrl.setRole()" href="">
-                <span class="title">All</span>
-                <span class="icon icon-arrow-right"></span>
-            </a>
-        </li>
-        <li ng-repeat="role in roles">
-            <a ng-class="{active: role.id == filtersRole.id}" ng-click="ctrl.setRole(role)" href="">
-                <span class="title" tg-bo-bind="role.name"></span>
-                <span class="icon icon-arrow-right"></span>
-            </a>
-        </li>
-    </ul>
-    """
-
     return {
-        template: template
+        templateUrl: "team/team-filter.html"
     }
 
 module.directive("tgTeamFilters", [TeamFiltersDirective])
@@ -170,28 +153,8 @@ module.directive("tgTeamFilters", [TeamFiltersDirective])
 #############################################################################
 
 TeamMemberStatsDirective = () ->
-    template = """
-        <div class="attribute" ng-if="issuesEnabled">
-            <span class="icon icon-briefcase" ng-style="{'opacity': stats.closed_bugs[userId]}" ng-class="{'top': stats.closed_bugs[userId] == 1}"></span>
-        </div>
-        <div class="attribute" ng-if="tasksEnabled">
-            <span class="icon icon-iocaine" ng-style="{'opacity': stats.iocaine_tasks[userId]}" ng-class="{'top': stats.iocaine_tasks[userId] == 1}"></span>
-        </div>
-        <div class="attribute" ng-if="wikiEnabled">
-            <span class="icon icon-writer" ng-style="{'opacity': stats.wiki_changes[userId]}" ng-class="{'top': stats.wiki_changes[userId] == 1}"></span>
-        </div>
-        <div class="attribute" ng-if="issuesEnabled">
-            <span class="icon icon-bug" ng-style="{'opacity': stats.created_bugs[userId]}" ng-class="{'top': stats.created_bugs[userId] == 1}"></span>
-        </div>
-        <div class="attribute" ng-if="tasksEnabled">
-            <span class="icon icon-tasks" ng-style="{'opacity': stats.closed_tasks[userId]}" ng-class="{'top': stats.closed_tasks[userId] == 1}"></span>
-        </div>
-        <div class="attribute">
-            <span class="points" ng-bind="stats.totals[userId]"></span>
-        </div>
-    """
     return {
-        template: template,
+        templateUrl: "team/team-member-stats.html",
         scope: {
             stats: "=",
             userId: "=user"
@@ -208,23 +171,8 @@ module.directive("tgTeamMemberStats", TeamMemberStatsDirective)
 #############################################################################
 
 TeamMemberCurrentUserDirective = () ->
-    template = """
-        <div class="row">
-            <div class="username">
-                <figure class="avatar">
-                    <img tg-bo-src="currentUser.photo" tg-bo-alt="currentUser.full_name" />
-                    <figcaption>
-                        <span class="name" tg-bo-bind="currentUser.full_name"></span>
-                        <span class="position" tg-bo-bind="currentUser.role_name"></span>
-                        <div tg-leave-project projectid="{{projectId}}"></div>
-                    </figcaption>
-                </figure>
-            </div>
-            <div class="member-stats" tg-team-member-stats stats="stats" user="currentUser.user" issuesEnabled="issuesEnabled", tasksenabled="tasksEnabled", wikienabled="wikiEnabled"></div>
-        </div>
-    """
     return {
-        template: template
+        templateUrl: "team/team-member-current-user.html"
         scope: {
             projectId: "=projectid",
             currentUser: "=currentuser",
@@ -242,22 +190,10 @@ module.directive("tgTeamCurrentUser", TeamMemberCurrentUserDirective)
 #############################################################################
 
 TeamMembersDirective = () ->
-    template = """
+    template = "team/team-members.html"
-        <div class="row member" ng-repeat="user in memberships | filter:filtersQ | filter:{role: filtersRole.id}">
+
-            <div class="username">
-                <figure class="avatar">
-                    <img tg-bo-src="user.photo" tg-bo-alt="user.full_name" />
-                    <figcaption>
-                        <span class="name" tg-bo-bind="user.full_name"></span>
-                        <span class="position" tg-bo-bind="user.role_name"></span>
-                    </figcaption>
-                </figure>
-            </div>
-            <div class="member-stats" tg-team-member-stats stats="stats" user="user.user" issuesEnabled="issuesEnabled", tasksenabled="tasksEnabled", wikienabled="wikiEnabled"></div>
-        </div>
-    """
     return {
-        template: template
+        templateUrl: template
         scope: {
             memberships: "=",
             filtersQ: "=filtersq",
@@ -276,12 +212,6 @@ module.directive("tgTeamMembers", TeamMembersDirective)
 #############################################################################
 
 LeaveProjectDirective = ($repo, $confirm, $location, $rs, $navurls) ->
-    template= """
-        <a ng-click="leave()" href="" class="leave-project">
-            <span class="icon icon-delete"></span>Leave this project
-        </a>
-    """ #TODO: i18n
-
     link = ($scope, $el, $attrs) ->
         $scope.leave = () ->
             #TODO: i18n
@@ -299,7 +229,7 @@ LeaveProjectDirective = ($repo, $confirm, $location, $rs, $navurls) ->
 
     return {
         scope: {},
-        template: template,
+        templateUrl: "team/leave-project.html",
         link: link
     }
 

app/coffee/modules/user-settings/lightboxes.coffee

@@ -60,7 +60,7 @@ DeleteUserDirective = ($repo, $rootscope, $auth, $location, $navUrls, lightboxSe
 
     return {
         link: link,
-        templateUrl: "/partials/views/modules/lightbox-delete-account.html"
+        templateUrl: "user/lightbox/lightbox-delete-account.html"
     }
 
 module.directive("tgLbDeleteUser", ["$tgRepo", "$rootScope", "$tgAuth", "$tgLocation", "$tgNavUrls",

app/coffee/modules/userstories/detail.coffee

@@ -151,7 +151,7 @@ module.controller("UserStoryDetailController", UserStoryDetailController)
 ## User story status display directive
 #############################################################################
 
-UsStatusDisplayDirective = ->
+UsStatusDisplayDirective = ($template) ->
     # Display if a US is open or closed and its kanban status.
     #
     # Example:
@@ -161,18 +161,7 @@ UsStatusDisplayDirective = ->
     #   - US object (ng-model)
     #   - scope.statusById object
 
-    template = _.template("""
+    template = $template.get("common/components/status-display.html", true)
-    <span>
-        <% if (is_closed) { %>
-            Closed
-        <% } else { %>
-            Open
-        <% } %>
-    </span>
-    <span class="us-detail-status" style="color:<%- status.color %>">
-        <%- status.name %>
-    </span>
-    """) # TODO: i18n
 
     link = ($scope, $el, $attrs) ->
         render = (us) ->
@@ -194,14 +183,14 @@ UsStatusDisplayDirective = ->
         require: "ngModel"
     }
 
-module.directive("tgUsStatusDisplay", UsStatusDisplayDirective)
+module.directive("tgUsStatusDisplay", ["$tgTemplate", UsStatusDisplayDirective])
 
 
 #############################################################################
 ## User story related tasts progress splay Directive
 #############################################################################
 
-UsTasksProgressDisplayDirective = ->
+UsTasksProgressDisplayDirective = ($template) ->
     # Display a progress bar with the stats of completed tasks.
     #
     # Example:
@@ -211,12 +200,7 @@ UsTasksProgressDisplayDirective = ->
     #   - Task object list (ng-model)
     #   - scope.taskStatusById object
 
-    template = _.template("""
+    template = $template.get("us/us-task-progress.html", true)
-    <div class="current-progress" style="width:<%- progress %>%" />
-    <span clasS="tasks-completed">
-        <%- totalClosedTasks %>/<%- totalTasks %> tasks completed
-    </span>
-    """) # TODO: i18n
 
     link = ($scope, $el, $attrs) ->
         render = (tasks) ->
@@ -244,14 +228,14 @@ UsTasksProgressDisplayDirective = ->
         require: "ngModel"
     }
 
-module.directive("tgUsTasksProgressDisplay", UsTasksProgressDisplayDirective)
+module.directive("tgUsTasksProgressDisplay", ["$tgTemplate", UsTasksProgressDisplayDirective])
 
 
 #############################################################################
 ## User story status button directive
 #############################################################################
 
-UsStatusButtonDirective = ($rootScope, $repo, $confirm, $loading, $qqueue) ->
+UsStatusButtonDirective = ($rootScope, $repo, $confirm, $loading, $qqueue, $template) ->
     # Display the status of a US and you can edit it.
     #
     # Example:
@@ -262,21 +246,7 @@ UsStatusButtonDirective = ($rootScope, $repo, $confirm, $loading, $qqueue) ->
     #   - scope.statusById object
     #   - $scope.project.my_permissions
 
-    template = _.template("""
+    template = $template.get("us/us-status-button.html", true)
-    <div class="status-data <% if(editable){ %>clickable<% }%>">
-        <span class="level" style="background-color:<%- status.color %>"></span>
-        <span class="status-status"><%- status.name %></span>
-        <% if(editable){ %><span class="icon icon-arrow-bottom"></span><% }%>
-        <span class="level-name">status</span>
-
-        <ul class="popover pop-status">
-            <% _.each(statuses, function(st) { %>
-            <li><a href="" class="status" title="<%- st.name %>"
-                   data-status-id="<%- st.id %>"><%- st.name %></a></li>
-            <% }); %>
-        </ul>
-    </div>
-    """) #TODO: i18n
 
     link = ($scope, $el, $attrs, $model) ->
         isEditable = ->
@@ -345,7 +315,7 @@ UsStatusButtonDirective = ($rootScope, $repo, $confirm, $loading, $qqueue) ->
         require: "ngModel"
     }
 
-module.directive("tgUsStatusButton", ["$rootScope", "$tgRepo", "$tgConfirm", "$tgLoading","$tgQqueue",
+module.directive("tgUsStatusButton", ["$rootScope", "$tgRepo", "$tgConfirm", "$tgLoading","$tgQqueue", "$tgTemplate",
                                       UsStatusButtonDirective])
 
 
@@ -353,14 +323,8 @@ module.directive("tgUsStatusButton", ["$rootScope", "$tgRepo", "$tgConfirm", "$t
 ## User story team requirements button directive
 #############################################################################
 
-UsTeamRequirementButtonDirective = ($rootscope, $tgrepo, $confirm, $loading, $qqueue) ->
+UsTeamRequirementButtonDirective = ($rootscope, $tgrepo, $confirm, $loading, $qqueue, $template) ->
-    template = _.template("""
+    template = $template.get("us/us-team-requirement-button.html", true)
-    <label for="team-requirement"
-           class="button button-gray team-requirement <% if(canEdit){ %>editable<% }; %> <% if(isRequired){ %>active<% }; %>">
-        Team requirement
-    </label>
-    <input type="checkbox" id="team-requirement" name="team-requirement"/>
-    """) #TODO: i18n
 
     link = ($scope, $el, $attrs, $model) ->
         canEdit = ->
@@ -416,20 +380,14 @@ UsTeamRequirementButtonDirective = ($rootscope, $tgrepo, $confirm, $loading, $qq
         require: "ngModel"
     }
 
-module.directive("tgUsTeamRequirementButton", ["$rootScope", "$tgRepo", "$tgConfirm", "$tgLoading", "$tgQqueue", UsTeamRequirementButtonDirective])
+module.directive("tgUsTeamRequirementButton", ["$rootScope", "$tgRepo", "$tgConfirm", "$tgLoading", "$tgQqueue", "$tgTemplate", UsTeamRequirementButtonDirective])
 
 #############################################################################
 ## User story client requirements button directive
 #############################################################################
 
-UsClientRequirementButtonDirective = ($rootscope, $tgrepo, $confirm, $loading, $qqueue) ->
+UsClientRequirementButtonDirective = ($rootscope, $tgrepo, $confirm, $loading, $qqueue, $template) ->
-    template = _.template("""
+    template = $template.get("us/us-client-requirement-button.html", true)
-    <label for="client-requirement"
-           class="button button-gray client-requirement <% if(canEdit){ %>editable<% }; %> <% if(isRequired){ %>active<% }; %>">
-        Client requirement
-    </label>
-    <input type="checkbox" id="client-requirement" name="client-requirement"/>
-    """) #TODO: i18n
 
     link = ($scope, $el, $attrs, $model) ->
         canEdit = ->
@@ -482,5 +440,5 @@ UsClientRequirementButtonDirective = ($rootscope, $tgrepo, $confirm, $loading, $
         require: "ngModel"
     }
 
-module.directive("tgUsClientRequirementButton", ["$rootScope", "$tgRepo", "$tgConfirm", "$tgLoading", "$tgQqueue",
+module.directive("tgUsClientRequirementButton", ["$rootScope", "$tgRepo", "$tgConfirm", "$tgLoading", "$tgQqueue", "$tgTemplate",
                                                  UsClientRequirementButtonDirective])

app/coffee/modules/wiki/main.coffee

@@ -132,26 +132,8 @@ module.controller("WikiDetailController", WikiDetailController)
 ## Wiki Summary Directive
 #############################################################################
 
-WikiSummaryDirective = ($log) ->
+WikiSummaryDirective = ($log, $template) ->
-    template = _.template("""
+    template = $template.get("wiki/wiki-summary.html", true)
-    <ul>
-        <li>
-            <span class="number"><%- totalEditions %></span>
-            <span class="description">times <br />edited</span>
-        </li>
-        <li>
-            <span class="number"><%- lastModifiedDate %></span>
-            <span class="description"> last <br />edit</span>
-        </li>
-        <li class="username-edition">
-            <figure class="avatar">
-                <img src="<%- user.imgUrl %>" alt="<%- user.name %>">
-            </figure>
-            <span class="description">last modification</span>
-            <span class="username"><%- user.name %></span>
-        </li>
-    </ul>
-    """)
 
     link = ($scope, $el, $attrs, $model) ->
         render = (wiki) ->
@@ -189,7 +171,7 @@ WikiSummaryDirective = ($log) ->
         require: "ngModel"
     }
 
-module.directive("tgWikiSummary", ["$log", WikiSummaryDirective])
+module.directive("tgWikiSummary", ["$log", "$tgTemplate", WikiSummaryDirective])
 
 
 #############################################################################
@@ -198,25 +180,6 @@ module.directive("tgWikiSummary", ["$log", WikiSummaryDirective])
 
 EditableWikiContentDirective = ($window, $document, $repo, $confirm, $loading, $location, $navUrls,
                                 $analytics, $qqueue) ->
-    template = """
-        <div class="view-wiki-content">
-            <section class="wysiwyg" tg-bind-html="wiki.html"></section>
-            <span class="edit icon icon-edit" title="Edit"></span>
-        </div>
-        <div class="edit-wiki-content" style="display: none;">
-            <textarea placeholder="Write your wiki page here"
-                      ng-model="wiki.content"
-                      tg-markitup="tg-markitup"></textarea>
-            <a class="help-markdown" href="https://taiga.io/support/taiga-markdown-syntax/" target="_blank" title="Mardown syntax help">
-                <span class="icon icon-help"></span>
-                <span>Markdown syntax help</span>
-            </a>
-            <span class="action-container">
-                <a class="save icon icon-floppy" href="" title="Save" />
-                <a class="cancel icon icon-delete" href="" title="Cancel" />
-            </span>
-        </div>
-    """ # TODO: i18n
 
     link = ($scope, $el, $attrs, $model) ->
         isEditable = ->
@@ -325,7 +288,7 @@ EditableWikiContentDirective = ($window, $document, $repo, $confirm, $loading, $
         link: link
         restrict: "EA"
         require: "ngModel"
-        template: template
+        templateUrl: "wiki/editable-wiki-content.html"
     }
 
 module.directive("tgEditableWikiContent", ["$window", "$document", "$tgRepo", "$tgConfirm", "$tgLoading",

app/coffee/modules/wiki/nav.coffee

@@ -34,33 +34,8 @@ module = angular.module("taigaWiki")
 ## Wiki Main Directive
 #############################################################################
 
-WikiNavDirective = ($tgrepo, $log, $location, $confirm, $navUrls, $analytics, $loading) ->
+WikiNavDirective = ($tgrepo, $log, $location, $confirm, $navUrls, $analytics, $loading, $template) ->
-    template = _.template("""
+    template = $template.get("wiki/wiki-nav.html", true)
-    <header>
-      <h1>Links</h1>
-    </header>
-    <nav>
-      <ul>
-        <% _.each(wikiLinks, function(link, index) { %>
-        <li class="wiki-link" data-id="<%- index %>">
-          <a title="<%- link.title %>">
-              <span class="link-title"><%- link.title %></span>
-              <% if (deleteWikiLinkPermission) { %>
-              <span class="icon icon-delete"></span>
-              <% } %>
-          </a>
-          <input type="text" placeholder="name" class="hidden" value="<%- link.title %>" />
-        </li>
-        <% }) %>
-        <li class="new hidden">
-          <input type="text" placeholder="name"/>
-        </li>
-      </ul>
-    </nav>
-    <% if (addWikiLinkPermission) { %>
-    <a href="" title="Add link" class="add-button button button-gray">Add link</a>
-    <% } %>
-    """)
     link = ($scope, $el, $attrs) ->
         $ctrl = $el.controller()
 
@@ -168,4 +143,4 @@ WikiNavDirective = ($tgrepo, $log, $location, $confirm, $navUrls, $analytics, $l
     return {link:link}
 
 module.directive("tgWikiNav", ["$tgRepo", "$log", "$tgLocation", "$tgConfirm", "$tgNavUrls",
-                               "$tgAnalytics", "$tgLoading", WikiNavDirective])
+                               "$tgAnalytics", "$tgLoading", "$tgTemplate", WikiNavDirective])

app/index.jade

@@ -12,29 +12,30 @@ html(lang="en")
 
 
     body(tg-main)
-        include partials/views/modules/projects-nav
+        include partials/includes/modules/projects-nav
 
         //- the content of nav.menu is in coffe.modules.base TaigaMain directive
         nav.menu.hidden(tg-project-menu)
 
-        include partials/views/components/notification-message
+        include partials/includes/components/notification-message
 
         div.master(ng-view)
 
         div.lightbox.lightbox-generic-ask
-            include partials/views/modules/lightbox-generic-ask
+            include partials/includes/modules/lightbox-generic-ask
         div.lightbox.lightbox-ask-choice
-            include partials/views/modules/lightbox-ask-choice
+            include partials/includes/modules/lightbox-ask-choice
         div.lightbox.lightbox-generic-success
-            include partials/views/modules/lightbox-generic-success
+            include partials/includes/modules/lightbox-generic-success
         div.lightbox.lightbox-generic-error
-            include partials/views/modules/lightbox-generic-error
+            include partials/includes/modules/lightbox-generic-error
         div.lightbox.lightbox-search(tg-search-box)
-            include partials/views/modules/lightbox-search
+            include partials/includes/modules/lightbox-search
         div.lightbox.lightbox-feedback.lightbox-generic-form(tg-lb-feedback)
-            include partials/views/modules/lightbox-feedback
+            include partials/includes/modules/lightbox-feedback
 
-        include partials/views/modules/loader
+        include partials/includes/modules/loader
 
         script(src="/js/libs.js?v=#{v}")
         script(src="/js/app-loader.js?v=#{v}")
+        script(src="/js/templates.js?v=#{v}")

app/partials/admin-memberships.jade

@@ -1,26 +0,0 @@
-extends dummy-layout
-
-block head
-    title Taiga  Your agile, free, and open source project management tool
-
-block content
-    div.wrapper.memberships(ng-controller="MembershipsController as ctrl",
-                            ng-init="section='admin'", tg-memberships)
-        sidebar.menu-secondary.sidebar(tg-admin-navigation="memberships")
-            include views/modules/admin-menu
-
-        section.main.admin-membership
-            .header-with-actions
-                header
-                    include views/components/mainTitle
-
-                .action-buttons
-                    a.button.button-green(title="Add new member" href="" ng-click="ctrl.addNewMembers()")
-                       span.text + New member
-
-            include views/modules/admin/admin-membership-table
-
-            div.paginator.memberships-paginator
-
-        div.lightbox.lightbox-add-member(tg-lb-create-members)
-            include views/modules/lightbox-add-member

app/partials/admin-project-default-values.jade

@@ -1,21 +0,0 @@
-extends dummy-layout
-
-block head
-    title Taiga  Your agile, free, and open source project management tool
-
-block content
-    div.wrapper(tg-project-default-values, ng-controller="ProjectProfileController as ctrl",
-                ng-init="section='admin'; sectionName='Default values'")
-        sidebar.menu-secondary.sidebar(tg-admin-navigation="project-profile")
-            include views/modules/admin-menu
-
-        sidebar.menu-tertiary.sidebar(tg-admin-navigation="default-values")
-            include views/modules/admin-submenu-project-profile
-
-        section.main.admin-common
-            header
-                include views/components/mainTitle
-
-            p.total Default Values
-
-            include views/modules/admin/default-values

app/partials/admin-project-modules.jade

@@ -1,97 +0,0 @@
-extends dummy-layout
-
-block head
-    title Taiga  Your agile, free, and open source project management tool
-
-block content
-    div.wrapper(tg-project-modules, ng-controller="ProjectProfileController as ctrl",
-                ng-init="section='admin'; sectionName='Modules'")
-        sidebar.menu-secondary.sidebar(tg-admin-navigation="project-profile")
-            include views/modules/admin-menu
-
-        sidebar.menu-tertiary.sidebar(tg-admin-navigation="modules")
-            include views/modules/admin-submenu-project-profile
-
-        section.main.admin-functionalities
-            header
-                include views/components/mainTitle
-
-            form
-                div.functionality(ng-class="{true:'active', false:''}[project.is_backlog_activated]")
-                    div.icon.icon-backlog
-                    div.desc
-                        p
-                            span Backlog
-                            |  Manage your user stories to maintain an organized view of upcoming and prioritized work.
-                        div.activate
-                            input.activate-input(type="checkbox", id="functionality-backlog",
-                                                 ng-model="project.is_backlog_activated")
-                            label.button.button-gray(ng-switch="project.is_backlog_activated",
-                                                     for="functionality-backlog")
-                                span(ng-switch-when="true") Disable
-                                span(ng-switch-when="false") Enable
-
-                div.functionality(ng-class="{true:'active', false:''}[project.is_kanban_activated]")
-                    div.icon.icon-kanban
-                    div.desc
-                        p
-                            span Kanban
-                            |  Organize your project in a lean way with this board.
-                        div.activate
-                            input.activate-input(type="checkbox", id="functionality-kanban",
-                                                 ng-model="project.is_kanban_activated")
-                            label.button.button-gray(ng-switch="project.is_kanban_activated",
-                                                     for="functionality-kanban")
-                                span(ng-switch-when="true") Disable
-                                span(ng-switch-when="false") Enable
-
-                div.functionality(ng-class="{true:'active', false:''}[project.is_issues_activated]")
-                    div.icon.icon-issues
-                    div.desc
-                        p
-                            span Issues
-                            |  Track the bugs, questions and enhancements related to your project. Don't miss anything!
-                        div.activate
-                            input.activate-input(type="checkbox", id="functionality-issues",
-                                                 ng-model="project.is_issues_activated")
-                            label.button.button-gray(ng-switch="project.is_issues_activated",
-                                                     for="functionality-issues")
-                                span(ng-switch-when="true") Disable
-                                span(ng-switch-when="false") Enable
-
-                div.functionality(ng-class="{true:'active', false:''}[project.is_wiki_activated]")
-                    div.icon.icon-wiki
-                    div.desc
-                        p
-                            span Wiki
-                            |  Add, modify, or delete content in collaboration with others. This is the right place for your project documentation.
-                        div.activate
-                            input.activate-input(type="checkbox", id="functionality-wiki",
-                                                 ng-model="project.is_wiki_activated")
-                            label.button.button-gray(ng-switch="project.is_wiki_activated",
-                                                     for="functionality-wiki")
-                                span(ng-switch-when="true") Disable
-                                span(ng-switch-when="false") Enable
-
-                div.functionality(ng-class="{true:'active', false:''}[isVideoconferenceActivated]")
-                    div.icon.icon-video
-                    div.desc
-                        p
-                            span Meet Up
-                            |  Choose your videoconference system. Even developers need face to face contact.
-                        div.activate
-                            input.activate-input(type="checkbox", id="functionality-video",
-                                                 ng-model="isVideoconferenceActivated")
-                            label.button.button-gray(ng-switch="isVideoconferenceActivated",
-                                                     for="functionality-video")
-                                span(ng-switch-when="true") Disable
-                                span(ng-switch-when="false") Enable
-
-                        div.videoconference-attributes.hidden
-                            select(ng-model="project.videoconferences",
-                                   ng-options="e.id as e.name for e in [{'id':'appear-in', 'name':'AppearIn'},{'id':'talky', 'name': 'Talky'}]")
-                                option(value="") Select a videoconference system
-                            input(type="text", ng-model="project.videoconferences_salt",
-                                  placeholder="If you want you can append a salt code to the name of the chat room")
-            button(type="submit", class="hidden")
-            a.button.button-green.submit-button(href="", title="Save") Save

app/partials/admin-project-profile.jade

@@ -1,62 +0,0 @@
-extends dummy-layout
-
-block head
-    title Taiga  Your agile, free, and open source project management tool
-
-block content
-    div.wrapper(tg-project-profile, ng-controller="ProjectProfileController as ctrl",
-                ng-init="section='admin'; sectionName='Project details'")
-        sidebar.menu-secondary.sidebar(tg-admin-navigation="project-profile")
-            include views/modules/admin-menu
-
-        sidebar.menu-tertiary.sidebar(tg-admin-navigation="details")
-            include views/modules/admin-submenu-project-profile
-
-        section.main.project-details
-            header
-                include views/components/mainTitle
-
-            form
-                fieldset
-                    label(for="project-name") Project Name
-                    input(type="text", name="name", placeholder="Project name", id="project-name",
-                          ng-model="project.name", data-required="true", maxlength="45")
-
-                fieldset
-                    label(for="project-slug") Project Slug
-                    input(type="text", name="slug", placeholder="Slug", id="project-slug",
-                          ng-model="project.slug", data-required="true")
-
-                fieldset
-                    label(for="project-sprints") Number of sprints
-                    input(type="number", name="total_milestones", min="0", placeholder="Number of sprints",
-                          id="project-sprints", ng-model="project.total_milestones", data-type="digits")
-
-                fieldset
-                    label(for="total-story-points") Number of US points
-                    input(type="number", name="total_story_points", min="0", placeholder="Number of US points",
-                          id="total-story-points", ng-model="project.total_story_points",
-                          data-type="digits", data-required="true")
-
-                fieldset
-                    label(for="project-description") Description
-                    textarea(name="description", placeholder="Description", id="project-description",
-                             ng-model="project.description", data-required="true")
-
-                tg-privacy-settings-inputs
-                    div.privacy-settings
-                        div
-                            input.hidden(type="radio", disabled="disabled")
-                            label.button(for="public-project") Public Project
-                        div
-                            input.hidden(type="radio", checked="checked", disabled="disabled")
-                            label.button(for="private-project") Private Project
-
-                    p All projects are private during Taiga's beta period.
-
-                button(type="submit", class="hidden")
-                a.button.button-green.submit-button(href="", title="Save") Save
-                a.delete-project(href="", title="Delete this project", ng-click="ctrl.openDeleteLightbox()") Delete this project
-
-    div.lightbox.lightbox-delete-project(tg-lb-delete-project)
-        include views/modules/lightbox-delete-project

app/partials/admin-project-values-issue-priorities.jade

@@ -1,24 +0,0 @@
-extends dummy-layout
-
-block head
-    title Taiga  Your agile, free, and open source project management tool
-
-block content
-    div.wrapper(tg-project-values, ng-controller="ProjectValuesController as ctrl",
-                ng-init="section='admin'; resource='issues'; type='priorities'; sectionName='Issue Priorities'",
-                type="priorities")
-        sidebar.menu-secondary.sidebar(tg-admin-navigation="project-values")
-            include views/modules/admin-menu
-
-        sidebar.menu-tertiary.sidebar(tg-admin-navigation="values-priorities")
-            include views/modules/admin-submenu-project-values
-
-        section.main.admin-common
-            include views/components/mainTitle
-            p.admin-subtitle Specify the priority levels users can assign to issues
-
-            div.project-values-options
-                a.button.button-green.show-add-new(href="", title="Add New")
-                    span Add new priority
-
-            include views/modules/admin/project-types

app/partials/admin-project-values-issue-severities.jade

@@ -1,24 +0,0 @@
-extends dummy-layout
-
-block head
-    title Taiga  Your agile, free, and open source project management tool
-
-block content
-    div.wrapper(tg-project-values, ng-controller="ProjectValuesController as ctrl",
-                ng-init="section='admin'; resource='issues'; type='severities'; sectionName='Issue severities'",
-                type="severities")
-        sidebar.menu-secondary.sidebar(tg-admin-navigation="project-values")
-            include views/modules/admin-menu
-
-        sidebar.menu-tertiary.sidebar(tg-admin-navigation="values-severities")
-            include views/modules/admin-submenu-project-values
-
-        section.main.admin-common
-            include views/components/mainTitle
-            p.admin-subtitle Specify the severity level users can select to classify issues
-
-            div.project-values-options
-                a.button.button-green.show-add-new(href="", title="Add New")
-                    span Add new severity
-
-            include views/modules/admin/project-types

app/partials/admin-project-values-issue-status.jade

@@ -1,24 +0,0 @@
-extends dummy-layout
-
-block head
-    title Taiga  Your agile, free, and open source project management tool
-
-block content
-    div.wrapper(tg-project-values, ng-controller="ProjectValuesController as ctrl",
-                ng-init="section='admin'; resource='issues'; type='issue-statuses'; sectionName='Issue Statuses'",
-                type="issue-statuses")
-        sidebar.menu-secondary.sidebar(tg-admin-navigation="project-values")
-            include views/modules/admin-menu
-
-        sidebar.menu-tertiary.sidebar(tg-admin-navigation="values-issue-status")
-            include views/modules/admin-submenu-project-values
-
-        section.main.admin-common
-            include views/components/mainTitle
-            p.admin-subtitle Specify the column headers that you will use to classify Issues
-
-            div.project-values-options
-                a.button.button-green.show-add-new(href="", title="Add New")
-                    span Add new status
-
-            include views/modules/admin/project-status

app/partials/admin-project-values-issue-types.jade

@@ -1,24 +0,0 @@
-extends dummy-layout
-
-block head
-    title Taiga  Your agile, free, and open source project management tool
-
-block content
-    div.wrapper(tg-project-values, ng-controller="ProjectValuesController as ctrl",
-                ng-init="section='admin'; resource='issues'; type='issue-types'; sectionName='Issue Types'",
-                type="issue-types")
-        sidebar.menu-secondary.sidebar(tg-admin-navigation="project-values")
-            include views/modules/admin-menu
-
-        sidebar.menu-tertiary.sidebar(tg-admin-navigation="values-issue-types")
-            include views/modules/admin-submenu-project-values
-
-        section.main.admin-common
-            include views/components/mainTitle
-            p.admin-subtitle Specify the categories users can select to classify issues
-
-            div.project-values-options
-                a.button.button-green.show-add-new(href="", title="Add New")
-                    span Add new type
-
-            include views/modules/admin/project-types

app/partials/admin-project-values-task-status.jade

@@ -1,24 +0,0 @@
-extends dummy-layout
-
-block head
-    title Taiga  Your agile, free, and open source project management tool
-
-block content
-    div.wrapper(tg-project-values, ng-controller="ProjectValuesController as ctrl",
-                ng-init="section='admin'; resource='tasks'; type='task-statuses'; sectionName='Task Statuses'",
-                type="task-statuses")
-        sidebar.menu-secondary.sidebar(tg-admin-navigation="project-values")
-            include views/modules/admin-menu
-
-        sidebar.menu-tertiary.sidebar(tg-admin-navigation="values-task-status")
-            include views/modules/admin-submenu-project-values
-
-        section.main.admin-common
-            include views/components/mainTitle
-            p.admin-subtitle Specify the column headers that you will use to classify Tasks related to each User Stories
-
-            div.project-values-options
-                a.button.button-green.show-add-new(href="", title="Add New")
-                    span Add new status
-
-            include views/modules/admin/project-status

app/partials/admin-project-values-us-points.jade

@@ -1,30 +0,0 @@
-extends dummy-layout
-
-block head
-    title Taiga  Your agile, free, and open source project management tool
-
-block content
-    div.wrapper(tg-project-values, ng-controller="ProjectValuesController as ctrl",
-                ng-init="section='admin'; resource='userstories'; type='points'; sectionName='Us points'",
-                type="points")
-        sidebar.menu-secondary.sidebar(tg-admin-navigation="project-values")
-            include views/modules/admin-menu
-
-        sidebar.menu-tertiary.sidebar(tg-admin-navigation="values-us-points")
-            include views/modules/admin-submenu-project-values
-
-        section.main.admin-common
-            include views/components/mainTitle
-            p.admin-subtitle Specify the numerical system you will use to indicate the level of difficulty for each User Story
-
-            - var helpLightboxId = "notion-admin-project-values-us-points"
-            include views/components/help-notion-button
-
-            div.project-values-options
-                a.button.button-green.show-add-new(href="", title="Add New")
-                    span Add new point
-
-            include views/modules/admin/project-points
-
-    div.lightbox.lightbox-generic-notion.notion-admin-project-values-us-points(id="notion-admin-project-values-us-points", tg-lb-notion)
-        include views/modules/help-notions/lightbox-notion-admin-project-values-us-points

app/partials/admin-project-values-us-status.jade

@@ -1,24 +0,0 @@
-extends dummy-layout
-
-block head
-    title Taiga  Your agile, free, and open source project management tool
-
-block content
-    div.wrapper(tg-project-values, ng-controller="ProjectValuesController as ctrl",
-                ng-init="section='admin'; resource='userstories'; type='userstory-statuses'; sectionName='Us Statuses'",
-                type="userstory-statuses")
-        sidebar.menu-secondary.sidebar(tg-admin-navigation="project-values")
-            include views/modules/admin-menu
-
-        sidebar.menu-tertiary.sidebar(tg-admin-navigation="values-us-status")
-            include views/modules/admin-submenu-project-values
-
-        section.main.admin-common
-            include views/components/mainTitle
-            p.admin-subtitle Specify the column headers that you will use to classify User Stories
-
-            div.project-values-options
-                a.button.button-green.show-add-new(href="", title="Add New")
-                    span Add new status
-
-            include views/modules/admin/project-us-status

app/partials/admin-roles.jade

@@ -1,40 +0,0 @@
-extends dummy-layout
-
-block head
-    title Taiga  Your agile, free, and open source project management tool
-
-block content
-    div.wrapper.roles(ng-controller="RolesController as ctrl",
-                            ng-init="section='admin'", tg-roles)
-        sidebar.menu-secondary.sidebar(tg-admin-navigation="roles")
-            include views/modules/admin-menu
-        sidebar.menu-tertiary.sidebar
-            include views/modules/admin-submenu-roles
-
-        section.main.admin-roles.admin-common
-            .header-with-actions
-                include views/components/mainTitle
-                .action-buttons
-                    a.button.button-red.delete-role(href="", title="Delete", ng-click="ctrl.delete()") Delete
-
-
-            div(tg-edit-role)
-                .edit-role
-                    input(type="text", value="{{ role.name }}")
-                    a.save.icon.icon-floppy(href="", title="Save")
-
-                p.total
-                    span.role-name(title="{{ role.members_count }} members with this role") {{ role.name }}
-                    a.edit-value.icon.icon-edit
-
-            div.any-computable-role(ng-hide="anyComputableRole") Be careful, no role in your project will be able to estimate the point value for user stories
-
-            div.general-category
-                | When enabled, members assigned to this role will be able to estimate the point value for user stories
-                div.check
-                    input(type="checkbox", ng-model="role.computable", ng-change="ctrl.setComputable()")
-                    div
-                    span.check-text.check-yes Yes
-                    span.check-text.check-no No
-
-            div(tg-role-permissions, ng-model="role")

app/partials/admin-third-parties-bitbucket.jade

@@ -1,40 +0,0 @@
-block head
-    title Taiga  Your agile, free, and open source project management tool
-
-block content
-    div.wrapper.roles(tg-bitbucket-webhooks, ng-controller="BitbucketController as ctrl",
-                            ng-init="section='admin'")
-        sidebar.menu-secondary.sidebar(tg-admin-navigation="third-parties")
-            include views/modules/admin-menu
-        sidebar.menu-tertiary.sidebar(tg-admin-navigation="third-parties-bitbucket")
-            include views/modules/admin-submenu-third-parties
-
-        section.main.admin-common.admin-third-parties
-            include views/components/mainTitle
-
-            form
-                fieldset
-                    label(for="secret-key") Secret key
-                    input(type="text", name="secret-key", ng-model="bitbucket.secret", placeholder="Secret key", id="secret-key")
-
-                fieldset
-                    .select-input-text(tg-select-input-text)
-                        div
-                            label(for="payload-url") Payload URL
-                            .field-with-option
-                                input(type="text", ng-model="bitbucket.webhooks_url", name="payload-url", readonly="readonly", placeholder="Payload URL", id="payload-url")
-                                .option-wrapper.select-input-content
-                                    .icon.icon-copy
-                            .help-copy Copy to clipboard: Ctrl+C
-                            
-                fieldset
-                    label(for="valid-origin-ips") Valid origin ips (separated by ,)
-                    input(type="text", name="valid-origin-ips", tg-valid-origin-ips, ng-model="bitbucket.valid_origin_ips", placeholder="Bitbucket requests are not signed so the best way of verifying the origin is by IP. If the field is empty there will be no IP validation.", id="valid-origin-ips")
-
-                button(type="submit", class="hidden")
-                a.button.button-green.submit-button(href="", title="Save") Save
-
-
-            a.help-button(href="https://taiga.io/support/bitbucket-integration/", target="_blank")
-                span.icon.icon-help
-                span Do you need help? Check out our support page!

app/partials/admin-third-parties-github.jade

@@ -1,36 +0,0 @@
-block head
-    title Taiga  Your agile, free, and open source project management tool
-
-block content
-    div.wrapper.roles(tg-github-webhooks, ng-controller="GithubController as ctrl",
-                            ng-init="section='admin'")
-        sidebar.menu-secondary.sidebar(tg-admin-navigation="third-parties")
-            include views/modules/admin-menu
-        sidebar.menu-tertiary.sidebar(tg-admin-navigation="third-parties-github")
-            include views/modules/admin-submenu-third-parties
-
-        section.main.admin-common.admin-third-parties
-            include views/components/mainTitle
-
-            form
-                fieldset
-                    label(for="secret-key") Secret key
-                    input(type="text", name="secret-key", ng-model="github.secret", placeholder="Secret key", id="secret-key")
-
-                fieldset
-                    .select-input-text(tg-select-input-text)
-                        div
-                            label(for="payload-url") Payload URL
-                            .field-with-option
-                                input(type="text", ng-model="github.webhooks_url", name="payload-url", readonly="readonly", placeholder="Payload URL", id="payload-url")
-                                .option-wrapper.select-input-content
-                                    .icon.icon-copy
-                            .help-copy Copy to clipboard: Ctrl+C
-
-                button(type="submit", class="hidden")
-                a.button.button-green.submit-button(href="", title="Save") Save
-
-
-            a.help-button(href="https://taiga.io/support/github-integration/", target="_blank")
-                span.icon.icon-help
-                span Do you need help? Check out our support page!

app/partials/admin/admin-membership-paginator.jade

@@ -0,0 +1,23 @@
+ul.paginator
+    <% if (showPrevious) { %>
+    li.previous
+        a(href="", class="previous next_prev_button", class="disabled")
+            span(i18next="pagination.prev") Prev
+    <% } %>
+
+    <% _.each(pages, function(item) { %>
+    li(class!="<%- item.classes %>")
+        <% if (item.type === "page") { %>
+        a(href="", data-pagenum!="<%- item.num %>") <%- item.num %></a>
+        <% } else if (item.type === "page-active") { %>
+        span(class="active") <%- item.num %>
+        <% } else { %>
+        span ...
+        <% } %>
+    <% }); %>
+
+    <% if (showNext) { %>
+    li.next
+        a(href="", class="next next_prev_button", class="disabled")
+            span(i18next="pagination.next") Next
+    <% } %>

app/partials/admin/admin-memberships-row-checkbox.jade

@@ -0,0 +1,5 @@
+.check
+    input(type="checkbox", id!="<%- inputId %>")
+    div
+    span.check-text.check-yes Yes
+    span.check-text.check-no No

app/partials/admin/admin-memberships.jade

@@ -0,0 +1,20 @@
+div.wrapper.memberships(ng-controller="MembershipsController as ctrl",
+                        ng-init="section='admin'", tg-memberships)
+    sidebar.menu-secondary.sidebar(tg-admin-navigation="memberships")
+        include ../includes/modules/admin-menu
+
+    section.main.admin-membership
+        .header-with-actions
+            header
+                include ../includes/components/mainTitle
+
+            .action-buttons
+                a.button.button-green(title="Add new member" href="" ng-click="ctrl.addNewMembers()")
+                   span.text + New member
+
+        include ../includes/modules/admin/admin-membership-table
+
+        div.paginator.memberships-paginator
+
+    div.lightbox.lightbox-add-member(tg-lb-create-members)
+        include ../includes/modules/lightbox-add-member

app/partials/admin/admin-project-default-values.jade

@@ -0,0 +1,15 @@
+div.wrapper(tg-project-default-values, ng-controller="ProjectProfileController as ctrl",
+            ng-init="section='admin'; sectionName='Default values'")
+    sidebar.menu-secondary.sidebar(tg-admin-navigation="project-profile")
+        include ../includes/modules/admin-menu
+
+    sidebar.menu-tertiary.sidebar(tg-admin-navigation="default-values")
+        include ../includes/modules/admin-submenu-project-profile
+
+    section.main.admin-common
+        header
+            include ../includes/components/mainTitle
+
+        p.total Default Values
+
+        include ../includes/modules/admin/default-values

app/partials/admin/admin-project-modules.jade

@@ -0,0 +1,91 @@
+div.wrapper(tg-project-modules, ng-controller="ProjectProfileController as ctrl",
+            ng-init="section='admin'; sectionName='Modules'")
+    sidebar.menu-secondary.sidebar(tg-admin-navigation="project-profile")
+        include ../includes/modules/admin-menu
+
+    sidebar.menu-tertiary.sidebar(tg-admin-navigation="modules")
+        include ../includes/modules/admin-submenu-project-profile
+
+    section.main.admin-functionalities
+        header
+            include ../includes/components/mainTitle
+
+        form
+            div.functionality(ng-class="{true:'active', false:''}[project.is_backlog_activated]")
+                div.icon.icon-backlog
+                div.desc
+                    p
+                        span Backlog
+                        |  Manage your user stories to maintain an organized view of upcoming and prioritized work.
+                    div.activate
+                        input.activate-input(type="checkbox", id="functionality-backlog",
+                                             ng-model="project.is_backlog_activated")
+                        label.button.button-gray(ng-switch="project.is_backlog_activated",
+                                                 for="functionality-backlog")
+                            span(ng-switch-when="true") Disable
+                            span(ng-switch-when="false") Enable
+
+            div.functionality(ng-class="{true:'active', false:''}[project.is_kanban_activated]")
+                div.icon.icon-kanban
+                div.desc
+                    p
+                        span Kanban
+                        |  Organize your project in a lean way with this board.
+                    div.activate
+                        input.activate-input(type="checkbox", id="functionality-kanban",
+                                             ng-model="project.is_kanban_activated")
+                        label.button.button-gray(ng-switch="project.is_kanban_activated",
+                                                 for="functionality-kanban")
+                            span(ng-switch-when="true") Disable
+                            span(ng-switch-when="false") Enable
+
+            div.functionality(ng-class="{true:'active', false:''}[project.is_issues_activated]")
+                div.icon.icon-issues
+                div.desc
+                    p
+                        span Issues
+                        |  Track the bugs, questions and enhancements related to your project. Don't miss anything!
+                    div.activate
+                        input.activate-input(type="checkbox", id="functionality-issues",
+                                             ng-model="project.is_issues_activated")
+                        label.button.button-gray(ng-switch="project.is_issues_activated",
+                                                 for="functionality-issues")
+                            span(ng-switch-when="true") Disable
+                            span(ng-switch-when="false") Enable
+
+            div.functionality(ng-class="{true:'active', false:''}[project.is_wiki_activated]")
+                div.icon.icon-wiki
+                div.desc
+                    p
+                        span Wiki
+                        |  Add, modify, or delete content in collaboration with others. This is the right place for your project documentation.
+                    div.activate
+                        input.activate-input(type="checkbox", id="functionality-wiki",
+                                             ng-model="project.is_wiki_activated")
+                        label.button.button-gray(ng-switch="project.is_wiki_activated",
+                                                 for="functionality-wiki")
+                            span(ng-switch-when="true") Disable
+                            span(ng-switch-when="false") Enable
+
+            div.functionality(ng-class="{true:'active', false:''}[isVideoconferenceActivated]")
+                div.icon.icon-video
+                div.desc
+                    p
+                        span Meet Up
+                        |  Choose your videoconference system. Even developers need face to face contact.
+                    div.activate
+                        input.activate-input(type="checkbox", id="functionality-video",
+                                             ng-model="isVideoconferenceActivated")
+                        label.button.button-gray(ng-switch="isVideoconferenceActivated",
+                                                 for="functionality-video")
+                            span(ng-switch-when="true") Disable
+                            span(ng-switch-when="false") Enable
+
+                    div.videoconference-attributes.hidden
+                        select(ng-model="project.videoconferences",
+                               ng-options="e.id as e.name for e in [{'id':'appear-in', 'name':'AppearIn'},{'id':'talky', 'name': 'Talky'}]")
+                            option(value="") Select a videoconference system
+                        input(type="text", ng-model="project.videoconferences_salt",
+                              placeholder="If you want you can append a salt code to the name of the chat room")
+        button(type="submit", class="hidden")
+        a.button.button-green.submit-button(href="", title="Save") Save

app/partials/admin/admin-project-profile.jade

@@ -0,0 +1,56 @@
+div.wrapper(tg-project-profile, ng-controller="ProjectProfileController as ctrl",
+            ng-init="section='admin'; sectionName='Project details'")
+    sidebar.menu-secondary.sidebar(tg-admin-navigation="project-profile")
+        include ../includes/modules/admin-menu
+
+    sidebar.menu-tertiary.sidebar(tg-admin-navigation="details")
+        include ../includes/modules/admin-submenu-project-profile
+
+    section.main.project-details
+        header
+            include ../includes/components/mainTitle
+
+        form
+            fieldset
+                label(for="project-name") Project Name
+                input(type="text", name="name", placeholder="Project name", id="project-name",
+                      ng-model="project.name", data-required="true", maxlength="45")
+
+            fieldset
+                label(for="project-slug") Project Slug
+                input(type="text", name="slug", placeholder="Slug", id="project-slug",
+                      ng-model="project.slug", data-required="true")
+
+            fieldset
+                label(for="project-sprints") Number of sprints
+                input(type="number", name="total_milestones", min="0", placeholder="Number of sprints",
+                      id="project-sprints", ng-model="project.total_milestones", data-type="digits")
+
+            fieldset
+                label(for="total-story-points") Number of US points
+                input(type="number", name="total_story_points", min="0", placeholder="Number of US points",
+                      id="total-story-points", ng-model="project.total_story_points",
+                      data-type="digits", data-required="true")
+
+            fieldset
+                label(for="project-description") Description
+                textarea(name="description", placeholder="Description", id="project-description",
+                         ng-model="project.description", data-required="true")
+
+            tg-privacy-settings-inputs
+                div.privacy-settings
+                    div
+                        input.hidden(type="radio", disabled="disabled")
+                        label.button(for="public-project") Public Project
+                    div
+                        input.hidden(type="radio", checked="checked", disabled="disabled")
+                        label.button(for="private-project") Private Project
+
+                p All projects are private during Taiga's beta period.
+
+            button(type="submit", class="hidden")
+            a.button.button-green.submit-button(href="", title="Save") Save
+            a.delete-project(href="", title="Delete this project", ng-click="ctrl.openDeleteLightbox()") Delete this project
+
+div.lightbox.lightbox-delete-project(tg-lb-delete-project)
+    include ../includes/modules/lightbox-delete-project

app/partials/admin/admin-project-values-issue-priorities.jade

@@ -0,0 +1,18 @@
+div.wrapper(tg-project-values, ng-controller="ProjectValuesController as ctrl",
+            ng-init="section='admin'; resource='issues'; type='priorities'; sectionName='Issue Priorities'",
+            type="priorities")
+    sidebar.menu-secondary.sidebar(tg-admin-navigation="project-values")
+        include ../includes/modules/admin-menu
+
+    sidebar.menu-tertiary.sidebar(tg-admin-navigation="values-priorities")
+        include ../includes/modules/admin-submenu-project-values
+
+    section.main.admin-common
+        include ../includes/components/mainTitle
+        p.admin-subtitle Specify the priority levels users can assign to issues
+
+        div.project-values-options
+            a.button.button-green.show-add-new(href="", title="Add New")
+                span Add new priority
+
+        include ../includes/modules/admin/project-types

app/partials/admin/admin-project-values-issue-severities.jade

@@ -0,0 +1,18 @@
+div.wrapper(tg-project-values, ng-controller="ProjectValuesController as ctrl",
+            ng-init="section='admin'; resource='issues'; type='severities'; sectionName='Issue severities'",
+            type="severities")
+    sidebar.menu-secondary.sidebar(tg-admin-navigation="project-values")
+        include ../includes/modules/admin-menu
+
+    sidebar.menu-tertiary.sidebar(tg-admin-navigation="values-severities")
+        include ../includes/modules/admin-submenu-project-values
+
+    section.main.admin-common
+        include ../includes/components/mainTitle
+        p.admin-subtitle Specify the severity level users can select to classify issues
+
+        div.project-values-options
+            a.button.button-green.show-add-new(href="", title="Add New")
+                span Add new severity
+
+        include ../includes/modules/admin/project-types

app/partials/admin/admin-project-values-issue-status.jade

@@ -0,0 +1,18 @@
+div.wrapper(tg-project-values, ng-controller="ProjectValuesController as ctrl",
+            ng-init="section='admin'; resource='issues'; type='issue-statuses'; sectionName='Issue Statuses'",
+            type="issue-statuses")
+    sidebar.menu-secondary.sidebar(tg-admin-navigation="project-values")
+        include ../includes/modules/admin-menu
+
+    sidebar.menu-tertiary.sidebar(tg-admin-navigation="values-issue-status")
+        include ../includes/modules/admin-submenu-project-values
+
+    section.main.admin-common
+        include ../includes/components/mainTitle
+        p.admin-subtitle Specify the column headers that you will use to classify Issues
+
+        div.project-values-options
+            a.button.button-green.show-add-new(href="", title="Add New")
+                span Add new status
+
+        include ../includes/modules/admin/project-status

app/partials/admin/admin-project-values-issue-types.jade

@@ -0,0 +1,18 @@
+div.wrapper(tg-project-values, ng-controller="ProjectValuesController as ctrl",
+            ng-init="section='admin'; resource='issues'; type='issue-types'; sectionName='Issue Types'",
+            type="issue-types")
+    sidebar.menu-secondary.sidebar(tg-admin-navigation="project-values")
+        include ../includes/modules/admin-menu
+
+    sidebar.menu-tertiary.sidebar(tg-admin-navigation="values-issue-types")
+        include ../includes/modules/admin-submenu-project-values
+
+    section.main.admin-common
+        include ../includes/components/mainTitle
+        p.admin-subtitle Specify the categories users can select to classify issues
+
+        div.project-values-options
+            a.button.button-green.show-add-new(href="", title="Add New")
+                span Add new type
+
+        include ../includes/modules/admin/project-types

app/partials/admin/admin-project-values-task-status.jade

@@ -0,0 +1,18 @@
+div.wrapper(tg-project-values, ng-controller="ProjectValuesController as ctrl",
+            ng-init="section='admin'; resource='tasks'; type='task-statuses'; sectionName='Task Statuses'",
+            type="task-statuses")
+    sidebar.menu-secondary.sidebar(tg-admin-navigation="project-values")
+        include ../includes/modules/admin-menu
+
+    sidebar.menu-tertiary.sidebar(tg-admin-navigation="values-task-status")
+        include ../includes/modules/admin-submenu-project-values
+
+    section.main.admin-common
+        include ../includes/components/mainTitle
+        p.admin-subtitle Specify the column headers that you will use to classify Tasks related to each User Stories
+
+        div.project-values-options
+            a.button.button-green.show-add-new(href="", title="Add New")
+                span Add new status
+
+        include ../includes/modules/admin/project-status

app/partials/admin/admin-project-values-us-points.jade

@@ -0,0 +1,24 @@
+div.wrapper(tg-project-values, ng-controller="ProjectValuesController as ctrl",
+            ng-init="section='admin'; resource='userstories'; type='points'; sectionName='Us points'",
+            type="points")
+    sidebar.menu-secondary.sidebar(tg-admin-navigation="project-values")
+        include ../includes/modules/admin-menu
+
+    sidebar.menu-tertiary.sidebar(tg-admin-navigation="values-us-points")
+        include ../includes/modules/admin-submenu-project-values
+
+    section.main.admin-common
+        include ../includes/components/mainTitle
+        p.admin-subtitle Specify the numerical system you will use to indicate the level of difficulty for each User Story
+
+        - var helpLightboxId = "notion-admin-project-values-us-points"
+        include ../includes/components/help-notion-button
+
+        div.project-values-options
+            a.button.button-green.show-add-new(href="", title="Add New")
+                span Add new point
+
+        include ../includes/modules/admin/project-points
+
+div.lightbox.lightbox-generic-notion.notion-admin-project-values-us-points(id="notion-admin-project-values-us-points", tg-lb-notion)
+    include ../includes/modules/help-notions/lightbox-notion-admin-project-values-us-points

app/partials/admin/admin-project-values-us-status.jade

@@ -0,0 +1,18 @@
+div.wrapper(tg-project-values, ng-controller="ProjectValuesController as ctrl",
+            ng-init="section='admin'; resource='userstories'; type='userstory-statuses'; sectionName='Us Statuses'",
+            type="userstory-statuses")
+    sidebar.menu-secondary.sidebar(tg-admin-navigation="project-values")
+        include ../includes/modules/admin-menu
+
+    sidebar.menu-tertiary.sidebar(tg-admin-navigation="values-us-status")
+        include ../includes/modules/admin-submenu-project-values
+
+    section.main.admin-common
+        include ../includes/components/mainTitle
+        p.admin-subtitle Specify the column headers that you will use to classify User Stories
+
+        div.project-values-options
+            a.button.button-green.show-add-new(href="", title="Add New")
+                span Add new status
+
+        include ../includes/modules/admin/project-us-status

app/partials/admin/admin-roles.jade

@@ -0,0 +1,34 @@
+div.wrapper.roles(ng-controller="RolesController as ctrl",
+                        ng-init="section='admin'", tg-roles)
+    sidebar.menu-secondary.sidebar(tg-admin-navigation="roles")
+        include ../includes/modules/admin-menu
+    sidebar.menu-tertiary.sidebar
+        include ../includes/modules/admin-submenu-roles
+
+    section.main.admin-roles.admin-common
+        .header-with-actions
+            include ../includes/components/mainTitle
+            .action-buttons
+                a.button.button-red.delete-role(href="", title="Delete", ng-click="ctrl.delete()") Delete
+
+
+        div(tg-edit-role)
+            .edit-role
+                input(type="text", value="{{ role.name }}")
+                a.save.icon.icon-floppy(href="", title="Save")
+
+            p.total
+                span.role-name(title="{{ role.members_count }} members with this role") {{ role.name }}
+                a.edit-value.icon.icon-edit
+
+        div.any-computable-role(ng-hide="anyComputableRole") Be careful, no role in your project will be able to estimate the point value for user stories
+
+        div.general-category
+            | When enabled, members assigned to this role will be able to estimate the point value for user stories
+            div.check
+                input(type="checkbox", ng-model="role.computable", ng-change="ctrl.setComputable()")
+                div
+                span.check-text.check-yes Yes
+                span.check-text.check-no No
+
+        div(tg-role-permissions, ng-model="role")

app/partials/admin/admin-third-parties-bitbucket.jade

@@ -0,0 +1,36 @@
+div.wrapper.roles(tg-bitbucket-webhooks, ng-controller="BitbucketController as ctrl",
+                        ng-init="section='admin'")
+    sidebar.menu-secondary.sidebar(tg-admin-navigation="third-parties")
+        include ../includes/modules/admin-menu
+    sidebar.menu-tertiary.sidebar(tg-admin-navigation="third-parties-bitbucket")
+        include ../includes/modules/admin-submenu-third-parties
+
+    section.main.admin-common.admin-third-parties
+        include ../includes/components/mainTitle
+
+        form
+            fieldset
+                label(for="secret-key") Secret key
+                input(type="text", name="secret-key", ng-model="bitbucket.secret", placeholder="Secret key", id="secret-key")
+
+            fieldset
+                .select-input-text(tg-select-input-text)
+                    div
+                        label(for="payload-url") Payload URL
+                        .field-with-option
+                            input(type="text", ng-model="bitbucket.webhooks_url", name="payload-url", readonly="readonly", placeholder="Payload URL", id="payload-url")
+                            .option-wrapper.select-input-content
+                                .icon.icon-copy
+                        .help-copy Copy to clipboard: Ctrl+C
+
+            fieldset
+                label(for="valid-origin-ips") Valid origin ips (separated by ,)
+                input(type="text", name="valid-origin-ips", tg-valid-origin-ips, ng-model="bitbucket.valid_origin_ips", placeholder="Bitbucket requests are not signed so the best way of verifying the origin is by IP. If the field is empty there will be no IP validation.", id="valid-origin-ips")
+
+            button(type="submit", class="hidden")
+            a.button.button-green.submit-button(href="", title="Save") Save
+
+
+        a.help-button(href="https://taiga.io/support/bitbucket-integration/", target="_blank")
+            span.icon.icon-help
+            span Do you need help? Check out our support page!

app/partials/admin/admin-third-parties-github.jade

@@ -0,0 +1,32 @@
+div.wrapper.roles(tg-github-webhooks, ng-controller="GithubController as ctrl",
+                        ng-init="section='admin'")
+    sidebar.menu-secondary.sidebar(tg-admin-navigation="third-parties")
+        include ../includes/modules/admin-menu
+    sidebar.menu-tertiary.sidebar(tg-admin-navigation="third-parties-github")
+        include ../includes/modules/admin-submenu-third-parties
+
+    section.main.admin-common.admin-third-parties
+        include ../includes/components/mainTitle
+
+        form
+            fieldset
+                label(for="secret-key") Secret key
+                input(type="text", name="secret-key", ng-model="github.secret", placeholder="Secret key", id="secret-key")
+
+            fieldset
+                .select-input-text(tg-select-input-text)
+                    div
+                        label(for="payload-url") Payload URL
+                        .field-with-option
+                            input(type="text", ng-model="github.webhooks_url", name="payload-url", readonly="readonly", placeholder="Payload URL", id="payload-url")
+                            .option-wrapper.select-input-content
+                                .icon.icon-copy
+                        .help-copy Copy to clipboard: Ctrl+C
+
+            button(type="submit", class="hidden")
+            a.button.button-green.submit-button(href="", title="Save") Save
+
+
+        a.help-button(href="https://taiga.io/support/github-integration/", target="_blank")
+            span.icon.icon-help
+            span Do you need help? Check out our support page!

app/partials/admin/admin-third-parties-gitlab.jade

@@ -5,12 +5,12 @@ block content
     div.wrapper.roles(tg-gitlab-webhooks, ng-controller="GitlabController as ctrl",
                             ng-init="section='admin'")
         sidebar.menu-secondary.sidebar(tg-admin-navigation="third-parties")
-            include views/modules/admin-menu
+            include ../includes/modules/admin-menu
         sidebar.menu-tertiary.sidebar(tg-admin-navigation="third-parties-gitlab")
-            include views/modules/admin-submenu-third-parties
+            include ../includes/modules/admin-submenu-third-parties
 
         section.main.admin-common.admin-third-parties
-            include views/components/mainTitle
+            include ../includes/components/mainTitle
 
             form
                 fieldset

app/partials/admin/memberships-row-avatar.jade

@@ -0,0 +1,5 @@
+figure.avatar
+    img(src!="<%- imgurl %>", alt!="<%- full_name %>")
+    figcaption
+        span.name <%- full_name %>
+        span.email <%- email %>

app/partials/attachment/attachment-edit.jade

@@ -0,0 +1,19 @@
+.attachment-name
+    span.icon.icon-document
+    a(href!="<%- url %>", title!="<%- name %> uploaded on <%- created_date %>", target="_blank")
+        | <%- name %>
+.attachment-size
+    span <%- size %>
+
+.editable.editable-attachment-comment
+    input(type="text", name="description", maxlength="140",
+        value!="<%- description %>", placeholder="Type a short description")
+
+.editable.editable-attachment-deprecated
+    input(type="checkbox", name="is-deprecated",
+        id!="attach-<%- id %>-is-deprecated")
+    label(for!="attach-<%- id %>-is-deprecated") Deprecated?
+
+.attachment-settings
+    a.editable-settings.icon.icon-floppy(href="", title="Save")
+    a.editable-settings.icon.icon-delete(href="", title="Cancel")

app/partials/attachment/attachment.jade

@@ -0,0 +1,19 @@
+.attachment-name
+    a(href!="<%- url %>", title!="<%- name %> uploaded on <%- created_date %>", target="_blank")
+        span.icon.icon-documents
+        span <%- name %>
+.attachment-size
+    span <%- size %>
+
+.attachment-comments
+    <% if (isDeprecated){ %>
+    span.deprecated-file (deprecated)
+    <% } %>
+    span <%- description %>
+
+<% if (modifyPermission) {%>
+.attachment-settings
+    a.settings.icon.icon-edit(href="", title="Edit")
+    a.settings.icon.icon-delete(href="", title="Delete")
+    a.settings.icon.icon-drag-v(href="", title="Drag")
+<% } %>

app/partials/attachment/attachments.jade

@@ -0,0 +1,30 @@
+section.attachments
+    .attachments-header
+        h3.attachments-title
+            span.attachments-num(tg-bind-html="ctrl.attachmentsCount")
+            span.attachments-text attachments
+        .add-attach(tg-check-permission!="modify_<%- type %>", title!="Add new attachment. <%- maxFileSizeMsg %>")
+            <% if (maxFileSize){ %>
+            span.size-info.hidden [Max. size:  <%- maxFileSize %>]
+            <% }; %>
+            label(for="add-attach", class="icon icon-plus related-tasks-buttons")
+            input(id="add-attach", type="file", multiple="multiple")
+
+    .attachment-body.sortable
+        .single-attachment(ng-repeat="attach in ctrl.attachments|filter:ctrl.filterAttachments track by attach.id" tg-attachment="attach")
+
+        .single-attachment(ng-repeat="file in ctrl.uploadingAttachments")
+            .attachment-name
+                a(href="", tg-bo-title="file.name", tg-bo-bind="file.name")
+            .attachment-size
+                span.attachment-size(tg-bo-bind="file.size")
+            .attachment-comments
+                span(ng-bind="file.progressMessage")
+                .percentage(ng-style="{'width': file.progressPercent}")
+
+        a.more-attachments(href="", title="show deprecated atachments", ng-if="ctrl.deprecatedAttachmentsCount > 0")
+            span.text(data-type="show") + show deprecated atachments
+            span.text.hidden(data-type="hide")
+                | - hide deprecated atachments
+            span.more-attachments-num
+                | ({{ctrl.deprecatedAttachmentsCount }} deprecated)

app/partials/auth/change-password-from-recovery.jade

@@ -0,0 +1,8 @@
+div.wrapper
+    div.login-main
+        div.login-container
+            h1.logo
+                img.logo-svg(src="/svg/logo.svg", alt="TAIGA")
+            p.tagline Your agile, free, and open source project management tool
+
+            include ../includes/modules/change-password-from-recovery-form

app/partials/auth/forgot-password.jade

@@ -0,0 +1,9 @@
+include ../includes/components/beta
+div.wrapper
+    div.login-main
+        div.login-container
+            img.logo-svg(src="/svg/logo.svg", alt="TAIGA")
+            h1.logo Taiga
+            h2.tagline LOVE YOUR PROJECT
+
+            include ../includes/modules/forgot-form

app/partials/auth/invitation.jade

@@ -0,0 +1,16 @@
+div.wrapper
+    div.invitation-main
+        div.invitation-container(tg-invitation)
+            figure.avatar
+                a(href="", tg-bo-title="invitation.invited_by.full_name_display")
+                    img.avatar(tg-bo-src="invitation.invited_by.photo",
+                               tg-bo-alt="invitation.invited_by.full_name_display")
+                span.person-name(tg-bo-bind="invitation.invited_by.full_name_display")
+
+            span.invitation-text
+                p has invited you to join the project
+                p.project-name(tg-bo-bind="invitation.project_name")
+
+            div.invitation-form
+                include ../includes/modules/invitation-login-form
+                include ../includes/modules/invitation-register-form

app/partials/auth/login-text.jade

@@ -0,0 +1,3 @@
+p.login-text
+    span Not registered yet?
+    a(href='<%- url %>', tg-nav='register', title='Register')  create your free account here

app/partials/auth/login.jade

@@ -0,0 +1,9 @@
+include ../includes/components/beta
+div.wrapper
+    div.login-main
+        div.login-container
+            img.logo-svg(src="/svg/logo.svg", alt="TAIGA")
+            h1.logo Taiga
+            h2.tagline LOVE YOUR PROJECT
+
+            include ../includes/modules/login-form

app/partials/auth/register.jade

@@ -0,0 +1,8 @@
+div.wrapper
+    div.login-main
+        div.login-container
+            img.logo-svg(src="/svg/logo.svg", alt="TAIGA")
+            h1.logo Taiga
+            h2.tagline LOVE YOUR PROJECT
+
+            include ../includes/modules/register-form

app/partials/backlog.jade

@@ -1,45 +0,0 @@
-extends dummy-layout
-
-block head
-    title Taiga  Your agile, free, and open source project management tool
-
-block content
-    div.wrapper(tg-backlog, ng-controller="BacklogController as ctrl",
-                ng-init="section='backlog'")
-        sidebar.menu-secondary.extrabar.filters-bar(tg-backlog-filters)
-            include views/modules/backlog-filters
-        section.main.backlog
-            include views/components/mainTitle
-            include views/components/summary
-            div.graphics-container.burndown-container
-                div.burndown(tg-gm-backlog-graph)
-                    include views/modules/burndown
-            div.backlog-menu
-                a.trans-button.move-to-current-sprint(href="", title="Move to Current Sprint",
-                                                      id="move-to-current-sprint")
-                    span.icon.icon-move
-                    span.text Move to current Sprint
-                a.trans-button(href="", title="Show Filters", id="show-filters-button")
-                    span.icon.icon-filter
-                    span.text Show Filters
-                a.trans-button(href="", title="Show Tags", id="show-tags")
-                    span.icon.icon-tag
-                    span.text Show Tags
-                include views/components/addnewus
-            section.backlog-table(ng-class="{'hidden': !visibleUserstories.length}")
-                include views/modules/backlog-table
-            div.empty.empty-backlog(ng-class="{'hidden': visibleUserstories.length}", tg-backlog-empty-sortable)
-                span.icon.icon-backlog
-                span.title Your backlog is empty!
-                a(href="", title+"Create a new US", ng-click="ctrl.addNewUs('standard')", tg-check-permission="add_us") You may want to create a new user story
-        sidebar.menu-secondary.sidebar
-            include views/modules/sprints
-
-        div.lightbox.lightbox-generic-form(tg-lb-create-edit-userstory)
-            include views/modules/lightbox-us-create-edit
-
-        div.lightbox.lightbox-generic-bulk(tg-lb-create-bulk-userstories)
-            include views/modules/lightbox-us-bulk
-
-        div.lightbox.lightbox-sprint-add-edit(tg-lb-create-edit-sprint)
-            include views/modules/lightbox-sprint-add-edit

app/partials/backlog/backlog.jade

@@ -0,0 +1,39 @@
+div.wrapper(tg-backlog, ng-controller="BacklogController as ctrl",
+            ng-init="section='backlog'")
+    sidebar.menu-secondary.extrabar.filters-bar(tg-backlog-filters)
+        include ../includes/modules/backlog-filters
+    section.main.backlog
+        include ../includes/components/mainTitle
+        include ../includes/components/summary
+        div.graphics-container.burndown-container
+            div.burndown(tg-gm-backlog-graph)
+                include ../includes/modules/burndown
+        div.backlog-menu
+            a.trans-button.move-to-current-sprint(href="", title="Move to Current Sprint",
+                                                  id="move-to-current-sprint")
+                span.icon.icon-move
+                span.text Move to current Sprint
+            a.trans-button(href="", title="Show Filters", id="show-filters-button")
+                span.icon.icon-filter
+                span.text Show Filters
+            a.trans-button(href="", title="Show Tags", id="show-tags")
+                span.icon.icon-tag
+                span.text Show Tags
+            include ../includes/components/addnewus
+        section.backlog-table(ng-class="{'hidden': !visibleUserstories.length}")
+            include ../includes/modules/backlog-table
+        div.empty.empty-backlog(ng-class="{'hidden': visibleUserstories.length}", tg-backlog-empty-sortable)
+            span.icon.icon-backlog
+            span.title Your backlog is empty!
+            a(href="", title+"Create a new US", ng-click="ctrl.addNewUs('standard')", tg-check-permission="add_us") You may want to create a new user story
+    sidebar.menu-secondary.sidebar
+        include ../includes/modules/sprints
+
+    div.lightbox.lightbox-generic-form(tg-lb-create-edit-userstory)
+        include ../includes/modules/lightbox-us-create-edit
+
+    div.lightbox.lightbox-generic-bulk(tg-lb-create-bulk-userstories)
+        include ../includes/modules/lightbox-us-bulk
+
+    div.lightbox.lightbox-sprint-add-edit(tg-lb-create-edit-sprint)
+        include ../includes/modules/lightbox-sprint-add-edit

app/partials/backlog/filter-selected.jade

@@ -0,0 +1,6 @@
+<% _.each(filters, function(f) { %>
+a.single-filter.selected(data-type!="<%- f.type %>", data-id!="<%- f.id %>")
+    span.name(style!="<%- f.style %>")
+        | <%- f.name %>
+    span.icon.icon-delete
+<% }) %>

app/partials/backlog/filters.jade

@@ -0,0 +1,13 @@
+<% _.each(filters, function(f) { %>
+<% if (f.selected) { %>
+a.single-filter.active(data-type!="<%- f.type %>", data-id!="<%- f.id %>")
+    span.name(style!="<%- f.style %>")
+        | <%- f.name %>
+    span.number <%- f.count %>
+<% } else { %>
+a.single-filter(data-type!="<%- f.type %>", data-id!="<%- f.id %>")
+    span.name(style!="<%- f.style %>")
+        | <%- f.name %>
+    span.number <%- f.count %>
+<% } %>
+<% }) %>

app/partials/backlog/progress-bar.jade

@@ -0,0 +1,3 @@
+.defined-points(title="Excess of points")
+.project-points-progress(title="Pending Points", style!="width: <%- projectPointsPercentaje %>%")
+.closed-points-progress(title="Closed points", style!="width: <%- closedPointsPercentaje %>%")

app/partials/backlog/sprint-header.jade

@@ -0,0 +1,20 @@
+.sprint-name
+    a.icon.icon-arrow-up(href="", title="Compact Sprint")
+    <% if(isVisible){ %>
+    a(href!="<%- taskboardUrl %>", title!="'Go to the taskboard of '<%- name %>'")
+        span <%- name %>
+    <% } %>
+
+    <% if(isEditable){ %>
+    a.icon.icon-edit(href="", title="Edit Sprint")
+    <% } %>
+
+.sprint-summary
+    .sprint-date <%- estimatedDateRange %>
+    ul
+        li
+            span.number <%- closedPoints %>
+            span.description closed
+        li
+            span.number <%- totalPoints %>
+            span.description total

app/partials/backlog/us-points-popover.jade

@@ -0,0 +1,11 @@
+ul.popover.pop-points-open
+    <% _.each(points, function(point) { %>
+    li
+        <% if (point.selected) { %>
+        a.point(href="", title!="<%- point.name %>", data-point-id!="<%- point.id %>")
+            | <%- point.name %>
+        <% } else { %>
+        a.point.active(href="", title!="<%- point.name %>", data-point-id!="<%- point.id %>")
+            | <%- point.name %>
+        <% } %>
+    <% }); %>

app/partials/backlog/us-points-roles-popover.jade

@@ -0,0 +1,6 @@
+ul.popover.pop-role
+    <% _.each(roles, function(role) { %>
+    li
+        a.role(href="", title!="<%- role.name %>", data-role-id="<%- role.id %>")
+            |<%- role.name %> (<%- role.points %>)
+    <% }); %>

app/partials/backlog/us-role-points-popover.jade

@@ -0,0 +1,8 @@
+ul.popover.pop-role
+    li
+        a.clear-selection(href="", title="All") All
+    <% _.each(roles, function(role) { %>
+    li
+        a(href="", class="role", title!="<%- role.name %>", data-role-id!="<%- role.id %>")
+            | <%- role.name %>
+    <% }); %>

app/partials/cancel-account.jade

@@ -1,14 +0,0 @@
-extends dummy-layout
-
-block head
-    title Taiga  Your agile, free, and open source project management tool
-
-block content
-    div.wrapper
-        div.login-main
-            div.login-container
-                h1.logo
-                    img.logo-svg(src="/svg/logo.svg", alt="TAIGA")
-                p.tagline Your agile, free, and open source project management tool
-
-                include views/modules/cancel-account-form

app/partials/change-email.jade

@@ -1,14 +0,0 @@
-extends dummy-layout
-
-block head
-    title Taiga  Your agile, free, and open source project management tool
-
-block content
-    div.wrapper
-        div.login-main
-            div.login-container
-                h1.logo
-                    img.logo-svg(src="/svg/logo.svg", alt="TAIGA")
-                p.tagline Your agile, free, and open source project management tool
-
-                include views/modules/change-email-form

app/partials/change-password-from-recovery.jade

@@ -1,14 +0,0 @@
-extends dummy-layout
-
-block head
-    title Taiga  Your agile, free, and open source project management tool
-
-block content
-    div.wrapper
-        div.login-main
-            div.login-container
-                h1.logo
-                    img.logo-svg(src="/svg/logo.svg", alt="TAIGA")
-                p.tagline Your agile, free, and open source project management tool
-
-                include views/modules/change-password-from-recovery-form

app/partials/common/components/assigned-to.jade

@@ -0,0 +1,21 @@
+<% if (assignedTo) { %>
+.user-avatar
+    img(src!="<%- assignedTo.photo %>", alt!="<%- assignedTo.full_name_display %>")
+<% } %>
+
+.assigned-to
+    span.assigned-title Assigned to
+
+    a(href="" title="edit assignment", class!="user-assigned <% if(isEditable){ %>editable<% }; %>")
+        span.assigned-name
+        <% if (assignedTo) { %>
+        <%- assignedTo.full_name_display %>
+        <% } else { %>
+        | Not assigned
+        <% } %>
+        <% if(isEditable){ %>
+        span.icon.icon-arrow-bottom
+        <% }; %>
+    <% if (assignedTo!==null && isEditable) { %>
+    a.icon.icon-delete(href="" title="delete assignment")
+    <% } %>

app/partials/common/components/block-button.jade

@@ -0,0 +1,2 @@
+a(href="#", class="button button-gray item-block") Block
+a(href="#", class="button button-red item-unblock") Unblock

app/partials/common/components/created-by.jade

@@ -0,0 +1,8 @@
+.user-avatar
+    img(src!="<%- owner.photo %>", alt!="<%- owner.full_name_display %>")
+
+.created-by
+    span.created-title
+      | Created by <%- owner.full_name_display %>
+    span.created-date
+      | <%- date %>

app/partials/common/components/delete-button.jade

@@ -0,0 +1 @@
+a(href="", class="button button-red") Delete

app/partials/common/components/editable-description-msg-edit-mode.jade

@@ -0,0 +1,2 @@
+p.no-description.editable
+    | Empty space is so boring... go on be descriptive... A rose by any other name would smell as sweet...

app/partials/common/components/editable-description-msg-read-mode.jade

@@ -0,0 +1 @@
+p.no-description No description yet.

app/partials/common/components/editable-description.jade

@@ -0,0 +1,11 @@
+.view-description
+    section.us-content.wysiwyg(tg-bind-html="item.description_html || noDescriptionMsg")
+    span.edit.icon.icon-edit
+
+.edit-description
+    textarea(placeholder="Empty space is so boring... go on be descriptive... A rose by any other name would smell as sweet...", ng-model="item.description", tg-markitup="tg-markitup")
+    a.help-markdown(href="https://taiga.io/support/taiga-markdown-syntax/", target="_blank", title="Mardown syntax help")
+        span.icon.icon-help
+        span Markdown syntax help
+    span.save-container
+        a.save.icon.icon-floppy(href="", title="Save")

app/partials/common/components/editable-subject.jade

@@ -0,0 +1,7 @@
+.view-subject
+    | {{ item.subject }}
+    a.edit.icon.icon-edit(href="" title="Edit")
+.edit-subject
+    input(type="text", ng-model="item.subject", data-required="true", data-maxlength="500")
+    span.save-container
+        a.save.icon.icon-floppy(href="", title="Save")

app/partials/common/components/level.jade

@@ -0,0 +1 @@
+div.level

app/partials/common/components/list-item-assigned-to-avatar.jade

@@ -0,0 +1,3 @@
+figure.avatar
+    img(src!="<%- imgurl %>", alt!="<%- name %>")
+    figcaption <%- name %>

app/partials/common/components/main-title.jade

@@ -0,0 +1,2 @@
+span.project-name <%- projectName %>
+span.green <%- sectionName %>

app/partials/common/components/progress-bar.jade

@@ -0,0 +1 @@
+.current-progress(style!="width: <%- percentage %>%")

app/partials/common/components/status-display.jade

@@ -0,0 +1,9 @@
+span
+    <% if (status.is_closed) { %>
+    | Closed
+    <% } else { %>
+    | Open
+    <% } %>
+
+span(class="us-detail-status", style!="color:<%- status.color %>")
+    | <%- status.name %>

app/partials/common/components/watchers.jade

@@ -0,0 +1,23 @@
+<% if(isEditable){ %>
+.watchers-header
+    span.title watchers
+    a.icon.icon-plus.add-watcher(href="", title="Add watcher")
+<% } else if(watchers.length > 0){ %>
+.watchers-header
+    span.title watchers
+<% }; %>
+
+<% _.each(watchers, function(watcher) { %>
+<% if(watcher) { %>
+.watcher-single
+    .watcher-avatar
+        span.avatar(title!="<%- watcher.full_name_display %>")
+            img(src!="<%- watcher.photo %>" alt!="<%- watcher.full_name_display %>")
+    .watcher-name
+        span <%- watcher.full_name_display %>
+
+        <% if(isEditable){ %>
+        a.icon.icon-delete(data-watcher-id!="<%- watcher.id %>" href="" title="delete-watcher")
+        <% }; %>
+<% } %>
+<% }); %>

app/partials/common/estimation/lb-us-estimation-points-per-role.jade

@@ -0,0 +1,9 @@
+ul.points-per-role
+  li.total
+    span.points <%- totalPoints %>
+    span.role total
+  <% _.each(roles, function(role) { %>
+  li.total.clickable(data-role-id!="<%- role.id %>")
+    span.points <%- role.points %>
+    span.role <%- role.name %>
+  <% }); %>

app/partials/common/estimation/lb-us-estimation-points.jade

@@ -0,0 +1,13 @@
+ul.popover.pop-points-open
+    <% _.each(points, function(point) { %>
+    li
+        <% if (point.selected) { %>
+        a(href="", class="point", title!="<%- point.name %>",
+           data-point-id!="<%- point.id %>", data-role-id!="<%- roleId %>")
+            | <%- point.name %>
+        <% } else { %>
+        a(href="", class="point active", title!="<%- point.name %>",
+           data-point-id!="<%- point.id %>" data-role-id!="<%- roleId %>")
+            | <%- point.name %>
+        <% } %>
+    <% }); %>

app/partials/common/estimation/us-estimation-points-per-role.jade

@@ -0,0 +1,9 @@
+ul.points-per-role
+    li.total
+        span.points <%- totalPoints %>
+        span.role total
+    <% _.each(roles, function(role) { %>
+    li(class!="total <% if(editable){ %>clickable<% } %>", data-role-id!="<%- role.id %>")
+        span.points <%- role.points %>
+        span.role <%- role.name %>
+    <% }); %>

app/partials/common/estimation/us-estimation-points.jade

@@ -0,0 +1,13 @@
+ul.popover.pop-points-open
+    <% _.each(points, function(point) { %>
+    li
+        <% if (point.selected) { %>
+        a(href="", class="point", title!="<%- point.name %>",
+           data-point-id!="<%- point.id %>", data-role-id!="<%- roleId %>")
+            | <%- point.name %>
+        <% } else { %>
+        a(href="", class="point active", title!="<%- point.name %>",
+           data-point-id!="<%- point.id %>", data-role-id!="<%- roleId %>")
+            | <%- point.name %>
+        <% } %>
+    <% }); %>