{{#if service}}
<div class="service" data-id="{{service.id}}">
    <input type="hidden" name="id" value="{{service.id}}">
    <input type="hidden" name="macroUUID" value="{{service.macroUUID}}">
    <div class="header">
        <img class="image" data-action="edit-image" data-src="{{service.img}}"
            src="{{service.img}}">
        <div class="data">
            <div class="row">
                <label class="name">
                    <span>{{@root.i18n 'name'}}</span>
                    <input type="text" name="name" value="{{service.name}}"
                        placeholder="{{service.id}}">
                </label>
                <label class="level">
                    <span>{{localize 'PF2E.LevelLabel'}}</span>
                    <input type="number" name="level" value="{{service.level}}" min="0" step="1">
                </label>
            </div>
            <div class="row">
                <label class="enabled">
                    <span>{{@root.i18n 'enabled'}}</span>
                    <input type="checkbox" name="enabled" {{checked service.enabled}}>
                </label>
                <label class="price">
                    <span>{{localize 'PF2E.PriceLabel'}}</span>
                    <input type="text" name="price" value="{{service.enrichedPrice}}"
                        placeholder="0 gp">
                </label>
                <label class="quantity">
                    <span>
                        {{localize 'PF2E.QuantityLabel'}}
                        <i class="fa-light fa-circle-info"
                            data-tooltip="{{@root.i18n.path 'quantity'}}"></i>
                    </span>
                    <input type="number" name="quantity" value="{{service.quantity}}" min="-1"
                        step="1">
                </label>
            </div>
            <div class="row">
                <label class="macro">
                    <span>{{@root.i18n 'macro.label'}}</span>
                    {{#if service.macro}}
                    <a class="macro-link" data-tooltip="{{localize 'CONTROLS.CommonOpenSheet'}}"
                        data-action="open-macro-sheet">
                        <img src="{{service.macro.img}}" />
                        <span>{{service.macro.name}}</span>
                    </a>
                    <a data-action="delete-macro"
                        data-tooltip="{{localize 'PF2E.Item.Action.SelfAppliedEffect.Delete'}}">
                        <i class="fa-solid fa-trash"></i>
                    </a>
                    {{else}}
                    <div class="macro-link empty">
                        <span>{{@root.i18n 'macro.drop'}}</span>
                    </div>
                    <a data-action="open-macros" data-tooltip="MACRO.Directory">
                        <i class="fa-solid fa-folder"></i>
                    </a>
                    {{/if}}
                </label>
            </div>
        </div>
    </div>
    <prose-mirror toggled="true" name="description" value="{{service.description}}">
        {{{service.enrichedDescription}}}
    </prose-mirror>
</div>
{{else}}
<p class="no-service">{{@root.i18n 'none'}}</p>
{{/if}}