<form class="{{cssClass}}" autocomplete="off">

  {{!-- Sheet Header --}}
  <header class="sheet-header">
    <div class="header-fields">
      <div class="flexrow">
        {{#if token}}
          {{#if options.isOwner}}
          <img class="profile-img dimmed" src="{{img}}" data-edit="img" title="{{name}}" />
          {{/if}}
          <img class="profile-img-token" src="{{token.img}}" title="{{name}}" />
        {{else}}
        <img class="profile-img" src="{{img}}" data-edit="img" title="{{name}}" />
        {{/if}}
        <div class="flexcol">
          <h1 class="charname"><input name="name" type="text" value="{{name}}" placeholder="Name" /></h1>
          {{#if @root.options.isObserver}}
          <div class="form-group">
            <input {{@root.disabled}} class="attribute-value" type="checkbox" name="system.illimite" {{#if system.illimite}}checked{{/if}}/>
            <label for="system.illimite">Quantité illimitée en vente</label>
          </div>
          <div class="form-group">
            <span>
              <label for="system.pourcentage">Appliquer un pourcentage sur les prix</label>
              <input {{@root.disabled}} class="attribute-value" type="number" data-dtype="Number" 
                name="system.pourcentage" value="{{system.pourcentage}}"
                min="20" max="500" step="5"/>
            </span>
          </div>
          {{/if}}
        </div>
      </div>
    </div>
  </header>

  {{!-- Sheet Body --}}
  <section class="sheet-body">
    <div class="flexcol form-group medium-editor">
      {{editor description target="system.description" button=true owner=options.isOwner editable=options.isOwner engine="prosemirror"}}
    </div>
    <hr>
    {{> "systems/foundryvtt-reve-de-dragon/templates/actor/commerce-inventaire.html"}}
    {{#unless system.illimite}}
    {{#if @root.options.isObserver}}
      <hr>
      {{> "systems/foundryvtt-reve-de-dragon/templates/actor/inventaire-monnaie.html"}}
    {{/if}}
    {{/unless}}
    {{!--
      <br>
      <div class="flexcol">
        <ul class="item-list alterne-list">
          <li class="item flexrow list-item">
            <label class="flex-grow">Service</label>
            <label>Moral</label>
            <label>Qualité</label>
            <label>Prix (sols)</label>
            <label>
              {{#unless disabled}}
              <a class="service-add"><i class="fas fa-plus-circle"></i></a>
              {{/unless}}
            </label>
          </li>
          {{#each system.services as |service key|}}
          <li class="item flexrow list-item" data-key="{{key}}">
            <input {{@root.disabled}} type="text" name="services[{{key}}].name" value="{{service.name}}" data-dtype="String" />
            <input {{@root.disabled}} type="checkbox" name="services[{{key}}].system.moral" {{#if service.system.moral}}checked{{/if}} />
            <input {{@root.disabled}} type="number" name="services[{{key}}].system.qualite" value="{{service.system.qualite}}" data-dtype="Number" min="-10" max="10"/>
            <input {{@root.disabled}} type="number" class="input-prix" name="services[{{key}}].system.cout" value="{{numberFormat service.system.cout decimals=2 sign=false}}" data-dtype="Number" min="0" />
            <div class="item-controls">
              <a class="service-acheter" title="Acheter"><i class="fa-sharp fa-solid fa-coins"></i></a>
              {{#unless @root.disabled}}
              <a class="service-vendre" title="Proposer"><i class="fas fa-comments-dollar"></i></a>
              <a class="service-delete" title="Supprimer"><i class="fas fa-trash"></i></a>
              {{/unless}}
            </div>
          </li>
          {{/each}}
        </ul>
      </div>
    --}}
    <br>
    {{> "systems/foundryvtt-reve-de-dragon/templates/actor/editor-notes-mj.html"}}
    <br>
  </section>
</form>