{{#if ruleEditing}}
    <section class="rule-editing">
        <div class="editor-placeholder"></div>
        <div class="item-controls">
            <button type="button" data-action="close">{{localize "PF2E.Item.Rules.Close"}}</button>
            <button type="button" data-action="apply">{{localize "PF2E.Item.Rules.Apply"}}</button>
        </div>
    </section>
{{else}}
    <div class="rules flexcol">
        <div class="nerd-details flexcol">
            <div class="form-group">
                <label for="{{rootId}}-uuid">
                    <span>{{localize "PF2E.UUID.Label"}}</span>
                    <span class="icon fa-solid fa-circle-info"
                          data-tooltip aria-label="{{localize "PF2E.Item.Rules.Hint.UUID"}}"></span>
                </label>
                <div class="form-fields">
                    <input type="text" id="{{rootId}}-uuid" value="{{item.uuid}}" readonly />
                </div>
                <div class="item-controls">
                    <button type="button" class="inline-control icon fa-solid fa-clipboard"
                            data-action="copy-to-clipboard" data-clipboard="{{item.uuid}}"
                            data-tooltip aria-label="{{localize "PF2E.Item.Rules.CopyToClipboard"}}"></button>
                </div>
            </div>
            {{#if item.sourceId}}
                <div class="form-group">
                    <label for="{{rootId}}-source-id">
                        <span>{{localize "PF2E.UUID.SourceId"}}</span>
                        <i class="fa-solid fa-circle-info" data-tooltip="PF2E.Item.Rules.Hint.SourceId"></i>
                    </label>
                    <input type="text" id="{{rootId}}-source-id" value="{{item.sourceId}}" readonly />
                    <div class="item-controls">
                        <button type="button" class="inline-control icon fa-solid fa-clipboard"
                                data-action="copy-to-clipboard" data-clipboard="{{item.sourceId}}"
                                data-tooltip aria-label="{{localize "PF2E.Item.Rules.CopyToClipboard"}}"></button>
                    </div>
                </div>
            {{/if}}
            <div class="form-group">
                <label for="{{rootId}}-slug">
                    <span>{{localize "PF2E.Slug"}}</span>
                    <span class="icon fa-solid fa-circle-info"
                          data-tooltip aria-label="{{localize "PF2E.Item.Rules.Hint.Slug"}}"></span>
                </label>
                <input id="{{rootId}}-slug" type="text" name="system.slug" value="{{item.system.slug}}" />
                <div class="item-controls">
                    <button type="button" class="inline-control icon fa-solid fa-sync-alt" data-action="regenerate-slug"
                            data-tooltip aria-label="{{localize "PF2E.Item.Rules.RegenerateSlug"}}"></button>
                </div>
            </div>
            <div class="form-group">
                <button type="button" class="inline-control view-roll-options" data-action="view-roll-options"
                   data-tooltip-class="pf2e roll-options" data-tooltip-direction="RIGHT">
                    <span>{{localize "PF2E.Item.Rules.ViewRollOptions"}}</span>
                    <i class="fa-solid fa-circle-info" inert></i>
                </button>
            </div>
        </div>
        <div class="rule-element-forms flexcol">
            {{#each rules.elements as |form|}}
                {{{form.template}}}
            {{/each}}
        </div>
        <div class="create-rule-element">
            <select data-action="select-rule-element">
                {{selectOptions rules.selection.types selected=rules.selection.selected}}
            </select>
            <button type="button" class="inline-control" data-action="add-rule-element">
                <i class="fa-solid fa-plus" inert></i>
                <span>{{localize "PF2E.Item.Rules.New"}}</span>
            </button>
        </div>
    </div>
{{/if}}