<article class="clue-card {{#if isDragging}}is-dragging{{/if}}" data-clue-id="{{id}}">
  <div class="clue-card-shell">
    {{#if image}}
      <div class="clue-card-media">
        <img src="{{image}}" alt="{{title}}">
        <div class="clue-card-media-overlay"></div>

        <div class="clue-card-content">
          <div class="clue-card-main-text">
            <h3 class="clue-card-title">{{title}}</h3>

            {{#if revealLevels.length}}
              <div class="clue-card-description">
                {{#with revealLevels.[0]}}
                  <p>{{text}}</p>
                {{/with}}
              </div>
            {{else}}
              <div class="clue-card-description">
                <p>No reveal text yet.</p>
              </div>
            {{/if}}
          </div>

          <div class="clue-card-meta-row">
            <span class="clue-card-meta-pill">{{revealLevels.length}} reveal level(s)</span>
            {{#if folderName}}
              <span class="clue-card-meta-pill">{{folderName}}</span>
            {{/if}}
          </div>
        </div>
      </div>
    {{else}}
      <div class="clue-card-no-image">
        <div class="clue-card-content no-image-layout">
          <div class="clue-card-main-text">
            <h3 class="clue-card-title">{{title}}</h3>

            {{#if revealLevels.length}}
              <div class="clue-card-description">
                {{#with revealLevels.[0]}}
                  <p>{{text}}</p>
                {{/with}}
              </div>
            {{else}}
              <div class="clue-card-description">
                <p>No reveal text yet.</p>
              </div>
            {{/if}}
          </div>

          <div class="clue-card-meta-row">
            <span class="clue-card-meta-pill">{{revealLevels.length}} reveal level(s)</span>
            {{#if folderName}}
              <span class="clue-card-meta-pill">{{folderName}}</span>
            {{/if}}
          </div>
        </div>
      </div>
    {{/if}}

    <div class="clue-card-toolbar">
      <button
        type="button"
        class="clue-card-drag-handle"
        draggable="true"
        data-drag-gm-clue-id="{{dragClueId}}"
        title="Drag to another folder"
      >
        <i class="fas fa-grip-vertical"></i>
      </button>

      <div class="clue-card-actions">
        <button type="button" data-action="{{sendAction}}" data-clue-id="{{id}}">
          <i class="fas fa-paper-plane"></i>
          <span>Send</span>
        </button>
        <button type="button" data-action="{{editAction}}" data-clue-id="{{id}}">
          <i class="fas fa-pen-to-square"></i>
          <span>Edit</span>
        </button>
        <button type="button" data-action="{{deleteAction}}" data-clue-id="{{id}}">
          <i class="fas fa-trash"></i>
          <span>Delete</span>
        </button>
      </div>
    </div>
  </div>
</article>