<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">
      <h2>{{localize "HAMALRON.Label.tarotHand"}}</h2>
      <div class="tarot-hand-info">
        <span class="card-count">
          <i class="fas fa-layer-group"></i>
          {{tarotCards.length}}
          {{localize "HAMALRON.Label.cards"}}
        </span>
      </div>
    </div>

    {{#if tarotCards.length}}
      <div class="tarot-hand-cards">
        {{#each tarotCards as |card|}}
          <div
            class="tarot-card-wrapper"
            data-item-id="{{card.id}}"
            data-item-uuid="{{card.uuid}}"
            data-drag="true"
          >
            <div class="tarot-card">
              <div class="tarot-card-inner">
                <div class="tarot-card-front">
                  <div class="tarot-card-header">
                    <h3 class="tarot-card-name">{{card.name}}</h3>
                    <div class="tarot-card-controls">
                      {{#if @root.isEditMode}}
                        <a
                          class="card-control"
                          data-tooltip="{{localize 'HAMALRON.Delete'}}"
                          data-action="delete"
                          data-item-id="{{card.id}}"
                          data-item-uuid="{{card.uuid}}"
                        >
                          <i class="fas fa-trash"></i>
                        </a>
                      {{/if}}
                      <a
                        class="card-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>
                    </div>
                  </div>

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

                  <div class="tarot-card-info">
                    <div class="card-info-row">
                      <span class="info-label">
                        <i class="fas fa-star"></i>
                        {{localize "HAMALRON.Tarot.FIELDS.symbole.label"}}:
                      </span>
                      <span class="info-value symbole-{{card.system.symbole}}">
                        {{localize
                          (concat
                            "HAMALRON.Tarot.FIELDS.symbole." card.system.symbole
                          )
                        }}
                      </span>
                    </div>

                    <div class="card-info-row">
                      <span class="info-label">
                        <i class="fas fa-hashtag"></i>
                        {{localize "HAMALRON.Tarot.FIELDS.valeur.label"}}:
                      </span>
                      <span class="info-value">
                        {{localize
                          (concat
                            "HAMALRON.Tarot.FIELDS.valeur." card.system.valeur
                          )
                        }}
                      </span>
                    </div>

                    <div class="card-info-row">
                      <span class="info-label">
                        <i class="fas fa-tag"></i>
                        {{localize "HAMALRON.Tarot.FIELDS.type.label"}}:
                      </span>
                      <span class="info-value">
                        {{localize
                          (concat
                            "HAMALRON.Tarot.FIELDS.type." card.system.type
                          )
                        }}
                      </span>
                    </div>
                  </div>

                  {{#if card.system.description}}
                    <div class="tarot-card-description">
                      <div class="description-text">
                        {{{card.enrichedDescription}}}
                      </div>
                    </div>
                  {{/if}}
                </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>