<section class="tab {{tabs.services.id}} {{tabs.services.cssClass}}"
         data-tab="{{tabs.services.id}}"
         data-group="{{tabs.services.group}}">

    <div class="services">
        {{#each services}}
            {{#if ../editable}}
                <div class="service editable">
                    <div class="name">
                        <label>Name der Dienstleistung</label>
                        <img src="{{this.image}}" data-action="editServiceImage"
                             data-field="system.services.{{@key}}.image" alt="{{name}}"
                             style="width: 32px; height: 32px;">
                        <input type="hidden" name="system.services.{{@key}}.image" value="{{this.image}}"/>
                        <input type="text" name="system.services.{{@key}}.name" value="{{this.name}}"/>
                    </div>
                    <label class="price">Preis (ST)
                        <input type="number" name="system.services.{{@key}}.price" value="{{this.price}}"/>
                    </label>
                    <label class="availability">Verfügbarkeit
                        <input type="number" name="system.services.{{@key}}.availability"
                               value="{{this.availability}}"/>
                    </label>
                    <button type="button" class="actions" data-action="removeService" data-row-id="{{@key}}"><i
                            class="fa-solid fa-trash"></i></button>
                    <div class="description">
                        <label class="description_label">Beschreibung</label>
                        <prose-mirror name="system.services.{{@key}}.description"
                                      button="false"
                                      editable="{{editable}}"
                                      toggled="true"
                                      value="{{this.description}}">
                            {{{this.description}}}
                        </prose-mirror>
                    </div>
                </div>
            {{else}}
                <div class="service" data-tooltip="{{{this.description}}}">
                    <img class="image" src="{{this.image}}" alt="{{this.name}}"/>
                    <span class="name">{{this.name}}</span>
                    <span class="price">{{currency this.price}}</span>
                    <span class="availability {{#if
                            (lte this.availability 0)}}infinite{{/if}}">{{#unless
                            (lte this.availability 0)}}{{this.availability}}{{/unless}}</span>
                    <button type="button" class="actions"><i class="fa-solid fa-coins"></i></button>
                </div>
            {{/if}}
        {{/each}}
    </div>

    <div class="editor">

        {{#if editable}}
            <details>
                <summary>Neue Dienstleistung</summary>
                <div class="pane">
                    <div class="name"><label>Name</label>
                        <img src="{{new_image}}" data-action="editNewServiceImage" data-field="new_image" alt="{{name}}"
                             style="width: 32px; height: 32px;">
                        <input type="text" name="new_name"/>
                    </div>
                    <label class="price"><span>Preis</span>
                        <input type="number" name="new_price"/>
                    </label>
                    <label class="availability"><span>Verfügbarkeit</span>
                        <input type="number" name="new_availability"/>
                    </label>
                    <div class="description">
                        <label class="description_label">Beschreibung</label>
                        <prose-mirror name="new_description"
                                      button="false"
                                      editable="{{editable}}"
                                      toggled="true">
                        </prose-mirror>
                    </div>
                </div>
                <button type="button" data-action="addNewService">Anlegen</button>
            </details>

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