{% 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_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-style34', 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-card34'>
    <{{ 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__blog34'
      >
        {%- if show_image == true and article.image -%}
          <div class='xo-article-card__blog-img34'>
            <a href='{{ article.url }}' class='xo-article-card__image34'>
              {%- if show_image -%}
                {%- assign media = media_aspect_ratio | default: '3/4' -%}
                {% render 'image', image: article.image, media_aspect_ratio: media %}
              {%- endif -%}
            </a>
            <div
              class='xo-article-card__information34'
              {% if settings.article_card_style == 'boxed' and settings.article_card_content_padding == 0 %}
                style='--article-card-content-padding: initial'
              {% endif %}

              {% assign remainder = article_index | modulo: 2 %}
              {% if remainder == 0 %}
              {% endif %}
            >
              <div class='xo-article-card__content-bg34'>
                <h3 class='xo-article-card__title34'>
                  <a href='{{ article.url }}'>
                    {{ article.title | truncate: 50 | escape }}
                  </a>
                </h3>

                <div class='xo-article-card__date-com34'>
                  {%- if show_author -%}
                    <div class='xo-article-card_author34'><span>By:</span> {{ article.author }}</div>
                  {%- endif -%}
                  {%- if show_tags and article.tags.size > 0 -%}
                    <div class='xo-article-card__all-tag34'>
                      {%- for tag in article.tags -%}
                        <a href='/blogs/news/tagged/{{ tag }}' class='xo-article-card__tag34'>
                          {{ tag }}
                        </a>
                      {%- endfor -%}
                    </div>
                  {%- endif -%}
                  {%- if show_date -%}
                    <span class='xo-article-card__date34'>
                      <span class='xo-article-card__date-icon34'>
                        <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'>
                          <path d="M128 0c17.7 0 32 14.3 32 32V64H288V32c0-17.7 14.3-32 32-32s32 14.3 32 32V64h48c26.5 0 48 21.5 48 48v48H0V112C0 85.5 21.5 64 48 64H96V32c0-17.7 14.3-32 32-32zM0 192H448V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V192zm64 80v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V272c0-8.8-7.2-16-16-16H80c-8.8 0-16 7.2-16 16zm128 0v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V272c0-8.8-7.2-16-16-16H208c-8.8 0-16 7.2-16 16zm144-16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V272c0-8.8-7.2-16-16-16H346zM64 400v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V400c0-8.8-7.2-16-16-16H80c-8.8 0-16 7.2-16 16zm144-16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V400c0-8.8-7.2-16-16-16H208zm112 16v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V400c0-8.8-7.2-16-16-16H346c-8.8 0-16 7.2-16 16z"/>
                        </svg>
                      </span>
                      {{- article.published_at | time_tag: '%Y/%m/%d' }}
                    </span>
                  {%- endif -%}
                  <div class='xo-article-card__comment-content34'>
                    <span class='xo-article-card__comment-icon34'>
                      <svg fill='none' focusable='false' width='14' height='13.6' class='icon-comment mr-2' viewBox='0 0 18 17'>
                        <path d="M5 5.5H13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                        <path d="M6 8.5H12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                        <path d="M13 13V16L9 13H4C3 13 1 12 1 10V4C1 2 3 1 5 1H13C15 1 17 2 17 4V10C17 12 14.3434 12.8343 13 13Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                      </svg>
                    </span>
                    ( {{ article.comments_count }} )
                  </div>
                </div>

                {%- if show_excerpt -%}
                  {%- if article.excerpt.size > 0 or article.content.size > 0 -%}
                    <div class='xo-article-card__description34'>
                      {%- if article.excerpt.size > 0 -%}
                        {{ article.excerpt | strip_html | truncatewords: 34 }}
                      {%- else -%}
                        {{ article.content | strip_html | truncatewords: 34 }}
                      {%- endif -%}
                    </div>
                  {%- endif -%}
                {%- endif -%}
              </div>
            </div>
          </div>
        {%- endif -%}
      </div>
      {% comment %} anh {% endcomment %}

      {% comment %} ngay {% endcomment %}

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