{% load wagtailimages_tags wagtailcore_tags %}
<div class="design-system-card{% if value.url or value.document %} design-system-enlarge-link{% endif %}">
  <div class="design-system-card__body">
    <div class="design-system-card__content">
      <h3 class="design-system-card__title">
        {% if value.url %}
          <a href="{{ value.url }}">{{ value.title }}</a>
        {% elif value.document %}
          <a href="{{ value.document.url }}">{{ value.title }}</a>
        {% else %}
          {{ value.title }}
        {% endif %}
      </h3>
      <p class="design-system-card__desc">{{ value.description|linebreaksbr }}</p>
    </div>
  </div>
  <div class="design-system-card__header">
    {% if value.image %}
      <div class="design-system-card__img">{% image value.image original class="design-system-responsive-img" %}</div>
    {% endif %}
    {% if value.badge_text %}
      <ul class="design-system-badges-group">
        <li>
          <p class="design-system-badge design-system-badge--{{ value.badge_level }}{% if value.badge_icon %} design-system-badge--no-icon{% endif %}">
            {{ value.badge_text }}
          </p>
        </li>
      </ul>
    {% endif %}
  </div>
</div>
