<form class="{{ cssClass }} flexcol drop-target" autocomplete="off">
    {{> journalEntryPageHeader }}

    <div class="form-group">
        <label>{{ localize "JOURNALENTRYPAGE.DND5E.Subclass.FIELDS.item.label" }}</label>
        <div class="form-fields">
            <ol class="items-list">
                {{#if document.system.item}}
                <li class="item flexrow" data-item-uuid="{{ document.system.item }}" data-item-type="linked">
                    <div class="item-name">{{{ dnd5e-linkForUuid document.system.item }}}</div>
                    <div class="item-controls flexrow">
                        <a class="item-control item-delete" data-tooltip="DND5E.ItemDelete"
                           aria-label="{{ localize 'DND5E.ItemDelete' }}">
                            <i class="fa-solid fa-trash" inert></i>
                        </a>
                    </div>
                </li>
                {{else}}
                <li class="item flexrow">{{ localize "JOURNALENTRYPAGE.DND5E.Subclass.ItemHint" }}</li>
                {{/if}}
            </ol>
        </div>
    </div>

    {{ formField systemFields.style value=system.style options=styleOptions }}

    <div class="form-group">
        <label>{{ localize "JOURNALENTRYPAGE.DND5E.Subclass.FIELDS.description.value.label" }}</label>
        <div class="form-fields">
            <button class="launch-text-editor" data-target="system.description.value">
                <i class="fas fa-edit" inert></i> {{ localize "JOURNALENTRYPAGE.DND5E.EditDescription" }}
            </button>
        </div>
        <p class="hint">{{ localize "JOURNALENTRYPAGE.DND5E.Subclass.FIELDS.description.value.hint" }}</p>
    </div>
</form>
