From 959bfcc3e43508a9f96e26d2fb72b19c8fc428af Mon Sep 17 00:00:00 2001
From: Johannes Loher <johannes.loher@fg4f.de>
Date: Mon, 12 Jul 2021 00:12:59 +0200
Subject: [PATCH] Cleanup up creature sheet

---
 src/lang/de.json                              |  2 +
 src/lang/en.json                              |  2 +
 src/module/handlebars/handlebars-partials.ts  |  5 +-
 ...aracter_header.scss => _actor_header.scss} |  2 +-
 ...ogression.scss => _actor_progression.scss} |  2 +-
 ...properties.scss => _actor_properties.scss} |  8 +-
 src/scss/components/_character_values.scss    | 11 ---
 src/scss/ds4.scss                             |  9 +--
 .../sheets/actor/character-sheet.hbs          |  6 +-
 .../sheets/actor/components/actor-header.hbs  | 29 +++++++
 .../actor/components/actor-progression.hbs    | 48 ++++++++++++
 .../actor/components/character-header.hbs     | 25 ------
 .../components/character-progression.hbs      | 48 ------------
 .../actor/components/character-properties.hbs | 76 ++++++++++---------
 .../actor/components/creature-properties.hbs  | 52 +++++++++++++
 src/templates/sheets/actor/creature-sheet.hbs | 57 ++------------
 16 files changed, 198 insertions(+), 184 deletions(-)
 rename src/scss/components/{_character_header.scss => _actor_header.scss} (97%)
 rename src/scss/components/{_character_progression.scss => _actor_progression.scss} (97%)
 rename src/scss/components/{_character_properties.scss => _actor_properties.scss} (77%)
 delete mode 100644 src/scss/components/_character_values.scss
 create mode 100644 src/templates/sheets/actor/components/actor-header.hbs
 create mode 100644 src/templates/sheets/actor/components/actor-progression.hbs
 delete mode 100644 src/templates/sheets/actor/components/character-header.hbs
 delete mode 100644 src/templates/sheets/actor/components/character-progression.hbs
 create mode 100644 src/templates/sheets/actor/components/creature-properties.hbs

diff --git a/src/lang/de.json b/src/lang/de.json
index 74b2e99..8b2b80c 100644
--- a/src/lang/de.json
+++ b/src/lang/de.json
@@ -121,6 +121,8 @@
     "DS4.SpellMinimumLevelsSorcerer": "Zugangsstufe für Schwarzmagier",
     "DS4.SpellMinimumLevelsSorcererAbbr": "Zugangsstufe Sch",
     "DS4.SpellPrice": "Preis (Gold)",
+    "DS4.ActorName": "Name",
+    "DS4.ActorImageAltText": "Bild des Aktors",
     "DS4.ActorTypeCharacter": "Charakter",
     "DS4.ActorTypeCreature": "Kreatur",
     "DS4.Attribute": "Attribut",
diff --git a/src/lang/en.json b/src/lang/en.json
index 22a4ac0..91ddc37 100644
--- a/src/lang/en.json
+++ b/src/lang/en.json
@@ -121,6 +121,8 @@
     "DS4.SpellMinimumLevelsSorcerer": "Minimum level for Sorcerers",
     "DS4.SpellMinimumLevelsSorcererAbbr": "Min lvl SRC",
     "DS4.SpellPrice": "Price (Gold)",
+    "DS4.ActorName": "Name",
+    "DS4.ActorImageAltText": "Image of the Actor",
     "DS4.ActorTypeCharacter": "Character",
     "DS4.ActorTypeCreature": "Creature",
     "DS4.Attribute": "Attribute",
