{% set is_blocked = blocked is defined and card.id in blocked %}
<article class="card {{ priority_class[card.priority.value] }}{% if is_blocked %} blocked{% endif %}"
         data-id="{{ card.id }}"
         hx-get="{{ base }}/cards/{{ card.id }}" hx-target="#detail" hx-swap="innerHTML">
  <div class="card-head">
    <span class="card-id">#{{ card.id }}{% if is_blocked %}
      <span class="card-lock" title="Blocked by unfinished dependencies">🔒</span>{% endif %}</span>
    {% if card.type %}
    <span class="card-type{% if card.type not in type_style %} {{ type_class.get(card.type, 'type-other') }}{% endif %}"
          {% if card.type in type_style %}style="{{ type_style[card.type] }}"{% endif %}>{{ card.type }}</span>
    {% endif %}
    <span class="card-pri">{{ card.priority.value }}</span>
  </div>
  <p class="card-title">{{ card.title }}</p>
  {% if card.labels %}
  <div class="card-labels">
    {% for label in card.labels %}<span class="label">{{ label }}</span>{% endfor %}
  </div>
  {% endif %}
</article>