<section
    class='tab {{tabs.selections.cssClass}} {{tabs.selections.id}}'
    data-tab='{{tabs.selections.id}}'
    data-group='{{tabs.selections.group}}'
>
    <div class="section-container levelup-selections-container">
        {{#if (gt this.newExperiences.length 0)}}
            <fieldset class="new-experience">
                <legend class="levelup-selections-title">
                    {{localize "DAGGERHEART.APPLICATIONS.Levelup.summary.newExperiences"}}
                </legend>
                <div class="achievement-experience-cards">
                    {{#each this.newExperiences}}
                        <div class="achievement-experience-card">
                            <input type="text" name="{{concat "levelup.levels." this.level ".achievements.experiences." this.key ".name"}}" value="{{this.name}}" placeholder="{{localize "DAGGERHEART.APPLICATIONS.Levelup.summary.experiencePlaceholder"}}" />
                            <span>{{numberFormat this.modifier sign=true}}</span>
                            <div class="achievement-experience-marker">
                                {{#if this.name}}<i class="fa-solid fa-check"></i>{{/if}}
                            </div>
                        </div>
                    {{/each}}
                </div>
            </fieldset>
        {{/if}}

        {{#if this.traits.active}}
            <fieldset>
                <legend class="levelup-selections-title">
                    <span>{{localize "DAGGERHEART.APPLICATIONS.Levelup.summary.traits"}} {{this.traits.progress.selected}}/{{this.traits.progress.max}}</span>
                </legend>

                <input type="text" class="levelup-trait-increases" value="{{this.traits.values}}" />
            </fieldset>
        {{/if}}

        {{#if this.experienceIncreases.active}}
            <fieldset>
                <legend class="levelup-selections-title">
                    <span>{{localize "DAGGERHEART.APPLICATIONS.Levelup.summary.experienceIncreases"}} {{this.experienceIncreases.progress.selected}}/{{this.experienceIncreases.progress.max}}</span>
                </legend>

                <input type="text" class="levelup-experience-increases" value="{{this.experienceIncreases.values}}" />
            </fieldset>
        {{/if}}

        {{#if (gt this.domainCards.length 0)}}
            <div class="card-section">
                <div class="card-section-header">
                    <side-line-div class="invert"></side-line-div>
                    <h3>{{localize "DAGGERHEART.APPLICATIONS.Levelup.summary.domainCards"}}</h3>
                    <side-line-div></side-line-div>
                </div>
                <div class="tip">

                </div>

                <div class="levelup-card-selection domain-cards">
                    {{#each this.domainCards}}
                        {{#> "systems/daggerheart/templates/components/card-preview.hbs" this }}
                            {{#each this.emptySubtexts}}
                                <div class="">{{this}}</div>
                            {{/each}}
                        {{/"systems/daggerheart/templates/components/card-preview.hbs"}}
                    {{/each}}
                </div>
            </div>
        {{/if}}

        {{#if (gt this.subclassCards.length 0)}}
            <div class="card-section">
                <div class="card-section-header">
                    <side-line-div class="invert"></side-line-div>
                    <h3>{{localize "DAGGERHEART.APPLICATIONS.Levelup.summary.subclass"}}</h3>
                    <side-line-div></side-line-div>
                </div>

                <div class="levelup-card-selection subclass-cards">
                    {{#each this.subclassCards}}
                        {{> "systems/daggerheart/templates/levelup/parts/selectable-card-preview.hbs" img=this.img header=this.featureLabel name=this.name path=this.path selected=this.selected uuid=this.uuid isMulticlass=this.isMulticlass featureState=this.featureState disabled=this.disabled }}
                    {{/each}}
                </div>
            </div>
        {{/if}}

        {{#if this.multiclass}}
            <div class="card-section">
                <div class="card-section-header">
                    <side-line-div class="invert"></side-line-div>
                    <h3>{{localize "DAGGERHEART.APPLICATIONS.Levelup.summary.multiclass"}}</h3>
                    <side-line-div></side-line-div>
                </div>

                <div class="levelup-card-selection multiclass-cards" data-path="{{this.multiclass.path}}" data-tier="{{this.multiclass.tier}}" data-min-cost="{{this.multiclass.minCost}}" data-amount="{{this.multiclass.amount}}" data-value="{{this.multiclass.value}}" data-type="{{this.multiclass.type}}">
                    {{#> "systems/daggerheart/templates/components/card-preview.hbs" this.multiclass }}
                        {{this.multiclass.emptySubtext}}
                    {{/"systems/daggerheart/templates/components/card-preview.hbs"}}
                    {{#if this.multiclass.domains}}
                        <div class="levelup-domains-selection-container">
                            {{#each this.multiclass.domains}}
                                <div class="levelup-domain-selection-container {{#if this.disabled}}disabled{{/if}}" {{#if (not this.disabled)}}data-action="selectDomain" data-uuid="{{../multiclass.uuid}}" data-domain="{{this.id}}" data-path="{{../multiclass.path}}" {{/if}}>
                                    <div class="levelup-domain-label">{{localize this.label}}</div>
                                    <img class="svg" src="{{this.src}}" />
                                    {{#if this.selected}}
                                        <div class="levelup-domain-selected">
                                            <i class="fa-solid fa-check"></i>
                                        </div>
                                    {{/if}}
                                </div>
                            {{/each}}
                        </div>
                    {{/if}}
                    {{#if this.multiclass.subclasses}}
                        <div class="levelup-domains-selection-container">
                            {{#each this.multiclass.subclasses}}
                                <div class="levelup-domain-selection-container {{#if this.disabled}}disabled{{/if}}" {{#if (not this.disabled)}}data-action="selectSubclass" data-uuid="{{../multiclass.uuid}}" data-subclass="{{this.uuid}}" data-path="{{../multiclass.path}}" {{/if}}>
                                    <div class="levelup-domain-label">{{localize this.name}}</div>
                                    <img src="{{this.img}}" />
                                    {{#if this.selected}}
                                        <div class="levelup-domain-selected">
                                            <i class="fa-solid fa-check"></i>
                                        </div>
                                    {{/if}}
                                </div>
                            {{/each}}
                        </div>
                    {{/if}}
                </div>
            </div>
        {{/if}}

        {{#if this.vicious}}
            <div>
                <h3>{{localize "DAGGERHEART.APPLICATIONS.Levelup.summary.vicious"}}</h3>
                {{#each this.vicious}}
                    <div class="levelup-radio-choices">
                        {{radioBoxes (concat "levelup." this.path ".data") @root.viciousChoices checked=(lookup this.data 0)}}
                    </div>
                {{/each}}
            </div>
        {{/if}}
    </div>
</section>