<section
    class='tab {{tabs.experiences.cssClass}} {{tabs.experiences.id}}'
    data-tab='{{tabs.experiences.id}}'
    data-group='{{tabs.experiences.group}}'
>
    <button type="button" class="add-experience-btn" type="button" data-action="addExperience">
        <span>{{localize "DOCUMENT.New" type=(localize "DAGGERHEART.GENERAL.experience.single")}}</span>
    </button>

    <fieldset>
        <legend>{{localize tabs.experiences.label}}</legend>
        <ul class="experience-list">
            {{#each document._source.system.experiences as |experience key|}}
                <li class="experience-item">
                    <div class="experience-inner-item">
                        <input class="name" type="text" name="system.experiences.{{key}}.name" value="{{experience.name}}" />
                        <input class="modifier" type="text" name="system.experiences.{{key}}.value" value="{{experience.value}}" data-dtype="Number" />
                        <a data-action="removeExperience" data-experience="{{key}}" data-tooltip="{{localize 'CONTROLS.CommonDelete'}}"><i class="fa-solid fa-trash"></i></a>
                    </div>

                    <textarea name="system.experiences.{{key}}.description">{{experience.description}}</textarea>
                </li>
            {{/each}}
        </ul>
    </fieldset>

</section>