{# 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 fw-medium text-truncate"{% if task %} title="{{ task.title }}"{% endif %}>{% if task %}{{ task.title or 'Untitled' }}{% endif %}</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">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-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>