<div class="library-content">
  {{#if hasChallenges}}
    {{#each challenges}}
    <div class="lib-challenge-card" data-challenge-id="{{this.id}}">
      <div class="lib-card-header">
        <div class="lib-card-title-section">
          <i class="fas fa-flag-checkered lib-card-icon"></i>
          <span class="lib-card-title">{{this.name}}</span>
        </div>
        <div class="lib-card-actions">
          <button type="button" class="lib-edit-btn" data-action="editChallenge" data-challenge-id="{{this.id}}" data-tooltip="{{localize "STORYFRAME.UI.Tooltips.EditChallenge"}}">
            <i class="fas fa-edit"></i>
          </button>
          <button type="button" class="lib-delete-btn" data-action="deleteChallenge" data-challenge-id="{{this.id}}" data-tooltip="{{localize "STORYFRAME.UI.Tooltips.DeleteChallenge"}}">
            <i class="fas fa-trash"></i>
          </button>
        </div>
      </div>

      <div class="lib-card-body">
        {{#each this.options}}
        <div class="lib-option-preview">
          <div class="opt-desc">{{#if this.name}}{{this.name}}{{else}}{{localize "STORYFRAME.ChallengeBuilder.OptionLabel" num=this.index}}{{/if}}</div>
          <div class="opt-skills">
            {{#each this.skillOptions}}
            <span class="skill-dc-pill" data-check-type="{{this.checkType}}">
              {{this.displayText}}{{#if this.dc}} <strong>{{formatDC this.dc}}</strong>{{/if}}
              {{#if this.isSecret}}<i class="fas fa-eye-slash secret-marker"></i>{{/if}}
              {{#if this.minProficiencyLabel}}<span class="prof-badge" data-prof="{{this.minProficiency}}">{{this.minProficiencyLabel}}</span>{{/if}}
            </span>
            {{/each}}
          </div>
        </div>
        {{/each}}
      </div>

      <button type="button"
              class="lib-present-btn"
              data-action="presentChallenge"
              data-challenge-id="{{this.id}}">
        <i class="fas fa-paper-plane"></i> {{localize "STORYFRAME.UI.Labels.PresentToAllPlayers"}}
      </button>
    </div>
    {{/each}}
  {{else}}
    <div class="lib-empty-state">
      <i class="fas fa-folder-open"></i>
      <p>{{localize "STORYFRAME.UI.Labels.NoSavedChallenges"}}</p>
      <p class="hint">{{localize "STORYFRAME.UI.Labels.CreateChallengeHint"}}</p>
    </div>
  {{/if}}
</div>
