<form class="interactable tab-features type-{{localize lootsheettype}}" autocomplete="off">
  <header class="sheet-header">
    <div class="left">
      <div class="portrait">
        {{!-- Portrait --}}
        {{#if editable}}
        <label class="slide-toggle">
          <input
            type="checkbox"
            name="flags.dnd5e.showTokenPortrait"
            {{
            checked
            portrait.token
            }}
          />
          {{#if portrait.token}}
          {{ localize "DOCUMENT.Token" }}
          <i class="fas fa-toggle-on"></i>
          {{else}}
          {{ localize "DND5E.Portrait" }}
          <i class="fas fa-toggle-off"></i>
          {{/if}}
        </label>
        {{/if}}
        <img src="{{ portrait.src }}" alt="{{ actor.name }}"
        {{#if (and editable portrait.path)}}data-edit="{{ portrait.path }}"{{/if}}>
      </div>
    </div>

    <div class="right stats">
      <div class="top">
        <div class="left">
          {{!-- Name --}}
          {{#if editable}}
          <input type="text" name="name" class="document-name uninput" value="{{ actor.name }}" />
          {{else}}
          <div class="document-name">{{ actor.name }}</div>
          {{/if}}
        </div>

        <div class="right">
          <div class="left">
            <div class="sheet-header-buttons">
              {{#if isGM}} {{#ifeq lootsheettype "Merchant"}}
              <button
                type="button"
                class="price-modifier gold-button"
                name="price-modifier"
                data-tooltip="{{localize 'LOOTSHEET.PriceModifier'}}"
                aria-label="{{localize 'LOOTSHEET.PriceModifier'}}"
              >
                <i class="fa fa-balance-scale"></i>
              </button>
              {{/ifeq}}

              {{/if}}

              {{#ifeq lootsheettype "Loot"}}
              <button
                type="button"
                class="loot-all gold-button"
                name="loot-all"
                data-tooltip="{{localize 'LOOTSHEET.LootAll'}}"
                aria-label="{{localize 'LOOTSHEET.LootAll'}}"
              >
                <i class="fas fa-gem"></i>
              </button>
              {{/ifeq}}
            </div>
            <div class="proficiency">
              <span>{{localize lootsheettype}}</span>
            </div>
          </div>
        </div>
      </div>

      <div class="middle ability-scores card flexrow">
        <div class="ability-score">
          <img
            src="modules/lootsheet-simple/icons/container.svg"
            alt="{{localize 'DND5E.ItemContainerCapacityItems'}}"
          />
          <a class="label"
            >{{localize "LOOTSHEET.Total"}}
            {{localize
            "DND5E.ItemContainerCapacityItems"}}</a
          >
          <div class="score">{{ totalItems }}</div>
        </div>
        <div class="ability-score">
          <img
            src="modules/lootsheet-simple/icons/item-grant.svg"
            alt="{{localize 'DND5E.QuantityAbbr'}}"
          />
          <a class="label">{{localize "LOOTSHEET.Total"}} {{localize "DND5E.QuantityAbbr"}}</a>
          <div class="score">{{ totalQuantity }}</div>
        </div>
        <div class="ability-score">
          <img
            src="modules/lootsheet-simple/icons/consumable.svg"
            alt="{{localize 'DND5E.Weight'}}"
          />
          <a class="label">{{localize "LOOTSHEET.Total"}} {{localize "DND5E.Weight"}}</a>
          <div class="score">{{ totalWeight }} <i class="fas fa-weight-hanging"></i></div>
        </div>

        <div class="ability-score">
          <img src="modules/lootsheet-simple/icons/loot.svg" alt="Loot" />
          {{#ifeq lootsheettype "Merchant"}}
          <a class="label">{{localize "LOOTSHEET.Total"}} {{localize "DND5E.Price"}}</a>
          {{/ifeq}} {{#ifeq lootsheettype "Loot"}}
          <a class="label">{{localize "LOOTSHEET.Total"}} {{localize "LOOTSHEET.Value"}}</a>
          {{/ifeq}}
          <div class="score">
            {{ totalPrice }}
            <i class="currency gp" style="vertical-align: bottom" data-tooltip="Gold"></i>
          </div>
        </div>
      </div>

      <div class="bottom"></div>
    </div>
  </header>

  <section class="sheet-body">
    <div class="main-content">
      {{#if @root.editable}}
      <div class="sidebar">
        <div class="pills-group">
          <h3 class="icon" data-tooltip="{{localize 'LOOTSHEET.TypeOfSheetHelp'}}">
            <i class="fas fa-id-card"></i>
            <span class="roboto-upper">{{localize "LOOTSHEET.TypeOfSheetName"}}</span>
          </h3>
          <div class="flexrow">
            <select class="sheet-type" name="system.flags.lootsheet-simple.lootsheettype">
              {{#select system.flags.lootsheet-simple.lootsheettype}}
              {{#ifeq lootsheettype "Merchant"}}
              <option value="Loot" selected>{{localize "LOOTSHEET.Loot"}}</option>
              {{else}}
              <option value="Loot">{{localize "LOOTSHEET.Loot"}}</option>
              {{/ifeq}}
              {{#ifeq lootsheettype "Merchant"}}
              <option value="Merchant" selected>{{localize "LOOTSHEET.Merchant"}}</option>
              {{else}}
              <option value="Merchant">{{localize "LOOTSHEET.Merchant"}}</option>
              {{/ifeq}}
              {{/select}}
            </select>
          </div>
        </div>

        {{#ifeq lootsheettype "Merchant"}}
        <div class="pills-group merchant-settings">
          <h3 class="icon" data-tooltip="{{localize 'LOOTSHEET.MerchantSettingsInfo'}}">
            <i class="fas fa-balance-scale"></i>
            <span class="roboto-upper">{{localize 'LOOTSHEET.MerchantSettings'}}</span>
          </h3>
          <div>
            <div class="flexrow">
              <select
                class="sheet-rolltable"
                id="lootsheet-rolltable"
                name="system.flags.lootsheet-simple.rolltable"
              >
                <!-- Placeholder option -->
                <option value="" disabled>{{localize 'LOOTSHEET.RollableTable'}}</option>

                <!-- Loop through rolltables -->
                {{#each rolltables as |table|}}
                <option value="{{
                  table.name
                }}"
                {{#if (eq table.name ../selectedRollTable)









                }}selected{{/if









                }}>
                {{
                  table.name
                }}

                {{/each}}
              </select>
            </div>
            <div class="flexrow">
              <input name="system.flags.lootsheet-simple.shopQty" type="text" data-dtype="String"
              placeholder="{{localize "LOOTSHEET.ShopFormula"}} e.g. 1d20" value="{{ shopQty }}" />
            </div>
            <div class="flexrow">
              <input name="system.flags.lootsheet-simple.itemQty" type="text" data-dtype="String"
              placeholder="{{localize "LOOTSHEET.ItemFormula"}} e.g. 1d4" value="{{ itemQty }}" />
            </div>
            <div class="flexrow">
              <input name="system.flags.lootsheet-simple.itemQtyLimit" type="text"
              data-dtype="String" placeholder="{{localize "LOOTSHEET.LimitQty"}} e.g. 10" value="{{
                itemQtyLimit
              }}" />
            </div>

            <div class="flexrow" style="margin-top: 0.5rem; margin-bottom: 0.5rem">
              <label
                class="clear-inventory slide-toggle"
                name="system.flags.lootsheet-simple.clearInventory"
              >
                <input
                  type="checkbox"
                  name="system.flags.lootsheet-simple.clearInventory"
                  {{
                  checked
                  clearInventory
                  }}
                />
                {{#if clearInventory}}
                {{localize "LOOTSHEET.ClearInventory"}}
                <i class="fas fa-toggle-on"></i>
                {{else}}
                {{localize "LOOTSHEET.ClearInventory"}}
                <i class="fas fa-toggle-off"></i>
                {{/if}}
              </label>
            </div>
          </div>

          <div class="flexrow">
            <button
              type="button"
              class="update-inventory"
              type="update-inventory"
              name="update-inventory"
              id="update-inventory"
              disabled
            >
              <i class="fas fa-balance-scale"></i> {{localize "LOOTSHEET.UpdateShop"}}
            </button>
          </div>
        </div>
        {{/ifeq}}

        <div class="pills-group">
          <h3 class="icon" data-tooltip="{{localize 'LOOTSHEET.PermissionInfo'}}">
            <i class="fas fa-lock"></i>
            <span class="roboto-upper">{{localize "LOOTSHEET.Permissions"}}</span>
          </h3>
          <div class="flexrow">
            <input
              type="hidden"
              name="actor.flags.loot.playersPermission"
              value="{{ actor.flags.loot.playersPermission }}"
              data-dtype="Number"
            />
            <ol class="permissions-list">
              {{#each actor.flags.loot.players as |player p|}}
              <li class="permission" data-skill="{{ p }}">
                <input
                  type="hidden"
                  name="{{ player.playerId }}"
                  value="{{ player.lootPermission }}"
                  data-dtype="Number"
                  actor="{{ player.actorId }}"
                />
                <a class="permission-proficiency" title="{{ player.lootPermissionDescription }}"
                  >{{{player.icon}}}</a
                >
                <span class="permission-name">{{ player.actor }} ({{ player.name }})</span>
              </li>
              {{/each}}
            </ol>
          </div>
        </div>
      </div>
      {{/if}}

      <section class="tab-body">
        <div
          class="tab inventory active {{@root.editable}}"
          data-group="primary"
          data-tab="features"
        >
          <dnd5e-inventory class="inventory-element" v2="">
            <section class="currency {{@root.editable}}">
              {{#if @root.owner}}
                <button
                  type="button"
                  class="item-action unbutton"
                  data-action="currency"
                  data-tooltip="DND5E.CurrencyManager.Title"
                  aria-label="Manage Currency"
                >
                  <i class="fas fa-coins"></i>
                </button>
              {{/if}}
              {{#each system.currency}}
              <label aria-label="{{ lookup (lookup @root.config.currencies @key) 'label' }}">
                <i
                  class="currency {{ @key }}"
                  data-tooltip="{{ lookup (lookup @root.config.currencies @key) 'label' }}"
                ></i>
                <input
                  type="text"
                  class="currency uninput"
                  name="system.currency.{{ @key }}"
                  value="{{ this }}"
                  data-dtype="Number"
                  inputmode="numeric"
                  pattern="[0-9+=\-]*"
                />
              </label>
              {{/each}} {{#ifeq lootsheettype "Loot"}} {{#if lootCurrency}}
              <button
                type="button"
                class="item-action unbutton split-coins"
                data-tooltip="Split Coins"
                aria-label="Split Coins"
              >
                <i class="fas fa-coins"></i>
              </button>
              <button
                type="button"
                class="item-action unbutton currency-loot"
                data-tooltip="Loot Coins"
                aria-label="Loot Coins"
              >
                <i class="fas fa-gem"></i>
              </button>
              {{/if}} {{/ifeq}}
            </section>

            <div class="middle {{@root.editable}}">
              {{!-- Searching & Filtering --}}
              <item-list-controls
                for="inventory"
                label="{{ localize 'DND5E.InventorySearch' }}"
                sort="toggle"
                collection="items"
              >
              </item-list-controls>
            </div>

            {{!-- Inventory List --}}
            <section class="items-list inventory-list" data-item-list="inventory">
              {{!-- Sections / Categories --}}
              {{#each inventory as |
              section |}}
              <div class="items-section card" {{ dnd5e-dataset dataset }}>
                {{!-- Section Header --}}
                <div class="items-header header">
                  <h3 class="item-name">{{ localize section.label }}</h3>

                  <div class="item-header item-weight">
                    {{ localize "DND5E.Weight" }}
                  </div>
                  <div class="item-header item-quantity">
                    {{ localize "DND5E.Quantity" }}
                  </div>
                  {{#ifeq ../lootsheettype "Merchant"}}
                  <div class="item-header item-price">
                    {{ localize "DND5E.Price" }}
                  </div>
                  {{/ifeq}}

                  {{#ifeq ../lootsheettype "Loot"}}
                  <div class="item-header item-price">Value</div>
                  {{/ifeq}}

                  <div class="item-header item-controls"></div>
                </div>

                {{!-- Section Contents --}}
                <ol class="item-list unlist">
                  {{#each items as |item|}}
                  {{#dnd5e-itemContext item as |ctx|}}

                  {{!-- Items --}}
                  <li
                    class="item collapsible {{#unless ctx.isExpanded}}collapsed{{/unless}}"
                    data-item-id="{{ item.id }}"
                    data-entry-id="{{ item.id }}"
                    data-item-name="{{ item.name }}"
                    data-item-sort="{{ item.sort }}"
                    data-ungrouped="all"
                    data-grouped="{{ item.type }}"
                  >
                    <div class="item-row">
                      {{!-- Item Name --}}
                      <div
                        class="item-name item-action item-tooltip {{ @root.rollableClass }}"
                        role="button"
                        data-action="edit"
                        aria-label="{{ item.name }}"
                      >
                        <img
                          class="item-image gold-icon"
                          src="{{ item.img }}"
                          alt="{{ item.name }}"
                        />
                        <div class="name name-stacked">
                          <span class="title">{{ item.name }}</span>
                          {{#if ctx.subtitle}}
                          <span class="subtitle">{{{ ctx.subtitle }}}</span>
                          {{/if}}
                        </div>
                      </div>

                      {{!-- Item Weight --}}
                      <div
                        class="item-detail item-weight {{#unless ctx.totalWeight}}empty{{/unless}}"
                      >
                        {{#if ctx.totalWeight}}
                        <i class="fas fa-weight-hanging"></i> {{ ctx.totalWeight }} {{/if}}
                      </div>

                      {{!-- Item Quantity --}}
                      <div class="item-detail item-quantity">
                        {{#if @root.owner}}
                          {{#notequal item.type "container"}}
                            <a
                              class="adjustment-button"
                              data-action="decrease"
                              data-property="system.quantity"
                            >
                              <i class="fas fa-minus"></i>
                            </a>
                          {{/notequal}} 
                        {{/if}}
                        {{#notequal item.type "container"}}
                        <input
                          type="text"
                          value="{{ item.system.quantity }}"
                          placeholder="0"
                          data-dtype="Number"
                          data-name="system.quantity"
                          inputmode="numeric"
                          pattern="[0-9+=\-]*"
                          min="0"
                        />
                        {{else}}
                        <div class="item-detail">{{ item.system.quantity }}</div>
                        {{/notequal}}
                        {{#if @root.owner}}
                          {{#notequal item.type "container"}}
                            <a
                              class="adjustment-button"
                              data-action="increase"
                              data-property="system.quantity"
                            >
                              <i class="fas fa-plus"></i>
                            </a>
                          {{/notequal}}
                        {{/if}}
                      </div>

                      {{!-- Item Price --}}
                      <div
                        class="item-detail item-price {{#unless item.system.price.value}}empty{{/unless}}"
                      >
                        {{#if item.system.price.value}}
                        {{ lootsheetprice item.system.price.value ../../priceModifier }}
                        <i class="currency {{ item.system.price.denomination }}"></i>
                        {{/if}}
                      </div>

                      {{!-- Item Status --}}
                      <div class="item-detail item-controls">
                        {{#if @root.editable}}
                        {{!-- Editing --}}
                        <a
                          class="item-control item-action"
                          data-action="edit"
                          data-tooltip="DND5E.ItemEdit"
                          aria-label="{{ localize 'DND5E.ItemEdit' }}"
                        >
                          <i class="fas fa-pen-to-square"></i>
                        </a>

                        {{!-- Deleting --}}
                        <a
                          class="item-control item-action"
                          data-action="delete"
                          data-tooltip="DND5E.ItemDelete"
                          aria-label="{{ localize 'DND5E.ItemDelete' }}"
                        >
                          <i class="fas fa-trash"></i>
                        </a>
                        {{/if}}

                        {{!-- Expand/Collapse --}}
                        <a
                          class="item-control interface-only"
                          data-toggle-description
                          aria-label="{{ localize 'DND5E.ToggleDescription' }}"
                        >
                          {{#if ctx.isExpanded}}
                          <i class="fas fa-compress"></i>
                          {{else}}
                          <i class="fas fa-expand"></i>
                          {{/if}}
                        </a>

                        {{#ifnot @root.editable}}
                        {{#ifeq ../../lootsheettype "Loot"}}
                        <a
                          class="item-control item-lootall item-action"
                          title="{{localize 'LOOTSHEET.LootStack'}}"
                          ><i class="far fa-gem"></i
                        ></a>
                        <a
                          class="item-control item-loot item-action"
                          title="{{localize 'LOOTSHEET.Loot'}}"
                          ><i class="fas fa-gem"></i
                        ></a>
                        {{/ifeq}}

                        {{#ifeq ../../lootsheettype "Merchant"}}
                        <a
                          class="item-control item-buyall item-action"
                          title="{{localize 'LOOTSHEET.BuyStack'}}"
                          ><i class="fas fa-coins"></i
                        ></a>
                        <a
                          class="item-control item-buy item-action"
                          title="{{localize 'LOOTSHEET.Buy'}}"
                          ><i class="fas fa-dollar-sign"></i
                        ></a>
                        {{/ifeq}}
                        {{/ifnot}}

                        {{!-- Context Menu --}}
                        <a
                          class="item-control interface-only"
                          data-context-menu
                          aria-label="{{ localize 'DND5E.AdditionalControls' }}"
                        >
                          <i class="fas fa-ellipsis-vertical"></i>
                        </a>
                      </div>
                    </div>

                    <div class="item-description collapsible-content">
                      <div class="wrapper">
                        {{#if ctx.isExpanded}}
                        {{> "dnd5e.item-summary" ctx.expanded }}
                        {{/if}}
                      </div>
                    </div>
                  </li>
                  {{/dnd5e-itemContext}}
                  {{/each}}
                </ol>
              </div>
              {{/each}}
            </section>

            {{#if @root.owner}}
            <div class="bottom">
              {{!-- Encumbrance --}}
              <div class="encumbrance"></div>

              {{!-- Child Creation --}}
              <button
                type="button"
                class="create-child gold-button"
                aria-label="{{ 'SIDEBAR.Create' type=(localize 'DOCUMENT.Item') }}"
              >
                <i class="fas fa-plus"></i>
              </button>
            </div>
            {{/if}}
          </dnd5e-inventory>
        </div>

        <div class="tab biography {{@root.editable}}" data-group="primary" data-tab="biography">
          {{#if editingDescriptionTarget}}

          {{ editor enriched.editing target=editingDescriptionTarget button=false editable=true engine="prosemirror"
                      collaborate=true }}

          {{else}}

          {{!-- Public Information --}}
          <div class="middle" data-target="system.details.biography.public">
            <h3 class="icon">
              {{#if @root.owner}}
              <a
                class="editor-edit"
                data-action="editDescription"
                aria-label="{{ localize 'DND5E.BiographyPublicEdit' }}"
              >
                <i class="fas fa-feather"></i>
              </a>
              <dnd5e-icon src="systems/dnd5e/icons/svg/ink-pot.svg"></dnd5e-icon>
              {{/if}}
              <span class="roboto-upper">{{ localize "DND5E.Public" }}</span>
            </h3>

            <div class="editor">
              <div class="editor-content">{{{ enriched.public }}}</div>
            </div>
          </div>

          {{!-- Details --}}
          <div class="bottom" data-target="system.details.biography.value">
            <h3 class="icon">
              {{#if @root.owner}}
              <a
                class="editor-edit"
                data-action="editDescription"
                aria-label="{{ localize 'DND5E.DetailsEdit' }}"
              >
                <i class="fas fa-feather"></i>
              </a>
              <dnd5e-icon src="systems/dnd5e/icons/svg/ink-pot.svg"></dnd5e-icon>
              {{/if}}
              <span class="roboto-upper">{{ localize "DND5E.Details" }}</span>
            </h3>

            <div class="editor">
              <div class="editor-content">{{{ enriched.value }}}</div>
            </div>
          </div>

          {{/if}}
        </div>
      </section>
    </div>
  </section>
</form>
