<section
    class='tab {{tabs.features.cssClass}} {{tabs.features.id}}'
    data-tab='{{tabs.features.id}}'
    data-group='{{tabs.features.group}}'
>
    <fieldset>
        <legend>{{localize "TYPES.Item.class"}}</legend>
        {{#if class}}
            <div class="feature-list">
                <li class="feature-line">
                    {{#if class.missing}}
                        <i class="fa-solid fa-link-slash hint image-icon" inert></i>
                        <span class="hint">{{class.name}}</span>
                    {{else}}
                        <img class="image" src="{{class.img}}" />
                        <span>{{class.name}}</span>
                        <div class='controls'>
                            <a
                                class='effect-control'
                                data-action='editDoc'
                                data-item-uuid={{class.uuid}}
                                data-tooltip='{{localize "DAGGERHEART.UI.Tooltip.openItemWorld"}}'
                            >
                                <i class="fa-solid fa-globe" inert></i>
                            </a>
                        </div>
                    {{/if}}
                </li>
            </div>
        {{else}}
            <div class="drag-area">{{localize "DAGGERHEART.GENERAL.missingDragDropThing" thing=(localize "TYPES.Item.class")}}</div>
        {{/if}}
    </fieldset>

    <fieldset class="drop-section" data-type="foundation">
        <legend>
            {{localize "DAGGERHEART.GENERAL.Tabs.foundation"}} 
            <a><i data-action="addFeature" data-type="foundation" class="fa-solid fa-plus icon-button"></i></a>
        </legend>

        <div class="feature-list">
            {{#each source.system.foundationFeatures as | feature | }}
                {{> 'systems/daggerheart/templates/sheets/global/partials/feature-section-item.hbs' type='foundation' feature=feature}}
            {{/each}}
        </div>
    </fieldset>

    <fieldset class="drop-section" data-type="specialization">
        <legend>
            {{localize "DAGGERHEART.GENERAL.Tabs.specialization"}} 
            <a><i data-action="addFeature" data-type="specialization" class="fa-solid fa-plus icon-button"></i></a>
        </legend>

        <div class="feature-list">
            {{#each source.system.specializationFeatures as | feature |}}
                {{> 'systems/daggerheart/templates/sheets/global/partials/feature-section-item.hbs' type='specialization' feature=feature}}
            {{/each}}
        </div>
    </fieldset>

    <fieldset class="drop-section" data-type="mastery">
        <legend>
            {{localize "DAGGERHEART.GENERAL.Tabs.mastery"}} 
            <a><i data-action="addFeature" data-type="mastery" class="fa-solid fa-plus icon-button"></i></a>
        </legend>

        <div class="feature-list">
            {{#each source.system.masteryFeatures as | feature |}}
                {{> 'systems/daggerheart/templates/sheets/global/partials/feature-section-item.hbs' type='mastery' feature=feature}}
            {{/each}}
        </div>
    </fieldset>
</section>