Factor out filters and sorts

client/views/main.html

@@ -22,32 +22,8 @@
 					{{>newTaskForm}}
 					<div class="row" id="filters">
 					<hr>
-						<div class="col-xs-6 text-left dropdown">
-							<a href="#" data-toggle="dropdown">Filter: Uncompleted</a>
-							<ul class="dropdown-menu" role="menu" arial-labelledby="dLabel">
-								<li><a href="#">Uncompleted</a></li>
-								<li><a href="#">Not in my lists</a></li>
-								<li><a href="#">Due today</a></li>
-								<li><a href="#">Due soon</a></li>
-								<li><a href="#">Overdue</a></li>
-								<li><a href="#">Repeating</a></li>
-								<li><a href="#">Completed</a></li>
-								<li><a href="#">Everything</a></li>
-							</ul>
-						</div>
-						<div class="col-xs-6 text-right dropdown">
-							<a href="#" data-toggle="dropdown">Sort by: Auto</a>
-							<ul class="dropdown-menu pull-right" role="menu">
-								<li><a href="#">Auto</a></li>
-								<li><a href="#">Manual</a></li>
-								<li><a href="#">Priority</a></li>
-								<li><a href="#">Due date</a></li>
-								<li><a href="#">Date created</a></li>
-								<li><a href="#">Date completed</a></li>
-								<li><a href="#">Last modified</a></li>
-								<li><a href="#">A to Z</a></li>
-							</ul>
-						</div>
+						{{>filters}}
+						{{>sortBy}}
 					</div>
 					<div class="taskList">
 						<div class="taskListItem">

client/views/ui/filters.html

@@ -0,0 +1,15 @@
+<template name="filters">
+	<div class="col-xs-6 text-left dropdown">
+		<a href="#" data-toggle="dropdown">Filter: Uncompleted</a>
+		<ul class="dropdown-menu" role="menu" arial-labelledby="dLabel">
+			<li><a href="#">Uncompleted</a></li>
+			<li><a href="#">Not in my lists</a></li>
+			<li><a href="#">Due today</a></li>
+			<li><a href="#">Due soon</a></li>
+			<li><a href="#">Overdue</a></li>
+			<li><a href="#">Repeating</a></li>
+			<li><a href="#">Completed</a></li>
+			<li><a href="#">Everything</a></li>
+		</ul>
+	</div>
+</template>

client/views/ui/sortby.html

@@ -0,0 +1,15 @@
+<template name="sortBy">
+  <div class="col-xs-6 text-right dropdown">
+    <a href="#" data-toggle="dropdown">Sort by: Auto</a>
+    <ul class="dropdown-menu pull-right" role="menu">
+      <li><a href="#">Auto</a></li>
+      <li><a href="#">Manual</a></li>
+      <li><a href="#">Priority</a></li>
+      <li><a href="#">Due date</a></li>
+      <li><a href="#">Date created</a></li>
+      <li><a href="#">Date completed</a></li>
+      <li><a href="#">Last modified</a></li>
+      <li><a href="#">A to Z</a></li>
+    </ul>
+  </div>
+</template>