{% 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_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_tags: {Boolean} The setting either show the article tags or not. If it's not included it will not show the tags by default
  - show_excerpt: {Boolean} The setting either show the article excerpt or not. If it's not included it will not show the tags by default
  - 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-style24', 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='xo-article-card24'>
    <{{ tag_name }}
      xo-cascade
      class='xo-article-card1 xo-article-card--{{ settings.article_card_style }}{% if color_scheme %} color-{{ color_scheme }}{% endif %}'
    >
      <div class='xo-article-card__blog24'>
        <div class='xo-article-card__blog-img24'>
          <a href='{{ article.url }}' class='xo-article-card__image24  {% render 'hover-style' %}'>
            {%- if show_image -%}
              {%- assign media = media_aspect_ratio | default: '3/4' -%}
              {% render 'image', image: article.image, media_aspect_ratio: media %}
            {%- endif -%}
          </a>
          {%- if show_date -%}
            <div class='xo-article-card__date24'>
              <span>{{ article.published_at | time_tag: '%b' }}</span>
              <span>{{ article.published_at | time_tag: '%d' }}</span>
              <span>{{ article.published_at | time_tag: '%Y' }}</span>
            </div>
          {%- endif -%}
        </div>

        <div
          class='xo-article-card__information24'
          {% 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__date-com24'>
            {%- if show_author -%}
              <span class='xo-article-card_author24'>By: {{ article.author }}</span>
            {%- endif -%}
            {%- if show_tags and article.tags.size > 0 -%}
              <div class='xo-article-card__all-tag24'>
                {%- for tag in article.tags -%}
                  <a href='/blogs/news/tagged/{{ tag }}' class='xo-article-card__tag24'>
                    {{ tag }}
                  </a>
                {%- endfor -%}
              </div>
            {%- endif -%}
            <span class='xo-article-card__comment-content24'>
              <span class='xo-article-card__comment-icon'>
                <svg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'>
                  <path d="M408 64H104a56.16 56.16 0 00-56 56v192a56.16 56.16 0 0056 56h40v80l93.72-78.14a8 8 0 015.13-1.86H408a56.16 56.16 0 0056-56V120a56.16 56.16 0 00-56-56z" fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32"></path>
                </svg>
              </span>
              {{ article.comments_count }} comments
            </span>
          </div>

          <div class='xo-article-card__content24'>
            <h3 class='xo-article-card__title24'>
              <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__description24'>
                  {%- if article.excerpt.size > 0 -%}
                    {{ article.excerpt | strip_html | truncatewords: 30 }}
                  {%- else -%}
                    {{ article.content | strip_html | truncatewords: 30 }}
                  {%- endif -%}
                </div>
              {%- endif -%}
            {%- endif -%}
          </div>

          <div class='xo-article-card__link24'>
            <a href='{{ article.url }}'>
              <span> More detail</span>
            </a>
          </div>
        </div>
      </div>
      {% comment %} anh {% endcomment %}

      {% comment %} ngay {% endcomment %}

      {% comment %} content {% endcomment %}
    </{{ tag_name }}>
  </div>
{% else %}
  {% render 'article-card-placeholder', placeholder_image: placeholder_image %}
{%- endif -%}
