<% if articles %>
<div class="more-articles container">
  <% articles.each do |article| %>
    <a href="<%= article.path %>" data-preload-image="<%= cloud_cover_url(article.main_image) %>">
      <div class="single-other-article">
        <div class="picture">
          <%= cl_image_tag(article.user.profile_image_url,
                           type: "fetch",
                           crop: "imagga_scale",
                           width: 100,
                           height: 100,
                           quality: "auto",
                           flags: "progressive",
                           fetch_format: "auto",
                           loading: "lazy",
                           sign_url: true,
                           alt: "#{article.user.username} profile image") %>
        </div>
        <div class="content">
          <h3><%= article.title %></h3>
          <h4>
            <%= article.user.name %><%= render "shared/pro_checkmark", width: "12px" if article.user.pro? %> - <time datetime="<%= article.published_timestamp %>"><%= article.readable_publish_date %></time>
          </h4>
        </div>
      </div>
    </a>
  <% end %>
</div>
<% end %>
