<form class="{{cssClass}}" autocomplete="off">
    <header class="sheet-header">
        <img class="item-sheet-img" src="{{img}}" data-edit="img" title="{{name}}"/>
        <div class="header-fields">
            <h1 class="charname"><input name="name" type="text" value="{{name}}" placeholder="Name"/></h1>
        </div>
    </header>

    {{> systems/fvtt-crucible-rpg/templates/partial-item-nav.html}}

    {{!-- Sheet Body --}}
    <section class="sheet-body">

      {{> systems/fvtt-crucible-rpg/templates/partial-item-description.html}}

      <div class="tab details" data-group="primary" data-tab="details">
        <ul>
            <li class="flexrow"><label class="generic-label">Lore</label>
              <select class="competence-base flexrow" type="text" name="data.lore" value="{{data.lore}}" data-dtype="String">
                {{#select data.lore}}
                <option value="earth">Earth</option>
                <option value="air">Air</option>
                <option value="fire">Fire</option>
                <option value="water">Water</option>
                <option value="shadow">Shadow</option>
                {{/select}}
              </select> 
            </li>

            <li class="flexrow"><label class="generic-label">Circle</label>
              <select class="competence-base flexrow" type="text" name="data.circle" value="{{data.circle}}" data-dtype="Number">
                {{#select data.circle}}
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                {{/select}}
              </select> 
            </li>

            <li class="flexrow"><label class="generic-label">Range</label>
              <input type="text" class="" name="data.range" value="{{data.range}}" data-dtype="String"/>
            </li>

          </ul>
        </div>
    </section>
</form>
