configurable-reactions/templates/reaction-config.hbs

<div class="cr-config">
  <header class="cr-header">
    <h2>{{localize "CONFIGURABLE_REACTIONS.App.Title"}}</h2>
    <button type="button" data-action="createReaction">
      <i class="fa-solid fa-plus"></i> {{localize "CONFIGURABLE_REACTIONS.Reactions.Create"}}
    </button>
  </header>

  <section class="cr-grid">
    <aside class="cr-sidebar">
      <div class="form-group">
        <label>{{localize "CONFIGURABLE_REACTIONS.Reactions.Selected"}}</label>
        <select name="selectedReactionId">
          {{#each reactions}}
            <option value="{{this.id}}" {{#if (eq this.id ../selectedReaction.id)}}selected{{/if}}>{{this.name}}</option>
          {{/each}}
        </select>
      </div>

      <div class="cr-button-column">
        <button type="button" data-action="assignSelectedTokens" {{#unless selectedReaction}}disabled{{/unless}}>
          <i class="fa-solid fa-crosshairs"></i> {{localize "CONFIGURABLE_REACTIONS.Assignments.AssignSelectedTokens"}}
        </button>
        <button type="button" data-action="deleteReaction" {{#unless selectedReaction}}disabled{{/unless}}>
          <i class="fa-solid fa-trash"></i> {{localize "CONFIGURABLE_REACTIONS.Reactions.Delete"}}
        </button>
      </div>

      <h3>{{localize "CONFIGURABLE_REACTIONS.Builder.Palette"}}</h3>
      <p class="notes">{{localize "CONFIGURABLE_REACTIONS.Builder.DragHint"}}</p>

      <h4>{{localize "CONFIGURABLE_REACTIONS.Builder.TriggerPalette"}}</h4>
      <div class="cr-palette">
        {{#each triggerPalette}}
          <article class="cr-palette-tile" data-cr-drag="trigger" data-cr-type="{{this.type}}" title="{{this.hint}}">
            <i class="{{this.icon}}"></i>
            <span>{{this.label}}</span>
            <code>{{this.type}}</code>
          </article>
        {{/each}}
      </div>

      <h4>{{localize "CONFIGURABLE_REACTIONS.Builder.ActionPalette"}}</h4>
      <div class="cr-palette">
        {{#each actionPalette}}
          <article class="cr-palette-tile" data-cr-drag="action" data-cr-type="{{this.type}}" title="{{this.hint}}">
            <i class="{{this.icon}}"></i>
            <span>{{this.label}}</span>
            <code>{{this.type}}</code>
          </article>
        {{/each}}
      </div>

      <h3>{{localize "CONFIGURABLE_REACTIONS.Assignments.Title"}}</h3>
      <ol class="cr-assignment-list">
        {{#each assignments}}
          <li>
            <div>
              <strong>{{this.name}}</strong>
              <small>{{this.mode}} · {{this.reactionName}}</small>
            </div>
            <button type="button" data-action="removeAssignment" data-assignment-id="{{this.id}}" title="{{localize 'CONFIGURABLE_REACTIONS.Common.Remove'}}">
              <i class="fa-solid fa-xmark"></i>
            </button>
          </li>
        {{/each}}
      </ol>
    </aside>

    <main class="cr-main">
      {{#if selectedReaction}}
        <section class="cr-card cr-basics">
          <div class="form-group">
            <label>{{localize "CONFIGURABLE_REACTIONS.Reactions.Name"}}</label>
            <input type="text" name="reactionName" value="{{selectedReaction.name}}">
          </div>
          <div class="form-group">
            <label>{{localize "CONFIGURABLE_REACTIONS.Reactions.Enabled"}}</label>
            <input type="checkbox" name="reactionEnabled" {{#if selectedReaction.enabled}}checked{{/if}}>
          </div>
          <button type="button" data-action="saveReactionBasics">
            <i class="fa-solid fa-floppy-disk"></i> {{localize "CONFIGURABLE_REACTIONS.Common.Apply"}}
          </button>
        </section>

        <section class="cr-builder-grid">
          <div class="cr-drop-card" data-cr-drop="trigger">
            <h3><i class="fa-solid fa-bolt"></i> {{localize "CONFIGURABLE_REACTIONS.Builder.TriggerArea"}}</h3>
            {{#if activeTrigger}}
              <div class="cr-flow-node cr-trigger-node">
                <i class="{{activeTrigger.icon}}"></i>
                <div>
                  <strong>{{activeTrigger.label}}</strong>
                  <code>{{selectedReaction.trigger.type}}</code>
                  {{#if triggerSpellName}}
                    <span class="cr-spell-chip"><i class="fa-solid fa-book-sparkles"></i> {{triggerSpellName}}</span>
                  {{else}}
                    {{#if activeTriggerAcceptsSpell}}
                      <small class="cr-inline-drop">{{localize "CONFIGURABLE_REACTIONS.Builder.DropSpellOnTrigger"}}</small>
                    {{/if}}
                  {{/if}}
                </div>
                {{#if triggerSpellName}}
                  <button type="button" data-action="clearTriggerSpell" title="{{localize 'CONFIGURABLE_REACTIONS.Common.Remove'}}">
                    <i class="fa-solid fa-xmark"></i>
                  </button>
                {{/if}}
              </div>
            {{else}}
              <p class="cr-empty-drop">{{localize "CONFIGURABLE_REACTIONS.Builder.DropTriggerHere"}}</p>
            {{/if}}
          </div>

          <div class="cr-drop-card" data-cr-drop="actions">
            <h3><i class="fa-solid fa-list-check"></i> {{localize "CONFIGURABLE_REACTIONS.Builder.ActionArea"}}</h3>
            <p class="notes">{{localize "CONFIGURABLE_REACTIONS.Builder.DropSpellCreatesAction"}}</p>
            {{#if visualActions.length}}
              <ol class="cr-action-flow">
                {{#each visualActions}}
                  <li class="cr-flow-node cr-action-node" data-cr-drag="existingAction" data-action-index="{{this.index}}" {{#if this.isSpellAction}}data-cr-drop="action-spell"{{/if}}>
                    <i class="{{this.icon}}"></i>
                    <div>
                      <strong>{{this.label}}</strong>
                      <small>{{this.summary}}</small>
                      <code>{{this.type}}</code>
                      {{#if this.isSpellAction}}
                        {{#if this.spellName}}
                          <span class="cr-spell-chip"><i class="fa-solid fa-book-sparkles"></i> {{this.spellName}}</span>
                        {{else}}
                          <small class="cr-inline-drop">{{localize "CONFIGURABLE_REACTIONS.Builder.DropSpellOnAction"}}</small>
                        {{/if}}
                      {{/if}}
                    </div>
                    <div class="cr-action-buttons">
                      {{#if this.spellName}}
                        <button type="button" data-action="clearActionSpell" data-action-index="{{this.index}}" title="{{localize 'CONFIGURABLE_REACTIONS.Common.Remove'}}">
                          <i class="fa-solid fa-book-xmark"></i>
                        </button>
                      {{/if}}
                      <button type="button" data-action="removeAction" data-action-index="{{this.index}}" title="{{localize 'CONFIGURABLE_REACTIONS.Common.Remove'}}">
                        <i class="fa-solid fa-xmark"></i>
                      </button>
                    </div>
                  </li>
                {{/each}}
              </ol>
            {{else}}
              <p class="cr-empty-drop">{{localize "CONFIGURABLE_REACTIONS.Builder.DropActionHere"}}</p>
            {{/if}}
          </div>
        </section>

        <div class="cr-reaction-summary">
          <h3>{{localize "CONFIGURABLE_REACTIONS.Reactions.JsonPreview"}}</h3>
          <p><strong>ID:</strong> <code>{{selectedReaction.id}}</code></p>
          <p><strong>{{localize "CONFIGURABLE_REACTIONS.Trigger.Label"}}:</strong> {{selectedReaction.trigger.type}}</p>
          <p><strong>{{localize "CONFIGURABLE_REACTIONS.Actions.Title"}}:</strong> {{selectedReaction.actions.length}}</p>
        </div>

        <div class="form-group stacked">
          <label>{{localize "CONFIGURABLE_REACTIONS.Reactions.JsonEditor"}}</label>
          <textarea name="reactionJson" spellcheck="false">{{selectedReactionJson}}</textarea>
        </div>

        <footer class="cr-footer">
          <button type="button" data-action="saveReactionJson">
            <i class="fa-solid fa-floppy-disk"></i> {{localize "CONFIGURABLE_REACTIONS.Common.Save"}}
          </button>
        </footer>
      {{else}}
        <p>{{localize "CONFIGURABLE_REACTIONS.Reactions.None"}}</p>
      {{/if}}
    </main>
  </section>
</div>