<div class="single-comment-header"></div>
<div class="comments-container">
  <h3>Comment from a deleted article or podcast</h3>
  <div class="single-comment-node root">
    <% @user ||= @root_comment.user %>
    <% if @root_comment.blank? || @root_comment.deleted %>
      <div class="inner-comment">
        <div class="body">
          [deleted]
        </div>
      </div>
    <% else %>
      <div class="inner-comment">
        <% decorated_comment = @root_comment.decorate %>

        <% if decorated_comment.low_quality %>
          <div class="low-quality-comment-marker">
            <%= image_tag(cl_image_path(asset_path("/assets/sloan.png"),
                                        type: "fetch",
                                        width: 50,
                                        height: 50,
                                        crop: "imagga_scale",
                                        quality: "auto",
                                        flags: "progressive",
                                        fetch_format: "auto",
                                        sign_url: true), class: "sloan", alt: "Sloan, the sloth mascot", loading: "lazy") %>
            Comment marked as low quality/non-constructive by the community
            <a href="/code-of-conduct">View code of conduct</a>
          </div>
        <% end %>

        <div class="details <%= "low-quality-comment" if decorated_comment.low_quality %>">
          <a href="/<%= @user.username %>">
            <img class="profile-pic" src="<%= ProfileImage.new(@user).get(width: 50) %>" alt="<%= @user.username %> profile image" />
            <span class="comment-username">
              <span class="comment-username-inner">
                <%= @user.name %>
              </span>
            </span>
          </a>
          <% if @user.twitter_username.present? %>
            <a href="https://twitter.com/<%= @user.twitter_username %>" rel="noopener noreferrer" target="_blank">
              <%= image_tag("twitter-logo.svg", class: "icon-img", alt: "twitter logo") %></a>
          <% end %>
          <% if @user.github_username.present? %>
            <a href="https://github.com/<%= @user.github_username %>" rel="noopener noreferrer" target="_blank">
              <%= image_tag("github-logo.svg", class: "icon-img", alt: "github logo") %>
            </a>
          <% end %>
          <%= render "comments/comment_date", decorated_comment: decorated_comment %>
        </div>
        <div class="body <%= "low-quality-comment" if decorated_comment.low_quality %>">
          <%= sanitize @root_comment.processed_html %>
          <button class="reaction-button reacted" disabled>
            <img class="voted-heart" src="<%= asset_path("emoji/emoji-one-heart.png") %>" alt="Favorite heart button" />
            <span class="reactions-count"><%= @root_comment.reactions_count %></span>
          </button>
        </div>
        <div class="actions">
          <% if @root_comment.user_id == current_user&.id %>
            <span class="current-user-actions">
              <a href="<%= @root_comment.path %>/delete_confirm" class="edit-butt" rel="nofollow">DELETE</a>
              <a href="<%= @root_comment.path %>/edit" class="edit-butt" rel="nofollow">EDIT</a>
            </span>
          <% end %>
        </div>
      </div>
    <% end %>
  </div>
</div>
