{% comment %}
  Renders an article card for a given blog with settings to either show the image or not.

  Accepts:
  - article: {Object} Article object
  - media_aspect_ratio: {string} The setting changes the aspect ratio of the article image, if shown
  - show_image: {Boolean} The setting either show the article image or not. If it's not included it will show the image by default
  - show_date: {Boolean} The setting either show the article date or not. If it's not included it will not show the image by default
  - show_author: {Boolean} The setting either show the article author or not. If it's not included it will not show the author by default
  - show_tag: {Boolean} The setting either show the article tags or not. If it's not included it will not show the tags by default
  - show_badge: {Boolean} The setting either show the blog badge or not.
  - placeholder_image: {String} The placeholder image to use when no article exists. Default: 'article-apparel-1' (optional)
  - color_scheme: {String} The color scheme to use (optional)
  - animate_enabled: {Boolean} Enable animation. Default: true (optional)

  Usage:
  {% render 'acticle-card-style10', article: article, show_image: section.settings.show_image %}
{% endcomment %}

{% liquid
  if animate_enabled == null
    assign animate_enabled = true
  endif
  assign tag_name = 'div'
  if animate_enabled
    assign tag_name = 'xo-animate'
  endif
%}

{%- if article and article != empty -%}
  <{{ tag_name }}
    xo-cascade
    class='xo-article-card xo-article-card--{{ settings.article_card_style }}{% if color_scheme %} color-{{ color_scheme }}{% endif %}'
  >
    <div class='xo-article-card__wrap-blog-v14'>
      {%- if show_image == true and article.image -%}
        <a href='{{ article.url }}' class='xo-article-card__image-blog-v14'>
          {%- assign media = media_aspect_ratio | default: '3/4' -%}
          {% render 'image', image: article.image, media_aspect_ratio: media %}
        </a>
      {%- endif -%}

      <div
        class='xo-article-card__information-blog-v14'
        {% if settings.article_card_style == 'boxed' and settings.article_card_content_padding == 0 %}
          style='--article-card-content-padding: initial'
        {% endif %}
      >
        <div class='xo-article-card__cate-blog-v14'>
          <a class='' href='/blogs/news'>News</a>
        </div>

        <h3 class='xo-article-card__title-blog-v14'>
          <a href='{{ article.url }}'>
            {{ article.title | truncate: 50 | escape }}
          </a>
        </h3>

        {%- if show_excerpt -%}
          {%- if article.excerpt.size > 0 or article.content.size > 0 -%}
            <div class='xo-article-card__description-blog-v14'>
              {%- if article.excerpt.size > 0 -%}
                {{ article.excerpt | strip_html | truncatewords: 30 }}
              {%- else -%}
                {{ article.content | strip_html | truncatewords: 30 }}
              {%- endif -%}
            </div>
          {%- endif -%}
        {%- endif -%}

        <div class='xo-article-card__entry-meta-head'>
          <div class='xo-article-card__entry-author'>
            <span class='xo-article-card__entry-meta-link'>
              <svg xmlns='http://www.w3.org/2000/svg' height='1em' viewBox='0 0 448 512'>
                <path d="M304 128a80 80 0 1 0 -160 0 80 80 0 1 0 160 0zM96 128a128 128 0 1 1 256 0A128 128 0 1 1 96 128zM49.3 464H398.7c-8.9-63.3-63.3-112-129-112H178.3c-65.7 0-120.1 48.7-129 112zM0 482.3C0 383.8 79.8 304 178.3 304h91.4C368.2 304 448 383.8 448 482.3c0 16.4-13.3 29.7-29.7 29.7H29.7C13.3 512 0 498.7 0 482.3z"/>
              </svg>
              By :
              {%- if show_author -%}
                <a href='#' class='xo-article-card__author'>{{ article.author }}</a>
              {%- endif -%}
            </span>
          </div>
          <span class='comments-link'>
            <svg xmlns='http://www.w3.org/2000/svg' id='Outline' viewBox='0 0 24 24' width='512' height='512'>
              <path d="M20,0H4A4,4,0,0,0,0,4V16a4,4,0,0,0,4,4H6.9l4.451,3.763a1,1,0,0,0,1.292,0L17.1,20H20a4,4,0,0,0,4-4V4A4,4,0,0,0,20,0Zm2,16a2,2,0,0,1-2,2H17.1a2,2,0,0,0-1.291.473L12,21.69,8.193,18.473h0A2,2,0,0,0,6.9,18H4a2,2,0,0,1-2-2V4A2,2,0,0,1,4,2H20a2,2,0,0,1,2,2Z"/><path d="M7,7h5a1,1,0,0,0,0-2H7A1,1,0,0,0,7,7Z"/><path d="M17,9H7a1,1,0,0,0,0,2H17a1,1,0,0,0,0-2Z"/><path d="M17,13H7a1,1,0,0,0,0,2H17a1,1,0,0,0,0-2Z"/>
            </svg>

            {%- if article.comments_count > 0 -%}
              {{ article.comments_count }}
            {% endif %}
            {%- if article.comments_count == 0 -%}
              {{ article.comments_count }}
            {% endif %}
            <span> comments</span>
          </span>
        </div>

        <div class='xo-article-card__btn-blog-v14'>
          <a class='xo-article-card__read-more-blog-v14' href='#'> Read more </a>
          <a class='xo-article-card__svg-blog-v14'>
            <svg xmlns='http://www.w3.org/2000/svg' height='1em' viewBox='0 0 384 512'>
              <path d="M73 39c-14.8-9.1-33.4-9.4-48.5-.9S0 62.6 0 80V432c0 17.4 9.4 33.4 24.5 41.9s33.7 8.1 48.5-.9L361 297c14.3-8.7 23-24.2 23-41s-8.7-32.2-23-41L73 39z"/>
            </svg>
          </a>
        </div>
      </div>
    </div>
  </{{ tag_name }}>
{% else %}
  {% render 'article-card-placeholder', placeholder_image: placeholder_image %}
{%- endif -%}
