source/module/actors/M5Character.ts

@@ -207,7 +207,7 @@ export class M5Character extends Actor {
 			const aggregate = new M5ModAggregate(data, ret);
 
 			context.items
-				?.filter((item) => (item.type === "item" || item.type === "effect" || item.type === "armor" || item.type === "container" || item.type === "klasse") && item.system.equipped)
+				?.filter((item) => (item.type === "item" || item.type === "effect" || item.type === "armor" || item.type === "container" || item.type === "class") && item.system.equipped)
 				.forEach((item) => {
 					const mods = item.system.mods;
 					//console.log("Actor item mods", mods)
@@ -497,11 +497,19 @@ export class M5Character extends Actor {
 		}
 
 		if (!skip?.class) {
-			const item = context.items?.find((item) => item.type === "class");
-			if (item) {
-				data.info.class = item.name;
-				data.info.magicUsing = item.system.magicUsing;
-			}
+			const item = context.items
+				?.filter((item) => item.type === "class")
+				.forEach((item) => {
+					if (item) {
+						if (typeof data.info.class === "string") {
+							data.info.class = {};
+						}
+						data.info.class[item.id] = item.name;
+						if (item.system.magicUsing) {
+							data.info.magicUsing = item.system.magicUsing;
+						}
+					}
+				});
 		}
 
 		if (!skip?.effects) {

source/module/sheets/M5CharacterSheet.ts

@@ -433,6 +433,14 @@ export default class M5CharacterSheet extends ActorSheet {
 			}
 		});
 
+		html.find(".class-item-edit").on("click", async (event) => {
+			this.actor.items.find((x) => x.type === "class").sheet.render(true);
+		});
+
+		html.find(".class-item-delete").on("click", async (event) => {
+			this.actor.items.find((x) => x.type === "class").delete();
+		});
+
 		// Drag & Drop
 		const dragDrop = new DragDrop({
 			dragSelector: ".items-list .item",

source/style/Character-sheet.less

@@ -365,4 +365,27 @@
 			}
 		}
 	}
+
+	.chip {
+		display: inline-block;
+		padding: 0 25px;
+		height: 35px;
+		font-size: 16px;
+		line-height: 35px;
+		border-radius: 25px;
+		background-color: #f1f1f1;
+	}
+
+	.closebtn {
+		padding-left: 10px;
+		color: #888;
+		font-weight: bold;
+		float: right;
+		font-size: 20px;
+		cursor: pointer;
+	}
+
+	.closebtn:hover {
+		color: #000;
+	}
 }

source/template.json

@@ -6,7 +6,7 @@
 				"info": {
 					"description": "",
 					"background": "",
-					"class": "",
+					"class": {},
 					"race": "",
 					"magicUsing": false,
 					"showAllItems": false,
@@ -467,7 +467,7 @@
 			"calc": {}
 		},
 		"class": {
-			"templates": ["itemDescription", "stats"],
+			"templates": ["itemDescription"],
 			"magicUsing": false,
 			"equipped": true,
 			"resistanceBody": 1,

templates/sheets/character/main.hbs

@@ -15,7 +15,14 @@
 				</tr>
 				<tr>
 					<td >{{localize "midgard5.class"}}</td>
-					<td><input name="data.info.class" type="text" disabled="true" value="{{data.info.class}}" data-dtype="String" /></td>
+					<td >
+						{{#each data.info.class as |class id|}}
+						<div class="chip" data-item-id="{{id}}">
+						<a class="edit-item" name="data.info.class" type="text" disabled="true" value=""  data-dtype="String">{{class}}</a>
+						<span><a class="closebtn item-delete" title="Delete Item"><i class="fas fa-trash"></i></a></span>
+						</div>
+						{{/each}}
+					</td>
 					<td >{{localize "midgard5.level"}}</td>
 					<td>{{data.calc.level}}</td>
 			</table>