{% set format = entry.format is defined ? entry.format : 'article' %}
{% set thumb = entry.media.thumb is defined ? entry.media.thumb : entry.media.url %}
{% set responsive = (loop.index == 1 or slider) ? 'stubborn' : '' %}
{% if entry.promo %} {% set responsive = 'stubborn' %} {% endif %}

<div class="news-thumb hover-zoom card format-{{format}} {{responsive}}">
  <div class="card-content ">
    
    {% if entry.promo %}
      {% set promolabel = (locale.lang == 'en') ? 'Sponsored' : 'برعاية' %}
      <div class="promo-label">{{promolabel}}</div>
    {% endif %}
    
    {% if (entry.cta is not defined) %}
      {% if entry.link is defined %}
        {% set link = entry.link.url %}

        {% if (entry.link.target == 'blank' or entry.link.target == '_blank') %}
          {% set target = 'target="_blank"' %}
        {% elseif (entry.link.target == 'popup') %}
          {% set target = 'data-fancybox' %}
        {% else %}
            {% set link = entry.link.url %}
        {% endif %}

      {% elseif (entry.format == 'media') %}
        {% set link = entry.media.url %}
        {% set target = 'data-fancybox' %}
      {% endif %}
      
      <a href="{{link}}" {{target}} class="pseudo-link" data-caption="{{entry.title}}"><span>{{entry.title}}</span></a>
    {% endif %}

    <div class="card-image">
      {% if (entry.format == 'media' and entry.promo != true) %}
        {% set topicon = (entry.media.type == 'video') ? 'play-circle' : 'image-polaroid' %}
        {% if entry.media.type == 'gallery' %}
          {% set topicon = 'images' %}
        {% endif %}
        
        <div class="card-image-overlay">
          <i class="fal fa-{{topicon}} icon"></i>
        </div>
      {% endif %}
      
      {% set thumb_focus =  (entry.media.focus is defined) ?  "focus-" ~ entry.media.focus : '' %}
      <picture class="media aspect-ratio rect {{thumb_focus}}">
        <img src="{{thumb}}" alt="">
      </picture>

      {% if entry.media.type == 'video' and entry.media.inline %}
        <div class="media stretch" data-media>
          <video muted playsinline loop>
            <source src="{{entry.media.url}}" type="video/mp4">
          </video>
          <div class="play-icon"><i class="fas fa-play"></i></div>
        </div>
      {% endif %}
    </div>
    
    <div class="card-body">
      <h3 class="card-title">{{entry.title}}</h3>

      {% if entry.blurb %}
        <div class="card-blurb">{{entry.blurb}}</div>
      {% endif %}

      <div class="card-footer">
        {% if entry.cta %}
          {% set target = (entry.cta.target == 'blank' or entry.cta.target == '_blank') ? 'target="_blank"' : ''%}
          <a href="{{entry.cta.url}}" {{target}} class="button red" >{{entry.cta.label}}</a>
        {% else %}
          <div class="card-info">
            {% if entry.context %} <span class="info-context">{{entry.context}}</span>{% endif %}
            {% if entry.date %} <span class="info-date">{{entry.date}}</span>{% endif %}
          </div>
        {% endif %}
      </div>
    </div>
  </div>
</div>