<form class="{{cssClass}}" autocomplete="off">
    <section class="form-body">
	    <p class="notes">{{localize "DND5E.FlagsInstructions"}}</p>

        <h3 class="form-header">{{localize "TYPES.Item.class"}}</h3>
        <div class="form-group">
            <label>{{localize "DND5E.ClassMakeOriginal"}}</label>
            <select name="system.details.originalClass">
              {{selectOptions classes selected=actor.system.details.originalClass}}
            </select>
            <p class="notes">{{localize "DND5E.ClassMakeOriginalHint"}}</p>
        </div>

        {{#each flags as |fs section|}}
        <h3 class="form-header">{{section}}</h3>
        {{#each fs as |flag key|}}

        <div class="form-group">
            <label>{{flag.name}}</label>

            {{#if flag.isCheckbox}}
            <input type="checkbox" name="{{key}}" {{checked flag.value}}/>

            {{else if flag.isSelect}}
            <select name="{{key}}" data-dtype="{{flag.type}}">
                {{selectOptions flag.choices selected=flag.value localize=true}}
            </select>

            {{else}}
            <input type="text" name="{{key}}" value="{{flag.value}}" placeholder="{{flag.placeholder}}" data-dtype="{{flag.type}}"/>
            {{/if}}

            <p class="notes">{{flag.hint}}</p>
        </div>
        {{/each}}
        {{/each}}

        <h3 class="form-header">{{localize "DND5E.Bonuses"}}</h3>
        <p class="notes">{{localize "DND5E.BonusesHint"}}</p>
        {{#each bonuses as |b|}}
        <div class="form-group">
            <label>{{localize b.label}}</label>
            <input type="text" name="{{b.name}}" value="{{b.value}}"/>
        </div>
        {{/each}}
    </section>

    <footer class="form-footer">
        <button type="submit">
            <i class="far fa-save"></i> {{localize "DND5E.FlagsSave"}}
        </button>
    </footer>
</form>
