<{{elements.inventory}} class="inventory-element">
  {{#unless isVehicle}}
  <div class="inventory-filters inventory-header flexrow">
    <ul class="filter-list flexrow" data-filter="features">
        <li class="filter-item" data-filter="action">{{localize "DND5E.Action"}}</li>
        <li class="filter-item" data-filter="bonus">{{localize "DND5E.BonusAction"}}</li>
        <li class="filter-item" data-filter="reaction">{{localize "DND5E.Reaction"}}</li>
    </ul>
  </div>
  {{/unless}}

  <ol class="items-list inventory-list">
  {{#each sections as |section sid|}}
    <li class="items-header flexrow">
        <h3 class="item-name flexrow">{{localize section.label}}</h3>

        {{#if section.hasActions}}
        <div class="item-detail item-uses">{{localize "DND5E.Uses"}}</div>
        <div class="item-detail item-action">{{localize "DND5E.Usage"}}</div>
        {{/if}}

        {{#if section.columns}}
            {{#each section.columns}}
                <div class="item-detail {{css}}">{{label}}</div>
            {{/each}}
        {{/if}}

        {{#if ../owner}}
        <div class="item-controls flexrow">
            <a class="item-control item-action" data-action="create" data-tooltip="DND5E.FeatureAdd"
                {{#each section.dataset as |v k|}}data-{{k}}="{{v}}"{{/each}}>
                <i class="fas fa-plus"></i> {{localize "DND5E.Add"}}
            </a>
        </div>
        {{/if}}
    </li>

    <ol class="item-list">
    {{#each section.items as |item iid|}}
    {{#dnd5e-itemContext item as |ctx|}}
        <li class="item flexrow {{#if ctx.isExpanded}}expanded{{/if}}"
            data-item-id="{{item.id}}">
            <div class="item-name flexrow rollable">
                <div class="item-image item-action" data-action="use" tabindex="0" role="button" aria-label="{{item.name}}" style="background-image: url('{{item.img}}')"></div>
                <h4 class="item-action" data-action="toggleExpand">
                    {{#if (eq item.type "subclass")}}&rdsh;{{/if}}
                    {{item.name}}
                    {{#if item.system.isOriginalClass}}
                        <i class="original-class fas fa-sun" data-tooltip="DND5E.ClassOriginal"></i>
                    {{/if}}
                    {{~#if ctx.isStack}} ({{item.system.quantity}}){{/if}}
                </h4>
            </div>

            {{#if section.hasActions}}
            <div class="item-detail item-uses">
                {{#if item.isOnCooldown}}
                <a class="item-action" data-action="recharge">{{item.labels.recharge}}</a>
                {{else if ctx.hasRecharge}}
                {{localize "DND5E.Charged"}}
                {{else if ctx.hasUses}}
                <input type="text" value="{{item.system.uses.value}}" placeholder="0" data-dtype="Number" data-name="system.uses.value">/ {{item.system.uses.max}}
                {{/if}}
            </div>
            <div class="item-detail item-action">
                {{#if item.labels.activation}}
                    {{item.labels.activation}}
                {{/if}}
            </div>

            {{else if (eq item.type "class")}}
            <div class="item-detail item-action">
                <select class="level-selector">
                    {{ selectOptions ctx.availableLevels selected=0 }}
                </select>
            </div>
            {{/if}}

            {{#if section.columns}}
                {{#each section.columns}}
                    <div class="item-detail {{css}}">
                        {{#if editable}}
                            <input type="number" min="0" data-name="{{property}}"
                                   {{#with (getProperty item maxProperty) as |max|}}max="{{max}}"{{/with}}
                                   value="{{#with (getProperty item property) as |value|}}{{value}}
                                   {{~else}}{{getProperty ctx property}}{{/with}}" placeholder="&mdash;">
                        {{else}}
                            {{#if (getProperty item property)}}
                                {{getProperty item property}}
                            {{else}}
                                {{getProperty ctx property}}
                            {{/if}}
                        {{/if}}
                    </div>
                {{/each}}
            {{/if}}

            {{#if @root.owner}}
            <div class="item-controls flexrow">
                {{#if section.crewable}}
                <a class="item-control item-action {{ctx.toggleClass}}" data-action="crew"
                   data-tooltip="{{ctx.toggleTitle}}">
                    <i class="fas fa-sun"></i>
                </a>
                {{/if}}
                <a class="item-control item-action" data-action="edit" data-tooltip="DND5E.ItemEdit">
                    <i class="fas fa-edit"></i>
                </a>
                <a class="item-control item-action" data-action="delete" data-tooltip="DND5E.ItemDelete">
                    <i class="fas fa-trash"></i>
                </a>
            </div>
            {{/if}}

            {{#if ctx.isExpanded}}
                {{> "dnd5e.item-summary" (lookup @root.expandedData item.id)}}
            {{/if}}
        </li>
    {{/dnd5e-itemContext}}
    {{/each}}
    </ol>
  {{/each}}
  </ol>
</{{elements.inventory}}>
