[#escape x as (x)!?html]
[#list list as bean]
  <li class="mt-3 media border-bottom position-relative pb-3">
    [#if bean.image??][@A bean=bean class="mr-3"]<img src="${bean.image}" class="rounded-sm cm-media-img" alt="${bean.title}">[/@A][/#if]
    <div class="media-body">
      <p class="mt-0 mb-1">[@A bean=bean class="cm-link text-decoration-none"/]</p>
      <p class="text-muted d-none d-sm-block mb-2">
        [@A bean=bean class="text-reset text-sm text-decoration-none"]${substring(bean.description,60,'...')}[/@A]
      </p>
      <div class="small text-muted mt-2 mt-xl-3 clearfix">
        <div class="float-left">
          <span>[#list bean.channel.paths as c][@A bean=c/][#if c_has_next] > [/#if][/#list]</span>
          <i class="ml-2 far fa-eye"></i> ${bean.views}
        </div>
        <div class="float-right"><i class="ml-2 far fa-clock"></i> ${bean.publishDate.format('yyyy-MM-dd')}</div>
      </div>
    </div>
  </li>
  [#if !bean_has_next]
    <script>lastArticleDate = '${bean.publishDate.format()}'</script>
  [/#if]
[/#list]
[/#escape]