<div class="single-article single-article-small-pic" data-content-user-id="<%= story.user_id %>">
  <% if story.video.present? && story.video_thumbnail_url.present? %>
    <a class="single-article-video-preview" style="background-image:url(<%= story.cloudinary_video_url %>)" href="<%= story.path %>">
      <div class="single-article-video-duration">
        <img src="<%= asset_path("video-camera.svg") %>" alt="video camera"><%= story.video_duration_in_minutes %></div>
    </a>
  <% end %>
  <% if story.cached_organization && !@organization_article_index %>
    <div class="article-organization-headline">
      <a class="org-headline-filler" href="/<%= story.cached_organization.slug %>">
        <img alt="<%= story.cached_organization.name %> logo" src="<%= story.cached_organization.profile_image_90 %>"><%= story.cached_organization.name %>
      </a>
    </div>
  <% end %>
  <a href="/<%= story.cached_user.username %>" class="small-pic-link-wrapper">
    <div class="small-pic">
      <img src="<%= ProfileImage.new(story.cached_user).get(width: 90) %>" alt="<%= story.cached_user.username %> profile" width="40" height="40" />
    </div>
  </a>
  <a href="<%= story.path %>" class="small-pic-link-wrapper index-article-link" data-preload-image="<%= cloud_cover_url(story.main_image) %>" id="article-link-<%= story.id %>">
    <div class="content">
      <h3>
        <%= render "articles/tag_identifier", story: story, tag: @tag %>
      </h3>
    </div>
  </a>
  <h4>
    <a href="/<%= story.cached_user.username %>">
      <%= story.cached_user.name %><%= render "shared/pro_checkmark" if story.cached_user.pro %>・<time datetime="<%= story.published_timestamp %>"><%= story.readable_publish_date %></time><span class="time-ago-indicator-initial-placeholder" data-seconds="<%= story.published_at_int %>"></span>
    </a>
  </h4>
  <div class="tags">
    <% story.cached_tag_list_array.each do |tag| %>
      <a href="/t/<%= tag %>"><span class="tag">#<%= tag %></span></a>
    <% end %>
  </div>
  <div class="article-engagement-count reactions-count" data-reaction-count data-reactable-id="<%= story.id %>">
    <a href="<%= story.path %>">
      <img src="<%= asset_path("reactions-stack.png") %>" alt="Reactions" /><span id="engagement-count-number-<%= story.id %>" class="engagement-count-number">
          <%= story.positive_reactions_count %>
        </span>
    </a>
  </div>
  <% if story.comments_count > 0 %>
    <div class="article-engagement-count comments-count">
      <a href="<%= story.path %>#comments">
        <img src="<%= asset_path("comments-bubble.png") %>" alt="chat" /><span class="engagement-count-number"><%= story.comments_count %></span>
      </a>
    </div>
  <% end %>
  <a
    href="<%= story.path %>"
    class="article-reading-time">
    <%= story.reading_time < 1 ? 1 : story.reading_time %> min read
  </a>
  <button
    type="button"
    class="article-engagement-count engage-button bookmark-button"
    data-reactable-id="<%= story.id %>"
    aria-label="Save to reading list"
    title="Save to reading list">
    <span class="bm-initial">SAVE</span>
    <span class="bm-success">SAVED</span>
  </button>
</div>
