{# LIBRARIES #}
{{ attach_library('ui_patterns/media_item.media_card_lib') }}

{# VARIABLES #}
{% set item_attributes = item_attributes|default(create_attribute()) %}
{% set image_attributes = image_attributes|default(create_attribute()) %}

{% set item_classes = [
  'mc_item',
  item_classes|default("")
] %}

{% set item_elem = "div" %}
{% if url %}
  {% set item_elem = "a" %}
  {% set item_attributes = item_attributes.setAttribute("href", url) %}
{% endif %}

{# TEMPLATE #}
<{{ item_elem }} {{ item_attributes.addClass(item_classes) }}>
  {% include "@atoms/html5/image/image.twig" with {
    "url": image_src,
    "alt": img_alt,
    "img_class": 'img-responsive ' ~ image_classes,
    'img_attributes': image_attributes|default(create_attribute()).setAttribute("typeof", "foaf:Image"),
  } only %}
  <div class="description">
    <div class="title">{{ description }}</div>
    <div class="details">{{ image_size }}</div>
  </div>
</{{ item_elem }}>
