{# Static card structure. When `task` is provided and truthy, title and meta are filled (server); otherwise empty for template clone / JS fill. .board-card-details is hidden on the small card and shown in the popout. #}
<div class="card board-card mb-2 draggable" data-task-ref="{{ task.ref if task else '' }}" data-task-status="{{ (task.status or 'TODO') if task else 'TODO' }}" draggable="true">
  <div class="card-body py-2 px-3 position-relative">
    <span class="board-card-icon-wrap position-absolute top-0 end-0 mt-1 me-1" aria-hidden="true"><span class="board-card-icon" data-icon="cloud"></span></span>
    <div class="board-card-title-line text-truncate fw-medium"{% if task and task.id %} title="{{ task.id }}: {{ task.title or 'Untitled' }}"{% elif task and task.title %} title="{{ task.title }}"{% endif %}><span class="board-card-task-id fw-bold font-monospace me-1">{% if task and task.id %}{{ task.id[-4:] }}{% endif %}</span><span class="board-card-title">{% if task %}{{ task.title or 'Untitled' }}{% endif %}</span></div>
    <div class="board-card-description small board-card-description-preview mt-1 text-truncate">{% if task and task.description %}{{ task.description }}{% else %}{% endif %}</div>
    <div class="board-card-meta d-flex align-items-center gap-1 mt-1 small text-muted">
      {% if task %}
        {% if task.priority and task.priority != 'LOW' %}
        <span class="badge badge-outline text-{{ 'danger' if task.priority == 'CRITICAL' else 'warning' if task.priority == 'HIGH' else 'secondary' }}">{{ task.priority }}</span>
        {% else %}
        <span class="badge badge-outline text-secondary">LOW</span>
        {% endif %}
        {% if task.assignee %}
        <span class="text-truncate">{{ task.assignee }}</span>
        {% else %}
        <span class="text-truncate">None</span>
        {% endif %}
        <span class="ms-auto board-card-comments-count-meta">{{ task.comments_count | default(0) }} comment{{ 's' if (task.comments_count | default(0)) != 1 else '' }}</span>
      {% else %}
        <span class="badge badge-outline text-secondary">LOW</span>
        <span class="text-truncate">None</span>
        <span class="ms-auto">0 comments</span>
      {% endif %}
    </div>
    <div class="board-card-details d-none mt-2 pt-2 border-top small">
      <div class="mb-2">
        <strong class="text-muted">Ref</strong>
        <div class="board-card-task-ref font-monospace text-muted mt-1 text-break">{% if task and task.ref %}{{ task.ref }}{% else %}{% endif %}</div>
      </div>
      <div class="mb-2">
        <strong class="text-muted">Description</strong>
        <div class="board-card-description-full board-card-editable board-card-markdown mt-1">{% if task and task.description %}{{ task.description }}{% else %}{% endif %}</div>
      </div>
      <div class="mb-2">
        <strong class="text-muted">Due date</strong>
        <div class="board-card-due-date board-card-editable text-muted mt-1">{% if task and task.due_date %}{{ task.due_date }}{% else %}None{% endif %}</div>
      </div>
      <div class="mb-2">
        <strong class="text-muted">Last modified</strong>
        <div class="board-card-updated-at text-muted mt-1">{% if task and task.updated_at %}{{ task.updated_at }}{% else %}None{% endif %}</div>
      </div>
      <div class="mb-2">
        <strong class="text-muted">Status</strong>
        <div class="board-card-status board-card-editable text-muted mt-1">{% if task %}{{ task.status or 'TODO' }}{% else %}TODO{% endif %}</div>
      </div>
      <div class="mb-2">
        <strong class="text-muted">Priority</strong>
        <div class="board-card-priority board-card-editable text-muted mt-1">{% if task and task.priority %}{{ task.priority }}{% else %}LOW{% endif %}</div>
      </div>
      <div class="mb-2">
        <strong class="text-muted">Assignee</strong>
        <div class="board-card-assignee text-muted mt-1">{% if task and task.assignee %}{{ task.assignee }}{% else %}None{% endif %}</div>
      </div>
      <div class="mb-2">
        <details class="board-card-tags-details" open>
          <summary class="text-muted">Tags</summary>
          <div
            class="board-card-tags font-monospace text-muted mt-1 small"
            contenteditable="true"
            spellcheck="false"
          >
            {% if task and task.tags %}{{ task.tags }}{% endif %}
          </div>
        </details>
      </div>
      <div class="board-card-actions d-flex gap-2 mb-2">
        <button type="button" class="btn btn-sm btn-outline-secondary board-card-archive-btn">Archive</button>
        <button type="button" class="btn btn-sm btn-outline-danger board-card-delete-btn">Delete</button>
      </div>
      <div class="mb-0 board-card-comments-section">
        <strong class="text-muted">Comments</strong>
        <div class="board-card-comments-list mt-2"></div>
        <form class="board-card-comment-form d-none mt-2" action="#" method="post">
          <textarea class="form-control form-control-sm board-card-comment-input" rows="2" placeholder="Add a comment…" aria-label="Comment"></textarea>
          <button type="submit" class="btn btn-sm btn-primary mt-1">Post comment</button>
        </form>
        <p class="board-card-comment-signin-hint text-muted small mt-1 mb-0 d-none">Sign in to add a comment.</p>
      </div>
    </div>
  </div>
</div>