Add Craft as it's own section item. Display the attack range

templates/Apps/BookGeistSheet/items.hbs

@@ -1,18 +1,38 @@
 <div class="items">
-	<div>Attacks</div>
-	<div>
-		{{#each attacks as |attack|}}
-			<div
-				class="attack"
-				data-ctx-menu="item"
-				data-item-id="{{attack.uuid}}"
-			>
-				{{attack.name}}
-			</div>
-		{{else}}
-			Unarmed!
-		{{/each}}
-	</div>
+	{{#if attacks}}
+		<div>Attacks</div>
+		<div>
+			{{#each attacks as |attack|}}
+				<div
+					class="attack"
+					data-ctx-menu="item"
+					data-item-id="{{attack.uuid}}"
+				>
+					{{attack.name}}
+					{{attack.damage}}
+					{{#if attack.isRanged}}
+						<span class="range">
+							({{attack.range.short}} / {{attack.range.long}})
+						</span>
+					{{/if}}
+				</div>
+			{{/each}}
+		</div>
+	{{/if}}
+	{{#if crafts}}
+		<div>Craft</div>
+		<div>
+			{{#each crafts as |craft|}}
+				<div
+					class="craft"
+					data-ctx-menu="item"
+					data-item-id="{{craft.uuid}}"
+				>
+					{{craft.name}}
+				</div>
+			{{/each}}
+		</div>
+	{{/if}}
 	<div>Defense</div>
 	<div>
 		Armour

templates/Apps/BookGeistSheet/style.css

@@ -19,6 +19,7 @@
 		display: flex;
 		justify-content: center;
 		align-items: center;
+		flex-shrink: 0;
 
 		img {
 			width: 150px;