<header class="services">
    <h3 class="item-name">{{@root.i18n 'label'}}</h3>
    <span class="price">{{localize 'PF2E.PriceLabel'}}</span>
    <span class="quantity">{{localize 'PF2E.QuantityLabel'}}</span>
    {{#if isGM}}
    <div class="item-controls large">
        <a data-better-action="export-services" {{#unless services.length}}class="disabled"
            {{/unless}} data-tooltip="{{@root.i18n.path 'export'}}">
            <i class="fa-regular fa-file-export"></i>
        </a>
        <a data-better-action="import-services" data-tooltip="{{@root.i18n.path 'import'}}">
            <i class="fa-regular fa-file-import"></i>
        </a>
        <a data-better-action="create-service" data-tooltip="{{@root.i18n.path 'add'}}">
            <i class="fa-solid fa-fw fa-plus"></i>
        </a>
    </div>
    {{else}}
    <div class="item-controls"></div>
    {{/if}}
</header>
<ul class="items services">
    {{#each services as |service index|}}
    <li data-service-id="{{service.id}}" draggable="false">
        <div class="data">
            <div class="item-name">
                <a class="item-image" data-better-action="service-to-chat">
                    <img class="item-icon" src="{{service.img}}">
                    <i class="fa-solid fa-message"></i>
                </a>
                <h4 class="name rarity-common">
                    <a data-better-action="toggle-service-summary">
                        {{service.name}}
                    </a>
                </h4>
            </div>
            <span
                class="price{{#if @root.isGM}} {{@root.css}}{{/if}}">{{service.enrichedPrice}}</span>
            <span class="quantity">
                {{!-- decrease btn --}}
                {{#if @root.isGM}}
                <a class="decrease{{#if service.isInfinite}} disabled{{/if}}"
                    data-better-action="decrease-service">–</a>
                {{/if}}
                {{!-- quantity --}}
                {{#if service.isInfinite}}
                {{@root.infinity}}
                {{else}}
                {{service.quantity}}
                {{/if}}
                {{!-- increase btn --}}
                {{#if @root.isGM}}
                <a class="increase" data-better-action="increase-service">+</a>
                {{/if}}
            </span>
            <div class="item-controls{{#if @root.isGM}} large{{/if}}">
                {{#if service.quantity}}
                <a data-better-action="buy-service" data-tooltip="{{@root.i18n.path 'buy'}}">
                    <i class="fa-fw fa-solid fa-coins"></i>
                </a>
                {{/if}}
                {{#if @root.isGM}}
                <a data-better-action="give-service" data-tooltip="{{@root.i18n.path 'give'}}">
                    <i class="fa-fw fa-regular fa-hand-back-fist"></i>
                </a>
                <a class="toggle-enabled" data-better-action="toggle-service-enabled"
                    data-tooltip="{{@root.i18n.path 'enabled'}}">
                    {{#if service.enabled}}
                    <i class="fa-fw fa-solid fa-square-check"></i>
                    {{else}}
                    <i class="fa-fw fa-regular fa-square"></i>
                    {{/if}}
                </a>
                <a data-better-action="edit-service" data-tooltip="{{@root.i18n.path 'edit'}}">
                    <i class="fa-solid fa-fw fa-edit"></i>
                </a>
                <a data-better-action="delete-service" data-tooltip="{{@root.i18n.path 'delete'}}">
                    <i class="fa-solid fa-fw fa-trash"></i>
                </a>
                {{/if}}
            </div>
            <div class="item-summary" hidden="hidden">
                <section></section>
                <div>{{localize 'PF2E.LevelLabel'}} {{service.level}}</div>
                <div>{{localize 'PF2E.PriceLabel'}}: {{service.enrichedPrice}}</div>
                </section>
                {{{service.enrichedDescription}}}
            </div>
        </div>
    </li>
    {{/each}}
</ul>