<form class="roll-request-dialog">
  <div class="dialog-content">
    <section class="checks-summary">
      <h3>{{i18n.foundChecks}}</h3>
      <p class="drag-hint">{{i18n.dragHint}}</p>
      <ul class="checks-list">
        {{#each checks}}
        <li class="check-item" data-uid="{{this._uid}}" draggable="true">
          <div class="check-info">
            <i class="fas {{this.skillIcon}}"></i>
            <span class="check-skill">{{this.skillName}}{{#if this.actionName}}<span class="check-action-name"> ({{this.actionName}}{{#if this.variantName}}: {{this.variantName}}{{/if}})</span>{{/if}}</span>
            {{#if this.dc}}<span class="check-dc">{{formatDC this.dc}}</span>{{/if}}
            {{#if this.isSecret}}
            <span class="check-secret-badge">
              <i class="fas fa-eye-slash"></i>
              {{@root.i18n.secret}}
            </span>
            {{/if}}
            <div class="check-linked-pcs"></div>
            <button type="button" class="check-remove-btn" data-uid="{{this._uid}}" aria-label="{{localize "STORYFRAME.Dialogs.RollRequest.RemoveCheck"}}"><i class="fas fa-times"></i></button>
          </div>
        </li>
        {{/each}}
      </ul>
    </section>

    <section class="participants-selection">
      <h3>{{i18n.selectPCs}}</h3>
      <div class="participants-grid">
        {{#each participants}}
        <label class="participant-card">
          <input type="checkbox" name="participant" value="{{this.id}}">
          <div class="participant-content">
            <img src="{{this.img}}" alt="{{this.name}}">
            <span class="participant-name">{{this.name}}</span>
            <i class="fas fa-check-circle check-icon"></i>
          </div>
        </label>
        {{/each}}
      </div>
    </section>

    <section class="allow-only-one-section">
      <label class="allow-only-one-toggle">
        <input type="checkbox"
               name="allowOnlyOne"
               {{#if allowOnlyOne}}checked{{/if}}>
        <span>{{i18n.allowOnlyOneLabel}}</span>
        <i class="fas fa-info-circle"
           data-tooltip="{{localize "STORYFRAME.UI.Tooltips.AllowOnlyOne"}}"
           aria-hidden="true"></i>
      </label>
    </section>
  </div>

  <footer class="dialog-footer">
    <button type="button" class="cancel-btn" data-action="cancel">
      <i class="fas fa-times"></i>
      {{i18n.cancel}}
    </button>
    <button type="submit" class="submit-btn" data-action="submit">
      <i class="fas fa-paper-plane"></i>
      {{i18n.sendRollRequests}}
    </button>
  </footer>
</form>
