{% 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 'article-card-style1', 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 -%}
  <div class='new1'>
    <{{ tag_name }}
      xo-cascade
      class='xo-article-card1 xo-article-card--{{ settings.article_card_style }}'
    >
      {% comment %} anh {% endcomment %}
      {%- if show_image == true and article.image -%}
        <a href='{{ article.url }}' class='xo-article-card__image1 {% render 'hover-style' %}'>
          {%- assign media = media_aspect_ratio | default: '3/4' -%}
          {% render 'image', image: article.image, media_aspect_ratio: media %}
        </a>
      {%- endif -%}

      {% comment %} ngay {% endcomment %}
      {%- if show_date -%}
        <div class='xo-article-card__date1'>
          <span class='new1__number'>{{ article.published_at | date: '%d' }}</span>
          <span>{{ article.published_at | date: '%b' }}</span>
        </div>
      {%- endif -%}

      {% comment %} content {% endcomment %}
      <div
        class='xo-article-card__information1'
        {% if settings.article_card_style == 'boxed' and settings.article_card_content_padding == 0 %}
          style='--article-card-content-padding: initial'
        {% endif %}
      >
        <div class='new1__content-bg' style='--bg-color: {{bg_color}}'>
          {%- if show_author -%}
            <div class='xo-article-card__author1'>{{ article.author }}</div>
          {%- endif -%}
          <div class='new1__new'>{{ article.tags }}</div>
          <h3 class='xo-article-card__title1'>
            <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__description1'>
                {%- if article.excerpt.size > 0 -%}
                  {{ article.excerpt | strip_html | truncatewords: 30 }}
                {%- else -%}
                  {{ article.content | strip_html | truncatewords: 30 }}
                {%- endif -%}
              </div>
            {%- endif -%}
          {%- endif -%}

          <div class='new1__link'>
            <a href='{{ block.settings.block_link }}'> Read more </a>
            <svg xmlns='http://www.w3.org/2000/svg' height='1em' viewBox='0 0 512 512'>
              <path d="M502.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-128-128c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L402.7 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l370.7 0-73.4 73.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l128-128z"/>
            </svg>
          </div>
        </div>
      </div>
    </{{ tag_name }}>
  </div>
{% else %}
  {% render 'article-card-placeholder', placeholder_image: placeholder_image %}
{%- endif -%}
