<section
  class="tab character-{{tab.id}} {{tab.cssClass}}"
  data-tab="{{tab.id}}"
  data-group="{{tab.group}}"
>
  <div class="tarot-hand-container">
    <div class="tarot-hand-header">
      <div class="tarot-hand-info">
        <span class="card-count {{#if isOverLimit}}over-limit{{/if}}">
          <i class="fas fa-layer-group"></i>
          {{handSize}} / {{handLimit}}
          {{localize "HAMALRON.Label.cards"}}
        </span>
        <button
          class="draw-card-button"
          data-action="drawCard"
          data-tooltip="{{localize 'HAMALRON.Label.drawCard'}}"
          {{#unless (lt handSize 7)}}disabled{{/unless}}
        >
          <i class="fas fa-hand-sparkles"></i>
          {{localize "HAMALRON.Label.drawCard"}}
        </button>
        {{#if isOverLimit}}
          <span class="hand-warning">
            <i class="fas fa-exclamation-triangle"></i>
            {{localize "HAMALRON.Label.mustDiscardCard"}}
          </span>
        {{/if}}
      </div>
    </div>

    {{#if tarotCards.length}}
      <div class="tarot-hand-cards">
        {{#each tarotCards as |card|}}
          <div
            class="tarot-card-wrapper {{#if card.isSuccessCard}}success-card{{/if}}"
            data-item-id="{{card.id}}"
            data-item-uuid="{{card.uuid}}"
            data-drag="true"
            data-action="selectCard"
          >
            <div class="tarot-card">
              <div class="tarot-card-inner">
                <div class="tarot-card-front">
                  <div class="tarot-card-header">
                    <div class="tarot-card-controls">
                      {{#if @root.isEditMode}}
                        <a
                          class="card-control delete-control"
                          data-tooltip="{{localize 'HAMALRON.Delete'}}"
                          data-action="delete"
                          data-item-id="{{card.id}}"
                          data-item-uuid="{{card.uuid}}"
                        >
                          <i class="fas fa-times"></i>
                        </a>
                      {{/if}}
                      <a
                        class="card-control view-control"
                        data-tooltip="{{localize 'HAMALRON.ViewDetails'}}"
                        data-action="edit"
                        data-item-id="{{card.id}}"
                        data-item-uuid="{{card.uuid}}"
                      >
                        <i class="fas fa-eye"></i>
                      </a>
                      {{#if card.isSuccessCard}}
                        <span class="success-indicator"><i class="fas fa-star"></i></span>
                      {{/if}}
                    </div>
                  </div>

                  <div class="tarot-card-image">
                    <img src="{{card.system.image}}" alt="{{card.name}}" />
                  </div>

                  <div class="tarot-card-name">
                    <h4>{{card.name}}</h4>
                  </div>

                  <div class="tarot-card-info">
                    <div class="card-info-compact">
                      <div class="card-symbole symbole-{{card.system.symbole}}">
                        <i class="fas fa-circle"></i>
                        {{localize (concat "HAMALRON.Tarot.FIELDS.symbole." card.system.symbole)}}
                      </div>
                      <div class="card-valeur">
                        {{tarotValue card.system.valeur}}
                      </div>
                    </div>
                    <div class="card-actions">
                      <button
                        class="discard-and-draw-button"
                        data-action="discardAndDraw"
                        data-item-id="{{card.id}}"
                        data-tooltip="{{localize 'HAMALRON.Label.discardAndDraw'}}"
                      >
                        <i class="fas fa-exchange-alt"></i>
                        {{localize "HAMALRON.Label.discardAndDraw"}}
                      </button>
                    </div>
                    {{#if @root.isOverLimit}}
                      {{#if @root.isEditMode}}
                        <button
                          class="discard-button"
                          data-action="discardCard"
                          data-item-id="{{card.id}}"
                          data-tooltip="{{localize 'HAMALRON.Label.discardCard'}}"
                        >
                          <i class="fas fa-trash-alt"></i>
                          {{localize "HAMALRON.Label.discard"}}
                        </button>
                      {{/if}}
                    {{/if}}
                  </div>
                </div>
              </div>
            </div>
          </div>
        {{/each}}
      </div>
    {{else}}
      <div class="tarot-hand-empty">
        <div class="empty-state">
          <i class="fas fa-cards fa-4x"></i>
          <h3>{{localize "HAMALRON.Label.noTarotCards"}}</h3>
          <p>{{localize "HAMALRON.Label.dragTarotHere"}}</p>
        </div>
      </div>
    {{/if}}
  </div>
</section>