<div class="article-actions" id="article-reaction-actions">
  <% if @article.published? %>
    <%= render partial: "articles/reaction_button",
               locals: {
                 category: :like,
                 description: "heart",
                 image_path: "emoji/emoji-one-heart.png"
               } %>
    <%= render partial: "articles/reaction_button",
               locals: {
                 category: :unicorn,
                 description: "unicorn",
                 image_path: "emoji/emoji-one-unicorn.png"
               } %>
    <%= render partial: "articles/reaction_button",
               locals: {
                 category: :readinglist,
                 description: "reading list",
                 image_path: "emoji/emoji-one-bookmark.png"
               } %>

    <% display_name = @article.user.twitter_username ? "@" + @article.user.twitter_username : @article.user.name %>
    <a
      class="article-actions-tweet-button"
      rel="noopener"
      target="_blank"
      href='https://twitter.com/intent/tweet?text="<%= u @article.title.strip %>" by <%= display_name %> %23DEVcommunity <%= article_url(@article) %>'>
      <img src="<%= asset_path("twitter.svg") %>" alt="twitter logo">
    </a>
  <% end %>
  <a class="article-actions-comments-count" href="#comments" id="jump-to-comments">
    DISCUSS
    <% if @article.comments_count.positive? %>
      <span class="article-actions-comments-count-number">(<%= @article.comments_count %>)</span>
    <% else %>
    <% end %>
  </a>
  <div class="article-share-action-block">
    <button id="article-show-more-button" class="dropbtn" aria-label="Toggle dropdown menu">
      <img src="<%= asset_path("three-dots.svg") %>" class="dropdown-icon" alt="dropdown menu icon">
    </button>
    <div class="dropdown-content">
      <div>
        <% if user_signed_in? %>
          <div class="dropdown-link-row notification-subscriptions-area-row"
            id="notification-subscriptions-area" data-notifiable-id="<%= @article.id %>" data-notifiable-type="Article">
            <div class="notification-subscriptions-area-header">🔔 Notification Subscriptions
              <button for="subscribe_notifications" id="notification-subscription-label_not_subscribed" class="notification-subscription-label notification-subscription-label-unsubscribe" data-payload="not_subscribed" name="unsubscribe">
                Unsubscribe
              </button>
            </div>
            <button for="subscribe_notifications" id="notification-subscription-label_all_comments" class="notification-subscription-label" data-payload="all_comments">
              All Comments <span class="selected-emoji">✅</span>
            </button>
            <button for="subscribe_notifications" id="notification-subscription-label_top_level_comments" class="notification-subscription-label" data-payload="top_level_comments">
              Top Level Comments <span class="selected-emoji">✅</span>
            </button>
            <button for="subscribe_notifications" id="notification-subscription-label_only_author_comments" class="notification-subscription-label" data-payload="only_author_comments">
              Post Author Comments <span class="selected-emoji">✅</span>
            </button>
            <%= javascript_packs_with_chunks_tag "notificationSubscriptionHandler", defer: true %>
          </div>
        <% end %>
        <div class="dropdown-link-row">
          <clipboard-copy for="article-copy-link-input" aria-live="polite" aria-controls="article-copy-link-announcer">
            <input type="text" id="article-copy-link-input" value="<%= article_url(@article) %>" readonly />
            <img id="article-copy-icon" src="<%= asset_path("content-copy.svg") %>" alt="Copy to Clipboard" />
            <span id="article-copy-link-announcer" role="alert" hidden>Copied to Clipboard</span>
          </clipboard-copy>
        </div>
        <web-share-wrapper shareurl="<%= article_url(@article) %>" sharetext="<%= @article.title %>" template="web-share-button">
          <div class="dropdown-link-row">
            <a
              target="_blank"
              rel="noopener"
              href='https://twitter.com/intent/tweet?text="<%= u @article.title.strip %>" by <%= @article.user.twitter_username ? "@" + @article.user.twitter_username : @article.user.name %> %23DEVcommunity <%= article_url(@article) %>'>
              Share to Twitter
            </a>
          </div>
          <div class="dropdown-link-row">
            <a
              target="_blank"
              rel="noopener"
              href="https://www.linkedin.com/shareArticle?mini=true&url=<%= article_url(@article) %>&title=<%= @article.title %>&summary=<%= @article.description %>&source=<%= community_name %>">
              Share to LinkedIn
            </a>
          </div>
          <div class="dropdown-link-row">
            <a
              target="_blank"
              rel="noopener"
              href="https://www.reddit.com/submit?url=<%= article_url(@article) %>&title=<%= @article.title %>">
              Share to Reddit
            </a>
          </div>
          <div class="dropdown-link-row">
            <a
              target="_blank"
              rel="noopener"
              href="https://news.ycombinator.com/submitlink?u=<%= article_url(@article) %>&t=<%= @article.title %>">
              Share to Hacker News
            </a>
          </div>
          <div class="dropdown-link-row">
            <a
              target="_blank"
              rel="noopener"
              href="https://www.facebook.com/sharer.php?u=<%= article_url(@article) %>">
              Share to Facebook
            </a>
          </div>
        </web-share-wrapper>
        <template id="web-share-button">
          <div class="dropdown-link-row"><a href="#">Share Post</a></div>
        </template>
        <div class="dropdown-link-row"><a href="/report-abuse">Report Abuse</a></div>
      </div>
    </div>
  </div>
</div>
<% if @variant_number.to_i == 0 && !user_signed_in? && @article.body_markdown.size > 900 %>
  <% cache("below-article-html-variant-#{rand(20)}", expires_in: 8.hours) do %>
    <% @html_variant = HtmlVariant.find_for_test(@article.cached_tag_list_array, "article_show_below_article_cta") %>
    <% if @html_variant %>
      <div class="html-variant-wrapper" id="html-variant-article-show-below-article" data-variant-id="<%= @html_variant.id %>">
        <%= @html_variant.html.html_safe %>
      </div>
    <% end %>
  <% end %>
<% end %>
