Improve the multi-select behaviour/appearance and display how many selections are made/required

templates/ArtBrowser/image/grid.hbs

@@ -6,18 +6,20 @@
 		src="{{tb-filePath image.path}}"
 		alt=""
 	>
-	{{#if (eq selectMode "single")}}
+	{{#if is.single}}
 		<button
 			data-action="select"
 		>
 			Select
 		</button>
-	{{else if (eq selectMode "multi")}}
-		<button
+	{{else if is.multi}}
+		<input
+			type="checkbox"
+			aria-label="Select image"
 			data-action="select"
-			aria-pressed="{{image.selected}}"
+			{{checked image.selected}}
 		>
-			Select (Multi)
-		</button>
 	{{/if}}
 </li>
+
+

templates/ArtBrowser/images.hbs

@@ -1,11 +1,21 @@
 <div class="paginated">
 	<div class="row">
-		<button data-action="uploadImage">Upload Image</button>
+		{{#if can.upload}}
+			<button data-action="uploadImage">Upload Image</button>
+		{{/if}}
+		{{#if is.multi}}
+			<div class="grow"></div>
+			<div class="selected-count"></div>
+		{{/if}}
 	</div>
 	{{#if images}}
 		<ul class="image-list image-list--{{listLayout}}">
 			{{#each images as | image |}}
-				{{> (tb-filePath "templates/ArtBrowser/image/grid.hbs") image=image selectMode=@root.selectMode }}
+				{{>
+					(tb-filePath "templates/ArtBrowser/image/grid.hbs")
+					image=image
+					is=@root.is
+				}}
 			{{/each}}
 		</ul>
 	{{else}}