diff --git a/src/module/handlebars/handlebars-partials.ts b/src/module/handlebars/handlebars-partials.ts
index a5f7466..60067ec 100644
--- a/src/module/handlebars/handlebars-partials.ts
+++ b/src/module/handlebars/handlebars-partials.ts
@@ -6,16 +6,17 @@
 
 export default async function registerHandlebarsPartials(): Promise<void> {
     const templatePaths = [
+        "systems/ds4/templates/sheets/actor/components/actor-header.hbs",
+        "systems/ds4/templates/sheets/actor/components/actor-progression.hbs",
         "systems/ds4/templates/sheets/actor/components/biography.hbs",
-        "systems/ds4/templates/sheets/actor/components/character-progression.hbs",
         "systems/ds4/templates/sheets/actor/components/character-properties.hbs",
-        "systems/ds4/templates/sheets/actor/components/character-header.hbs",
         "systems/ds4/templates/sheets/actor/components/check.hbs",
         "systems/ds4/templates/sheets/actor/components/checks.hbs",
         "systems/ds4/templates/sheets/actor/components/combat-value.hbs",
         "systems/ds4/templates/sheets/actor/components/combat-values.hbs",
         "systems/ds4/templates/sheets/actor/components/core-value.hbs",
         "systems/ds4/templates/sheets/actor/components/core-values.hbs",
+        "systems/ds4/templates/sheets/actor/components/creature-properties.hbs",
         "systems/ds4/templates/sheets/actor/components/currency.hbs",
         "systems/ds4/templates/sheets/actor/components/item-list-entry.hbs",
         "systems/ds4/templates/sheets/actor/components/item-list-header.hbs",
diff --git a/src/scss/components/_character_header.scss b/src/scss/components/_actor_header.scss
similarity index 97%
rename from src/scss/components/_character_header.scss
rename to src/scss/components/_actor_header.scss
index f69efd2..a9828e1 100644
--- a/src/scss/components/_character_header.scss
+++ b/src/scss/components/_actor_header.scss
@@ -6,7 +6,7 @@
 
 @use "../utils/typography";
 
-.ds4-character-header {
+.ds4-actor-header {
     display: flex;
     flex-grow: 0;
     flex-shrink: 0;
diff --git a/src/scss/components/_character_progression.scss b/src/scss/components/_actor_progression.scss
similarity index 97%
rename from src/scss/components/_character_progression.scss
rename to src/scss/components/_actor_progression.scss
index d1d03d8..3d5679f 100644
--- a/src/scss/components/_character_progression.scss
+++ b/src/scss/components/_actor_progression.scss
@@ -10,7 +10,7 @@
 @use "../utils/variables";
 @use "../utils/mixins";
 
-.ds4-character-progression {
+.ds4-actor-progression {
     @include mixins.mark-invalid-or-disabled-input;
     display: flex;
     gap: 0.5em;
diff --git a/src/scss/components/_character_properties.scss b/src/scss/components/_actor_properties.scss
similarity index 77%
rename from src/scss/components/_character_properties.scss
rename to src/scss/components/_actor_properties.scss
index 1962afd..0f73504 100644
--- a/src/scss/components/_character_properties.scss
+++ b/src/scss/components/_actor_properties.scss
@@ -7,8 +7,9 @@
  */
 
 @use "../utils/mixins";
+@use "../utils/variables";
 
-.ds4-character-properties {
+.ds4-actor-properties {
     @include mixins.mark-invalid-or-disabled-input;
     display: flex;
     gap: 0.25em;
@@ -23,6 +24,11 @@
         white-space: nowrap;
     }
 
+    &__property-select {
+        width: 100%;
+        height: variables.$default-input-height;
+    }
+
     &__property-multi-input {
         display: flex;
         gap: 0.125em;
diff --git a/src/scss/components/_character_values.scss b/src/scss/components/_character_values.scss
deleted file mode 100644
index 5dfb464..0000000
--- a/src/scss/components/_character_values.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2021 Johannes Loher
- *
- * SPDX-License-Identifier: MIT
- */
-
-header.sheet-header {
-    .character-values {
-        flex: 0 0 100%;
-    }
-}
diff --git a/src/scss/ds4.scss b/src/scss/ds4.scss
index 1185def..a6afe38 100644
--- a/src/scss/ds4.scss
+++ b/src/scss/ds4.scss
@@ -20,11 +20,11 @@
 
 /* Styles limited to ds4 sheets */
 .ds4 {
+    @include meta.load-css("components/actor_header");
+    @include meta.load-css("components/actor_progression");
+    @include meta.load-css("components/actor_properties");
     @include meta.load-css("components/apps");
     @include meta.load-css("components/basic_property");
-    @include meta.load-css("components/character_progression");
-    @include meta.load-css("components/character_properties");
-    @include meta.load-css("components/character_values");
     @include meta.load-css("components/check");
     @include meta.load-css("components/checks");
     @include meta.load-css("components/combat_value");
@@ -34,12 +34,11 @@
     @include meta.load-css("components/currency");
     @include meta.load-css("components/description");
     @include meta.load-css("components/forms");
-    @include meta.load-css("components/character_header");
     @include meta.load-css("components/item_list");
     @include meta.load-css("components/profile");
     @include meta.load-css("components/rollable_image");
-    @include meta.load-css("components/sheet");
     @include meta.load-css("components/sheet_tab_nav");
+    @include meta.load-css("components/sheet");
     @include meta.load-css("components/talent_rank_equation");
     @include meta.load-css("tabs/biography");
 }
diff --git a/src/templates/sheets/actor/character-sheet.hbs b/src/templates/sheets/actor/character-sheet.hbs
index 6fc20bc..99ff588 100644
--- a/src/templates/sheets/actor/character-sheet.hbs
+++ b/src/templates/sheets/actor/character-sheet.hbs
@@ -7,8 +7,10 @@ SPDX-License-Identifier: MIT
 --}}
 
 <form class="{{cssClass}} ds4-sheet" autocomplete="off">
-    {{!-- Character Header --}}
-    {{> systems/ds4/templates/sheets/actor/components/character-header.hbs}}
+    {{!-- Header --}}
+    {{#> systems/ds4/templates/sheets/actor/components/actor-header.hbs}}
+    {{> systems/ds4/templates/sheets/actor/components/character-properties.hbs}}
+    {{/systems/ds4/templates/sheets/actor/components/actor-header.hbs}}
 
     {{!-- Sheet Tab Navigation --}}
     <nav class="ds4-sheet-tab-nav sheet-tabs tabs" data-group="primary">
diff --git a/src/templates/sheets/actor/components/actor-header.hbs b/src/templates/sheets/actor/components/actor-header.hbs
new file mode 100644
index 0000000..b4a38c1
--- /dev/null
+++ b/src/templates/sheets/actor/components/actor-header.hbs
@@ -0,0 +1,29 @@
+{{!--
+SPDX-FileCopyrightText: 2021 Johannes Loher
+SPDX-FileCopyrightText: 2021 Oliver Rümpelein
+SPDX-FileCopyrightText: 2021 Gesina Schwalbe
+
+SPDX-License-Identifier: MIT
+--}}
+
+{{!--
+!-- Render an actor sheet header.
+!-- @param @partial-block: Properties to render in the second header row.
+--}}
+<header class="ds4-actor-header">
+    <img class="ds4-actor-header__img" src="{{data.img}}" data-edit="img" alt="{{localize 'DS4.ActorImageAltText'}}"
+        title="{{data.name}}" height="100" width="100" />
+    <div class="ds4-actor-header__data">
+        <div class="ds4-actor-header__data-row">
+            <h1 class="ds4-actor-header__name">
+                <label for="name-{{data._id}}" class="hidden">{{localize 'DS4.ActorName'}}</label>
+                <input class="ds4-actor-header__name-input" name="name" type="text" id="name-{{data._id}}"
+                    value="{{data.name}}" placeholder="{{localize 'DS4.ActorName'}}" />
+            </h1>
+            {{> systems/ds4/templates/sheets/actor/components/actor-progression.hbs}}
+        </div>
+        <div class="ds4-actor-header__data-row">
+            {{> @partial-block}}
+        </div>
+    </div>
+</header>
diff --git a/src/templates/sheets/actor/components/actor-progression.hbs b/src/templates/sheets/actor/components/actor-progression.hbs
new file mode 100644
index 0000000..bfb3a86
--- /dev/null
+++ b/src/templates/sheets/actor/components/actor-progression.hbs
@@ -0,0 +1,48 @@
+{{!--
+SPDX-FileCopyrightText: 2021 Johannes Loher
+SPDX-FileCopyrightText: 2021 Oliver Rümpelein
+SPDX-FileCopyrightText: 2021 Gesina Schwalbe
+
+SPDX-License-Identifier: MIT
+--}}
+
+<div class="ds4-actor-progression">
+    <div class="ds4-actor-progression__entry">
+        <h2 class="ds4-actor-progression__label"><label for="data.combatValues.hitPoints.value-{{data._id}}"
+                title="{{localize 'DS4.CombatValuesHitPointsCurrent'}}">{{localize
+                "DS4.CombatValuesHitPointsCurrentAbbr"}}</label>
+        </h2>
+        <input class="ds4-actor-progression__input" type="number" name="data.combatValues.hitPoints.value"
+            id="data.combatValues.hitPoints.value-{{data._id}}" value="{{data.data.combatValues.hitPoints.value}}"
+            data-dtype="Number" />
+    </div>
+    {{#if (eq data.type "character")}}
+    {{#if settings.showSlayerPoints}}
+    <div class="ds4-actor-progression__entry">
+        <h2 class="ds4-actor-progression__label"><label for="data.slayersPoints.value-{{data._id}}"
+                title="{{localize 'DS4.CharacterSlayerPoints'}}">{{localize "DS4.CharacterSlayerPointsAbbr"}}</label>
+        </h2>
+        <input class="ds4-actor-progression__input ds4-actor-progression__input--slayer-points" type="number"
+            max="{{data.data.slayerPoints.max}}" min="0" step="1" name="data.slayerPoints.value"
+            id="data.slayersPoints.value-{{data._id}}" value="{{data.data.slayerPoints.value}}" data-dtype="Number" />
+    </div>
+    {{/if}}
+    <div class="ds4-actor-progression__entry">
+        <h2 class="ds4-actor-progression__label"><label for="data.progression.level-{{data._id}}"
+                title="{{localize 'DS4.CharacterProgressionLevel'}}">{{localize
+                "DS4.CharacterProgressionLevelAbbr"}}</label>
+        </h2>
+        <input class="ds4-actor-progression__input" type="number" min="0" name="data.progression.level"
+            id="data.progression.level-{{data._id}}" value="{{data.data.progression.level}}" data-dtype="Number" />
+    </div>
+    <div class="ds4-actor-progression__entry">
+        <h2 class="ds4-actor-progression__label"><label for="data.progression.experiencePoints-{{data._id}}"
+                title="{{localize 'DS4.CharacterProgressionExperiencePoints'}}">{{localize
+                "DS4.CharacterProgressionExperiencePointsAbbr"}}</label>
+        </h2>
+        <input class="ds4-actor-progression__input" type="number" min="0" name="data.progression.experiencePoints"
+            id="data.progression.experiencePoints-{{data._id}}" value="{{data.data.progression.experiencePoints}}"
+            data-dtype="Number" />
+    </div>
+    {{/if}}
+</div>
diff --git a/src/templates/sheets/actor/components/character-header.hbs b/src/templates/sheets/actor/components/character-header.hbs
deleted file mode 100644
index e2d279c..0000000
--- a/src/templates/sheets/actor/components/character-header.hbs
+++ /dev/null
@@ -1,25 +0,0 @@
-{{!--
-SPDX-FileCopyrightText: 2021 Johannes Loher
-SPDX-FileCopyrightText: 2021 Oliver Rümpelein
-SPDX-FileCopyrightText: 2021 Gesina Schwalbe
-
-SPDX-License-Identifier: MIT
---}}
-
-<header class="ds4-character-header">
-    <img class="ds4-character-header__img" src="{{data.img}}" data-edit="img" alt="{{localize 'DS4.ActorImageAltText'}}"
-        title="{{data.name}}" height="100" width="100" />
-    <div class="ds4-character-header__data">
-        <div class="ds4-character-header__data-row">
-            <h1 class="ds4-character-header__name">
-                <label for="name" class="hidden">Name</label>
-                <input class="ds4-character-header__name-input" name="name" type="text" id="name" value="{{data.name}}"
-                    placeholder="{{localize 'DS4.PlaceholderName'}}" />
-            </h1>
-            {{> systems/ds4/templates/sheets/actor/components/character-progression.hbs}}
-        </div>
-        <div class="ds4-character-header__data-row">
-            {{> systems/ds4/templates/sheets/actor/components/character-properties.hbs}}
-        </div>
-    </div>
-</header>
diff --git a/src/templates/sheets/actor/components/character-progression.hbs b/src/templates/sheets/actor/components/character-progression.hbs
deleted file mode 100644
index 515d6a5..0000000
--- a/src/templates/sheets/actor/components/character-progression.hbs
+++ /dev/null
@@ -1,48 +0,0 @@
-{{!--
-SPDX-FileCopyrightText: 2021 Johannes Loher
-SPDX-FileCopyrightText: 2021 Oliver Rümpelein
-SPDX-FileCopyrightText: 2021 Gesina Schwalbe
-
-SPDX-License-Identifier: MIT
---}}
-
-<div class="ds4-character-progression">
-    <div class="ds4-character-progression__entry">
-        <h2 class="ds4-character-progression__label"><label for="data.combatValues.hitPoints.value"
-                title="{{localize 'DS4.CombatValuesHitPointsCurrent'}}">{{localize
-                "DS4.CombatValuesHitPointsCurrentAbbr"}}</label>
-        </h2>
-        <input class="ds4-character-progression__input" type="number" name="data.combatValues.hitPoints.value"
-            id="data.combatValues.hitPoints.value" value="{{data.data.combatValues.hitPoints.value}}"
-            data-dtype="Number" />
-    </div>
-    {{#if (eq data.type "character")}}
-    {{#if settings.showSlayerPoints}}
-    <div class="ds4-character-progression__entry">
-        <h2 class="ds4-character-progression__label"><label for="data.slayersPoints.value"
-                title="{{localize 'DS4.CharacterSlayerPoints'}}">{{localize "DS4.CharacterSlayerPointsAbbr"}}</label>
-        </h2>
-        <input class="ds4-character-progression__input ds4-character-progression__input--slayer-points" type="number"
-            max="{{data.data.slayerPoints.max}}" min="0" step="1" name="data.slayerPoints.value"
-            id="data.slayersPoints.value" value="{{data.data.slayerPoints.value}}" data-dtype="Number" />
-    </div>
-    {{/if}}
-    <div class="ds4-character-progression__entry">
-        <h2 class="ds4-character-progression__label"><label for="data.progression.level"
-                title="{{localize 'DS4.CharacterProgressionLevel'}}">{{localize
-                "DS4.CharacterProgressionLevelAbbr"}}</label>
-        </h2>
-        <input class="ds4-character-progression__input" type="number" min="0" name="data.progression.level"
-            id="data.progression.level" value="{{data.data.progression.level}}" data-dtype="Number" />
-    </div>
-    <div class="ds4-character-progression__entry">
-        <h2 class="ds4-character-progression__label"><label for="data.progression.experiencePoints"
-                title="{{localize 'DS4.CharacterProgressionExperiencePoints'}}">{{localize
-                "DS4.CharacterProgressionExperiencePointsAbbr"}}</label>
-        </h2>
-        <input class="ds4-character-progression__input" type="number" min="0" name="data.progression.experiencePoints"
-            id="data.progression.experiencePoints" value="{{data.data.progression.experiencePoints}}"
-            data-dtype="Number" />
-    </div>
-    {{/if}}
-</div>
diff --git a/src/templates/sheets/actor/components/character-properties.hbs b/src/templates/sheets/actor/components/character-properties.hbs
index 0cc69f7..d522e25 100644
--- a/src/templates/sheets/actor/components/character-properties.hbs
+++ b/src/templates/sheets/actor/components/character-properties.hbs
@@ -6,54 +6,58 @@ SPDX-FileCopyrightText: 2021 Gesina Schwalbe
 SPDX-License-Identifier: MIT
 --}}
 
-<div class="ds4-character-properties">
-    <div class="ds4-character-properties__property">
-        <label class="ds4-character-properties__property-label"
-            for="data.baseInfo.race">{{config.i18n.characterBaseInfo.race}}</label>
-        <input type="text" name="data.baseInfo.race" id="data.baseInfo.race" value="{{data.data.baseInfo.race}}"
-            data-dtype="String" />
+<div class="ds4-actor-properties">
+    <div class="ds4-actor-properties__property">
+        <label class="ds4-actor-properties__property-label"
+            for="data.baseInfo.race-{{data._id}}">{{config.i18n.characterBaseInfo.race}}</label>
+        <input type="text" name="data.baseInfo.race" id="data.baseInfo.race-{{data._id}}"
+            value="{{data.data.baseInfo.race}}" data-dtype="String" />
     </div>
-    <div class="ds4-character-properties__property">
-        <label class="ds4-character-properties__property-label"
-            for="data.baseInfo.culture">{{config.i18n.characterBaseInfo.culture}}</label>
-        <input id="data.baseInfo.culture" type="text" name="data.baseInfo.culture"
+    <div class="ds4-actor-properties__property">
+        <label class="ds4-actor-properties__property-label"
+            for="data.baseInfo.culture-{{data._id}}">{{config.i18n.characterBaseInfo.culture}}</label>
+        <input id="data.baseInfo.culture-{{data._id}}" type="text" name="data.baseInfo.culture"
             value="{{data.data.baseInfo.culture}}" data-dtype="String" />
     </div>
-    <div class="ds4-character-properties__property">
-        <label class="ds4-character-properties__property-label"
-            for="data.progression.progressPoints.used">{{config.i18n.characterProgression.progressPoints}}</label>
-        <div class="ds4-character-properties__property-multi-input">
-            <input id="data.progression.progressPoints.used" type="number" name="data.progression.progressPoints.used"
-                value="{{data.data.progression.progressPoints.used}}" data-dtype="Number" />
+    <div class="ds4-actor-properties__property">
+        <label class="ds4-actor-properties__property-label"
+            for="data.progression.progressPoints.used-{{data._id}}">{{config.i18n.characterProgression.progressPoints}}</label>
+        <div class="ds4-actor-properties__property-multi-input">
+            <input id="data.progression.progressPoints.used-{{data._id}}" type="number"
+                name="data.progression.progressPoints.used" value="{{data.data.progression.progressPoints.used}}"
+                data-dtype="Number" />
             <span class="input-divider"> / </span>
-            <label class="hidden" for="data.progression.progressPoints.total">Total
+            <label class="hidden" for="data.progression.progressPoints.total-{{data._id}}">Total
                 Progression Points</label>
-            <input type="number" id="data.progression.progressPoints.total" name="data.progression.progressPoints.total"
-                value="{{data.data.progression.progressPoints.total}}" data-dtype="Number" />
+            <input type="number" id="data.progression.progressPoints.total-{{data._id}}"
+                name="data.progression.progressPoints.total" value="{{data.data.progression.progressPoints.total}}"
+                data-dtype="Number" />
         </div>
     </div>
-    <div class="ds4-character-properties__property">
-        <label class="ds4-character-properties__property-label"
-            for="data.progression.talentPoints.used">{{config.i18n.characterProgression.talentPoints}}</label>
-        <div class="ds4-character-properties__property-multi-input">
-            <input type="number" name="data.progression.talentPoints.used" id="data.progression.talentPoints.used"
-                value="{{data.data.progression.talentPoints.used}}" data-dtype="Number" />
+    <div class="ds4-actor-properties__property">
+        <label class="ds4-actor-properties__property-label"
+            for="data.progression.talentPoints.used-{{data._id}}">{{config.i18n.characterProgression.talentPoints}}</label>
+        <div class="ds4-actor-properties__property-multi-input">
+            <input type="number" name="data.progression.talentPoints.used"
+                id="data.progression.talentPoints.used-{{data._id}}" value="{{data.data.progression.talentPoints.used}}"
+                data-dtype="Number" />
             <span class="input-divider"> / </span>
-            <label for="data.progression.talentPoints.total" class="hidden">Total Talent Points</label>
-            <input type="number" name="data.progression.talentPoints.total" id="data.progression.talentPoints.total"
+            <label for="data.progression.talentPoints.total-{{data._id}}" class="hidden">Total Talent Points</label>
+            <input type="number" name="data.progression.talentPoints.total"
+                id="data.progression.talentPoints.total-{{data._id}}"
                 value="{{data.data.progression.talentPoints.total}}" data-dtype="Number" />
         </div>
     </div>
-    <div class="ds4-character-properties__property">
-        <label class="ds4-character-properties__property-label"
-            for="data.baseInfo.class">{{config.i18n.characterBaseInfo.class}}</label>
-        <input type="text" id="data.baseInfo.class" name="data.baseInfo.class" value="{{data.data.baseInfo.class}}"
-            data-dtype="String" />
+    <div class="ds4-actor-properties__property">
+        <label class="ds4-actor-properties__property-label"
+            for="data.baseInfo.class-{{data._id}}">{{config.i18n.characterBaseInfo.class}}</label>
+        <input type="text" id="data.baseInfo.class-{{data._id}}" name="data.baseInfo.class"
+            value="{{data.data.baseInfo.class}}" data-dtype="String" />
     </div>
-    <div class="ds4-character-properties__property">
-        <label class="ds4-character-properties__property-label"
-            for="data.baseInfo.heroClass">{{config.i18n.characterBaseInfo.heroClass}}</label>
-        <input type="text" id="data.baseInfo.heroClass" name="data.baseInfo.heroClass"
+    <div class="ds4-actor-properties__property">
+        <label class="ds4-actor-properties__property-label"
+            for="data.baseInfo.heroClass-{{data._id}}">{{config.i18n.characterBaseInfo.heroClass}}</label>
+        <input type="text" id="data.baseInfo.heroClass-{{data._id}}" name="data.baseInfo.heroClass"
             value="{{data.data.baseInfo.heroClass}}" data-dtype="String" />
     </div>
 </div>
diff --git a/src/templates/sheets/actor/components/creature-properties.hbs b/src/templates/sheets/actor/components/creature-properties.hbs
new file mode 100644
index 0000000..416a1ad
--- /dev/null
+++ b/src/templates/sheets/actor/components/creature-properties.hbs
@@ -0,0 +1,52 @@
+{{!--
+SPDX-FileCopyrightText: 2021 Johannes Loher
+SPDX-FileCopyrightText: 2021 Oliver Rümpelein
+SPDX-FileCopyrightText: 2021 Gesina Schwalbe
+
+SPDX-License-Identifier: MIT
+--}}
+
+<div class="ds4-actor-properties">
+    <div class="ds4-actor-properties__property">
+        <label class="ds4-actor-properties__property-label"
+            for="data.baseInfo.creatureType-{{data._id}}">{{config.i18n.creatureBaseInfo.creatureType}}</label>
+        <select class="ds4-actor-properties__property-select" id="data.baseInfo.creatureType-{{data._id}}"
+            name="data.baseInfo.creatureType" data-type="String">
+            {{#select data.data.baseInfo.creatureType}}
+            {{#each config.i18n.creatureTypes as |value key|}}
+            <option value="{{key}}">{{value}}</option>
+            {{/each}}
+            {{/select}}
+        </select>
+    </div>
+    <div class="ds4-actor-properties__property">
+        <label class="ds4-actor-properties__property-label"
+            for="data.baseInfo.loot-{{data._id}}">{{config.i18n.creatureBaseInfo.loot}}</label>
+        <input type="text" id="data.baseInfo.loot-{{data._id}}" name="data.baseInfo.loot"
+            value="{{data.data.baseInfo.loot}}" data-dtype="String" />
+    </div>
+    <div class="ds4-actor-properties__property">
+        <label class="ds4-actor-properties__property-label"
+            for="data.baseInfo.foeFactor-{{data._id}}">{{config.i18n.creatureBaseInfo.foeFactor}}</label>
+        <input type="text" id="data.baseInfo.foeFactor-{{data._id}}" name="data.baseInfo.foeFactor"
+            value="{{data.data.baseInfo.foeFactor}}" data-dtype="Number" />
+    </div>
+    <div class="ds4-actor-properties__property">
+        <label class="ds4-actor-properties__property-label"
+            for="data.baseInfo.sizeCategory-{{data._id}}">{{config.i18n.creatureBaseInfo.sizeCategory}}</label>
+        <select class="ds4-actor-properties__property-select" id="data.baseInfo.sizeCategory-{{data._id}}"
+            name="data.baseInfo.sizeCategory" data-type="String">
+            {{#select data.data.baseInfo.sizeCategory}}
+            {{#each config.i18n.creatureSizeCategories as |value key|}}
+            <option value="{{key}}">{{value}}</option>
+            {{/each}}
+            {{/select}}
+        </select>
+    </div>
+    <div class="ds4-actor-properties__property">
+        <label class="ds4-actor-properties__property-label"
+            for="data.baseInfo.experiencePoints-{{data._id}}">{{config.i18n.creatureBaseInfo.experiencePoints}}</label>
+        <input type="text" id="data.baseInfo.experiencePoints-{{data._id}}" name="data.baseInfo.experiencePoints"
+            value="{{data.data.baseInfo.experiencePoints}}" data-dtype="Number" />
+    </div>
+</div>
diff --git a/src/templates/sheets/actor/creature-sheet.hbs b/src/templates/sheets/actor/creature-sheet.hbs
index 3ae5da8..12e78d6 100644
--- a/src/templates/sheets/actor/creature-sheet.hbs
+++ b/src/templates/sheets/actor/creature-sheet.hbs
@@ -6,59 +6,12 @@ SPDX-FileCopyrightText: 2021 Gesina Schwalbe
 SPDX-License-Identifier: MIT
 --}}
 
-<form class="{{cssClass}} flexcol" autocomplete="off">
-    {{!-- Sheet Header --}}
-    <header class="sheet-header">
-        <img class="profile-img" src="{{data.img}}" data-edit="img" title="{{data.name}}" height="100" width="100" />
-        <div class="header-fields flexrow">
-            <h1 class="charname">
-                <label for="name" class="hidden">Name</label>
-                <input name="name" type="text" id="name" value="{{data.name}}" placeholder="Name" />
-            </h1>
-            {{> systems/ds4/templates/sheets/actor/components/character-progression.hbs}}
+<form class="{{cssClass}} ds4-sheet" autocomplete="off">
+    {{!-- Header --}}
+    {{#> systems/ds4/templates/sheets/actor/components/actor-header.hbs}}
+    {{> systems/ds4/templates/sheets/actor/components/creature-properties.hbs}}
+    {{/systems/ds4/templates/sheets/actor/components/actor-header.hbs}}
 
-            <div class="flexrow basic-properties">
-                <div class="basic-property">
-                    <label>{{config.i18n.creatureBaseInfo.creatureType}}</label>
-                    <select name="data.baseInfo.creatureType" data-type="String">
-                        {{#select data.data.baseInfo.creatureType}}
-                        {{#each config.i18n.creatureTypes as |value key|}}
-                        <option value="{{key}}">{{value}}</option>
-                        {{/each}}
-                        {{/select}}
-                    </select>
-                </div>
-                <div class="basic-property">
-                    <label class="basic-property-label"
-                        for="data.baseInfo.loot">{{config.i18n.creatureBaseInfo.loot}}</label>
-                    <input type="text" name="data.baseInfo.loot" value="{{data.data.baseInfo.loot}}"
-                        data-dtype="String" />
-                </div>
-                <div class="basic-property">
-                    <label class="basic-property-label"
-                        for="data.baseInfo.foeFactor">{{config.i18n.creatureBaseInfo.foeFactor}}</label>
-                    <input type="text" name="data.baseInfo.foeFactor" value="{{data.data.baseInfo.foeFactor}}"
-                        data-dtype="Number" />
-                </div>
-                <div class="basic-property">
-                    <label>{{config.i18n.creatureBaseInfo.sizeCategory}}</label>
-                    <select name="data.baseInfo.sizeCategory" data-type="String">
-                        {{#select data.data.baseInfo.sizeCategory}}
-                        {{#each config.i18n.creatureSizeCategories as |value key|}}
-                        <option value="{{key}}">{{value}}</option>
-                        {{/each}}
-                        {{/select}}
-                    </select>
-                </div>
-                <div class="basic-property">
-                    <label class="basic-property-label"
-                        for="data.baseInfo.experiencePoints">{{config.i18n.creatureBaseInfo.experiencePoints}}</label>
-                    <input type="text" name="data.baseInfo.experiencePoints"
-                        value="{{data.data.baseInfo.experiencePoints}}" data-dtype="Number" />
-                </div>
-            </div>
-        </div>
-    </header>
 
     {{!-- Sheet Tab Navigation --}}
     <nav class="ds4-sheet-tab-nav sheet-tabs tabs" data-group="primary">