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>
        </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}}

                  {{#if activeTriggerIsDamage}}
                    <div class="cr-damage-builder">
                      <small class="cr-chip-label">{{localize "CONFIGURABLE_REACTIONS.Conditions.Damage.SelectedTypes"}}</small>
                      <div class="cr-chip-list cr-damage-chip-list">
                        {{#if selectedDamageTypes.length}}
                          {{#each selectedDamageTypes}}
                            <span class="cr-chip cr-damage-chip" title="{{this.label}}">
                              <span>{{this.label}}</span>
                              <button type="button" data-action="removeDamageType" data-damage-type="{{this.id}}" title="{{localize 'CONFIGURABLE_REACTIONS.Conditions.Damage.RemoveType' type=this.label}}">
                                <i class="fa-solid fa-xmark"></i>
                              </button>
                            </span>
                          {{/each}}
                        {{else}}
                          <small class="cr-inline-drop">{{localize "CONFIGURABLE_REACTIONS.Conditions.Damage.NoTypes"}}</small>
                        {{/if}}
                      </div>
                      <select data-cr-damage-type-select>
                        <option value="">{{localize "CONFIGURABLE_REACTIONS.Conditions.Damage.SelectPlaceholder"}}</option>
                        {{#each availableDamageTypes}}
                          <option value="{{this.id}}">{{this.label}}</option>
                        {{/each}}
                      </select>
                    </div>
                  {{/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}}
                      {{#if this.isStatusAction}}
                        <div class="cr-status-builder">
                          <small class="cr-chip-label">{{localize "CONFIGURABLE_REACTIONS.Actions.ApplyStatus.SelectedStatuses"}}</small>
                          <div class="cr-chip-list cr-status-chip-list">
                            {{#if this.selectedStatuses.length}}
                              {{#each this.selectedStatuses}}
                                <span class="cr-chip cr-status-chip" title="{{this.label}}">
                                  <img src="{{this.icon}}" alt="">
                                  <span>{{this.label}}</span>
                                  <button type="button" data-action="removeActionStatus" data-action-index="{{../index}}" data-status-id="{{this.id}}" title="{{localize 'CONFIGURABLE_REACTIONS.Actions.ApplyStatus.RemoveStatus' status=this.label}}">
                                    <i class="fa-solid fa-xmark"></i>
                                  </button>
                                </span>
                              {{/each}}
                            {{else}}
                              <small class="cr-inline-drop">{{localize "CONFIGURABLE_REACTIONS.Actions.ApplyStatus.NoStatuses"}}</small>
                            {{/if}}
                          </div>
                          <select data-cr-status-select data-action-index="{{this.index}}">
                            <option value="">{{localize "CONFIGURABLE_REACTIONS.Actions.ApplyStatus.SelectPlaceholder"}}</option>
                            {{#each this.availableStatuses}}
                              <option value="{{this.id}}">{{this.label}}</option>
                            {{/each}}
                          </select>
                        </div>
                      {{/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-json-editor">
          <div class="cr-json-editor-heading">
            <label for="cr-reaction-json">{{localize "CONFIGURABLE_REACTIONS.Reactions.JsonEditor"}}</label>
          </div>
          <textarea id="cr-reaction-json" name="reactionJson" spellcheck="false">{{selectedReactionJson}}</textarea>
        </div>
      {{else}}
        <p>{{localize "CONFIGURABLE_REACTIONS.Reactions.None"}}</p>
      {{/if}}
    </main>
  </section>
</div>