foundryvtt-beam-saber/templates/actor-sheet.html

<form class="{{cssClass}} actor-sheet" autocomplete="off">

  <div id="name-alias" class="section">

    <div class="grow-two">
      <div id="name">
        <label for="character-name">Name</label>
        <input type="text" id="character-name" name="name" value="{{actor.name}}">
      </div>

      <div id="character-traits" class="flex-column">
        
        {{#each actor.items as |item id|}}
            {{#eq item.type "heritage"}}
            <div class="item flex-horizontal" data-item-id="{{item._id}}">
              <div class="item-class-label">Heritage</div>
              <div class="item-body flex-horizontal">
                <img src="{{item.img}}" title="{{item.name}}" width="24" height="24"/>
                <div class="item-name">{{item.name}}</div>
              </div>
              <a class="item-control item-delete" title="Delete Item"><i class="fas fa-trash"></i></a>
            </div>
            {{/eq}}
        {{/each}}

        {{#each actor.items as |item id|}}
          {{#eq item.type "background"}}
          <div class="item flex-horizontal" data-item-id="{{item._id}}">
            <div class="item-class-label">Background</div>
            <div class="item-body flex-horizontal">
              <img src="{{item.img}}" title="{{item.name}}" width="24" height="24"/>
              <div class="item-name">{{item.name}}</div>
            </div>
            <a class="item-control item-delete" title="Delete Item"><i class="fas fa-trash"></i></a>
          </div>
          {{/eq}}
        {{/each}}

        {{#each actor.items as |item id|}}
            {{#eq item.type "vice"}}
            <div class="item flex-horizontal" data-item-id="{{item._id}}">
              <div class="item-class-label">Vice</div>
              <div class="item-body flex-horizontal">
                <img src="{{item.img}}" title="{{item.name}}" width="24" height="24"/>
                <div class="item-name">{{item.name}}</div>
              </div>
              <a class="item-control item-delete" title="Delete Item"><i class="fas fa-trash"></i></a>
            </div>
            {{/eq}}
        {{/each}}

        {{#each actor.items as |item id|}}
            {{#eq item.type "class"}}
            <div class="item flex-horizontal" data-item-id="{{item._id}}">
              <div class="item-class-label">Class</div>
              <div class="item-body flex-horizontal">
                <img src="{{item.img}}" title="{{item.name}}" width="24" height="24"/>
                <div class="item-name">{{item.name}}</div>
              </div>
              <a class="item-control item-delete" title="Delete Item"><i class="fas fa-trash"></i></a>
            </div>
            {{/eq}}
        {{/each}}
      </div>
    </div>

    <img class="profile-img" src="{{actor.img}}" data-edit="img" title="{{actor.name}}" height="100" width="100"/>

    <div class="grow-two">
      <div id="alias">
        <label for="character-alias">Alias</label>
        <input type="text" id="character-alias" name="data.alias" value="{{data.alias}}">
      </div>

      {{> "systems/blades-in-the-dark/templates/parts/coins.html"}}
    </div>

  </div>

  {{!-- Experience --}}
  <div class="section experience">
  </div>
  {{!-- Stress and Trauma --}}
  <div id="stress-trauma" class="section big-teeth-section">
    <div id="character-stress" class="big-teeth">
      {{#multiboxes data.stress}}
      <input type="radio" id="character-stress-0" name="data.stress" value="0" dtype="Radio">
      <label class="black-label" for="character-stress-0">Stress</label>
      <input type="radio" id="character-stress-1" name="data.stress" value="1" dtype="Radio">
      <label for="character-stress-1"></label>
      <input type="radio" id="character-stress-2" name="data.stress" value="2" dtype="Radio">
      <label for="character-stress-2"></label>
      <input type="radio" id="character-stress-3" name="data.stress" value="3" dtype="Radio">
      <label for="character-stress-3"></label>
      <input type="radio" id="character-stress-4" name="data.stress" value="4" dtype="Radio">
      <label for="character-stress-4"></label>
      <input type="radio" id="character-stress-5" name="data.stress" value="5" dtype="Radio">
      <label for="character-stress-5"></label>
      <input type="radio" id="character-stress-6" name="data.stress" value="6" dtype="Radio">
      <label for="character-stress-6"></label>
      <input type="radio" id="character-stress-7" name="data.stress" value="7" dtype="Radio">
      <label for="character-stress-7"></label>
      <input type="radio" id="character-stress-8" name="data.stress" value="8" dtype="Radio">
      <label for="character-stress-8"></label>
      <input type="radio" id="character-stress-9" name="data.stress" value="9" dtype="Radio">
      <label for="character-stress-9"></label>
      {{/multiboxes}}

    </div>
    <div id="character-trauma-container" class="small-teeth-container">
      {{#traumacounter data.traumas}}
      <div id="character-trauma" class="small-teeth-wrap">
        <label class="black-label" for="character-trauma-counter-0">Trauma</label>
        <div id="trauma-teeth" class="small-teeth">
          <input type="radio" id="character-trauma-counter-0" name="trauma-counter" value="0">
          <input type="radio" id="character-trauma-counter-1" name="trauma-counter" value="1">
          <label for="character-trauma-counter-1"></label>
          <input type="radio" id="character-trauma-counter-2" name="trauma-counter" value="2">
          <label for="character-trauma-counter-2"></label>
          <input type="radio" id="character-trauma-counter-3" name="trauma-counter" value="3">
          <label for="character-trauma-counter-3"></label>
          <input type="radio" id="character-trauma-counter-4" name="trauma-counter" value="4">
          <label for="character-trauma-counter-4"></label>
        </div>
      </div>
      {{/traumacounter}}
    </div>

    <div id="trauma-list">
      {{#multiboxes data.traumas}}
      <label>
        <input type="checkbox" name="data.traumas" value="cold">
        <span class="checkmark">cold</span>
      </label>
      <label>
        <input type="checkbox" name="data.traumas" value="haunted">
        <span class="checkmark">haunted</span>
      </label>
      <label>
        <input type="checkbox" name="data.traumas" value="obsessed">
        <span class="checkmark">obsessed</span>
      </label>
      <label>
        <input type="checkbox" name="data.traumas" value="paranoid">
        <span class="checkmark">paranoid</span>
      </label>
      <label>
        <input type="checkbox" name="data.traumas" value="reckless">
        <span class="checkmark">reckless</span>
      </label>
      <label>
        <input type="checkbox" name="data.traumas" value="soft">
        <span class="checkmark">soft</span>
      </label>
      <label>
        <input type="checkbox" name="data.traumas" value="unstable">
        <span class="checkmark">unstable</span>
      </label>
      <label>
        <input type="checkbox" name="data.traumas" value="vicious">
        <span class="checkmark">vicious</span>
      </label>
      {{/multiboxes}}
    </div>

  </div>

  {{!-- Harm, Healing and Armor --}}
  <div id="harm-armor" class="section">
    <div id="character-harm">
      <table>
        <thead>
          <th class="black-white" colspan="4">Harm</th>
          <th class="black-white">Healing</th>
          <th class="black-white">Armor</th>
        </thead>
        <tbody>
          <tr>
            <td>3</td>
            <td colspan="2">
              <input type="text" id="character-harm-3-1" name="data.harm.heavy.one" value="{{data.harm.heavy.one}}">
            </td>
            <td>Need Help</td>
            <td rowspan="3">
              {{#multiboxes data.healing-clock}}
              <div id="character-health-clock">
                <input type="radio" value="0" id="character-healing-clock-0" name="data.healing-clock" checked="checked">
                <input type="radio" value="1" id="character-healing-clock-1" name="data.healing-clock">
                <label for="character-healing-clock-1"></label>
                <input type="radio" value="2" id="character-healing-clock-2" name="data.healing-clock">
                <label for="character-healing-clock-2"></label>
                <input type="radio" value="3" id="character-healing-clock-3" name="data.healing-clock">
                <label for="character-healing-clock-3"></label>
                <input type="radio" value="4" id="character-healing-clock-4" name="data.healing-clock">
                <label for="character-healing-clock-4"></label>
                {{/multiboxes}}
              </div>
            </td>
            <td rowspan="3" id="character-armor-uses">
              <div>
                <label for="armor-uses-armor">Armor</label>
                <input id="armor-uses-armor" type="checkbox" name="data.armor-uses.armor" {{checked data.armor-uses.armor}}>
              </div>
              <div>
                <label for="armor-uses-heavy">Heavy</label>
                <input id="armor-uses-heavy" type="checkbox" name="data.armor-uses.heavy" {{checked data.armor-uses.heavy}}>
              </div>
              <div>
                <label for="armor-uses-special">Special</label>
                <input id="armor-uses-special" type="checkbox" name="data.armor-uses.special" {{checked data.armor-uses.special}}>
              </div>
            </td>
          </tr>
          <tr>
            <td>2</td>
            <td>
              <input type="text" id="character-harm-2-1" name="data.harm.medium.one" value="{{data.harm.medium.one}}">
            </td>
            <td>
              <input type="text" id="character-harm-2-2" name="data.harm.medium.two" value="{{data.harm.medium.two}}">
            </td>
            <td>-1D</td>
          </tr>
          <tr>
            <td>1</td>
            <td>
              <input type="text" id="character-harm-1-1" name="data.harm.light.one" value="{{data.harm.light.one}}">
            </td>
            <td>
              <input type="text" id="character-harm-1-2" name="data.harm.light.two" value="{{data.harm.light.two}}">
            </td>
            <td>Less Effect</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

  {{!-- Attributes --}}
  <div class="section">

    <div class="flex-vertical grow-two">
      <div id="abilities" class="flex-vertical">
        <div class="label-stripe">
          <p><label for="character-experience-0">Abilities</label></p>
          <div id="character-experience" class="teeth-experience">
            {{#multiboxes data.experience}}
            <input type="radio" id="character-experience-0" name="data.experience" value="0" dtype="Radio">
            <input type="radio" id="character-experience-1" name="data.experience" value="1" dtype="Radio">
            <label for="character-experience-1"></label>
            <input type="radio" id="character-experience-2" name="data.experience" value="2" dtype="Radio">
            <label for="character-experience-2"></label>
            <input type="radio" id="character-experience-3" name="data.experience" value="3" dtype="Radio">
            <label for="character-experience-3"></label>
            <input type="radio" id="character-experience-4" name="data.experience" value="4" dtype="Radio">
            <label for="character-experience-4"></label>
            <input type="radio" id="character-experience-5" name="data.experience" value="5" dtype="Radio">
            <label for="character-experience-5"></label>
            <input type="radio" id="character-experience-6" name="data.experience" value="6" dtype="Radio">
            <label for="character-experience-6"></label>
            <input type="radio" id="character-experience-7" name="data.experience" value="7" dtype="Radio">
            <label for="character-experience-7"></label>
            <input type="radio" id="character-experience-8" name="data.experience" value="8" dtype="Radio">
            <label for="character-experience-8"></label>
            <input type="radio" id="character-experience-9" name="data.experience" value="9" dtype="Radio">
            <label for="character-experience-9"></label>
            {{/multiboxes}}
          </div>
        </div>
  
        <div id="abilities-list">
          {{#each actor.items as |item id|}}
          {{#eq item.type "ability"}}
            <div class="item flex-horizontal" data-item-id="{{item._id}}">
              <div class="item-body flex-horizontal">
                <b><div class="item-name">{{item.name}}</div></b>
                <div class="item-description">{{item.data.description}}</div>
              </div>
              <a class="item-control item-delete" title="Delete Item"><i class="fas fa-trash"></i></a>
            </div>
          {{/eq}}
          {{/each}}
        </div>
      </div>

      {{!-- Owned Items Tab --}}
      <div id="loadout" class="flex-vertical">
        <div class="label-stripe">
          <p>Loadout: {{data.loadout}}</p>
        </div>
        <div>
          {{#each actor.items as |item id|}}
          {{#eq item.type "item"}}
            <div class="item flex-horizontal" data-item-id="{{item._id}}">
              <div class="item-body flex-horizontal">
                <img src="{{item.img}}" title="{{item.name}}" width="24" height="24"/>
                <div class="item-name">{{item.name}}</div>
                <div class="item-description">{{item.data.description}}</div>
              </div>
              <a class="item-control item-delete" title="Delete Item"><i class="fas fa-trash"></i></a>
            </div>
          {{/eq}}
          {{/each}}
        </div>
      </div>
    </div>

    {{!-- Attributes --}}
    {{> "systems/blades-in-the-dark/templates/parts/attributes.html"}}
  </div>

</form>