docbrown/app/views/admin/articles/_individual_article.html.erb

<% decorated_article = article.decorate %>

<article class="js-individual-article crayons-card p-6 flex flex-col gap-4"
     data-controller="article"
     data-article-id-value="<%= article.id %>"
     data-article-pin-path-value="<%= stories_feed_pinned_article_path %>"
     data-article-bg-highlighted-class="bg-highlighted"
     data-article-border-highlighted-class="border-highlighted"
     data-action="ajax:success@document->article#ajaxSuccess">

  <header>
    <% if decorated_article.pinned? || article.featured || article.approved || (!article.published? && article.published_from_feed?) || article.video || article.user&.warned? %>
      <div class="flex gap-1 mb-1">
        <% if !article.published? && article.published_from_feed? %>
          <span class="c-indicator c-indicator--danger">Unpublished</span>
        <% end %>
        <% if decorated_article.pinned? %>
          <span class="c-indicator c-indicator--warning" data-testid="pinned-indicator">Pinned</span>
        <% end %>
        <% if article.featured %>
          <span class="c-indicator c-indicator--success">Featured</span>
        <% end %>
        <% if article.approved %>
          <span class="c-indicator c-indicator--info">Approved</span>
        <% end %>
        <% if article.video %>
          <span class="c-indicator">Contains video</span>
        <% end %>
        <% cache "admin-user-info-#{article.user_id}-#{article.user&.updated_at}", expires_in: 4.hours do %>
          <% if article.user&.warned? %>
            <span class="c-indicator c-indicator--danger">User warned</span>
          <% end %>
        <% end %>
      </div>
    <% end %>

    <% if article.main_image.present? %>
      <a href="<%= article.path %>" target="_blank" rel="noopener" class="c-link c-link--branded mb-4">
        <img src="<%= cloud_cover_url(article.main_image) %>" style="background: <%= article.main_image_background_hex_color %>; max-height:150px; max-width: 300px;" alt="" loading="lazy" class="block radius-default h-auto w-100" />
      </a>
    <% end %>

    <h2 class="crayons-subtitle-1">
      <a href="<%= article.path %>" target="_blank" rel="noopener" class="c-link c-link--branded">
        <%= article.title %>
      </a>
    </h2>

    <div class="-ml-1 fs-s flex items-center gap-4">
      <div class="flex gap-px">
        <% decorated_article.cached_tag_list_array.each do |tag| %>
          <a class="crayons-tag crayons-tag--monochrome" href='<%= tag_path(tag) %>'><span class="crayons-tag__prefix">#</span><%= tag %></a>
        <% end %>
      </div>

      <span>❤️&nbsp;<%= article.public_reactions_count %> likes</span>
      <span>💬&nbsp;<%= article.comments_count %> comments</span>
    </div>

    <div class="flex justify-between gap-4 items-center">
      <div>
        <a href="<%= admin_user_path(article.user_id) %>" class="c-link">@<%= article.user&.username %></a>
        <% if article.published_from_feed? && !article.published? %>
          RSS Import <%= article.created_at.strftime("%b %d, %Y") %>
          Originally Published <%= article.published_at&.strftime("%b %d, %Y") %>
        <% elsif article.crossposted_at? %>
          Crossposted <%= article.crossposted_at.strftime("%b %d, %Y") %> & Published
          <%= article.published_at&.strftime("%b %d, %Y") %>
        <% else %>
          <%= article.published_at&.strftime("%b %d, %Y") %>
        <% end %>
      </div>

      <div class="flex gap-1">
        <% if decorated_article.pinned? %>
          <form method="post" action="<%= unpin_admin_article_path(decorated_article.id) %>" class="inline"
            data-action="submit->article#unpinArticle">
            <input type="hidden" name="_method" value="delete" />
            <input type="hidden" name="authenticity_token" value="<%= form_authenticity_token %>" />
            <button type="submit" class="c-btn">
              Unpin post
            </button>
          </form>
        <% else %>
          <form method="post" action="<%= pin_admin_article_path(decorated_article.id) %>" class="inline"
            data-action="submit->article#pinArticle">
            <input type="hidden" name="authenticity_token" value="<%= form_authenticity_token %>" />
            <button type="submit" class="c-btn">
              Pin post
            </button>
          </form>
        <% end %>
        <a class="c-link c-link--block" href="<%= admin_user_path(article.user_id) %>" target="_blank" rel="noopener">User</a>
        <a href="<%= article.path %>/edit" target="_blank" rel="noopener" class="c-link c-link--block">Edit</a>
      </div>
    </div>
  </header>

  <% cache "admin-user-notes-#{article.user_id}-#{article.user&.updated_at}", expires_in: 4.hours do %>
    <% if article.user&.notes&.any? %>
      <div class="crayons-card crayons-card--secondary p-4 pt-3">
        <div class="flex gap-2 items-center">
          <h3 class="crayons-subtitle-3"><%= article.user&.notes&.size %> user notes</h3>
          <a href="<%= admin_user_path(article.user_id) %>" class="c-link c-link--block c-link--branded">View all</a>
        </div>
        <% article.user&.notes&.last(3)&.each do |note| %>
          <p>
            <%= note.content %>
            <span class="color-secondary fs-s">
              – <%= note.author_id ? User.find(note.author_id).username : "No author" %>
              <time datetime="<%= note.created_at.strftime("%Y-%m-%dT%H:%M:%S%z") %>" title="<%= note.created_at.strftime("%Y-%m-%d, %H:%M") %>">
                <%= note.created_at.strftime("%b %e '%y") %>
              </time>
            </span>
          </p>
        <% end %>
      </div>
    <% end %>
  <% end %>

  <%= form_with url: admin_article_path(article.id), model: article, local: true, class: "crayons-card crayons-card--secondary p-4 flex flex-col gap-3" do |f| %>
    <input name="utf8" type="hidden" value="✓">
    <input type="hidden" name="authenticity_token" value="<%= form_authenticity_token %>" />
    <input type="hidden" name="_method" value="patch" />
    <div class="flex gap-4">
      <div class="crayons-field flex-1">
        <label for="featured_number_<%= article.id %>" class="crayons-field__label">Featured number</label>
        <input id="featured_number_<%= article.id %>"
              class="crayons-textfield"
              name="article[featured_number]"
              value="<%= article.featured_number %>"
              data-article-target="featuredNumber">
      </div>

      <div class="crayons-field flex-1">
        <label for="author_id_<%= article.id %>" class="crayons-field__label">Author ID</label>
        <input id="author_id_<%= article.id %>" class="crayons-textfield" size="6" name="article[user_id]"
          value="<%= article.user_id %>">
      </div>

      <div class="crayons-field flex-1">
        <label for="co_author_ids_list_<%= article.id %>" class="crayons-field__label">Co-Author IDs</label>
        <input id="co_author_ids_list_<%= article.id %>" class="crayons-textfield" size="6" name="article[co_author_ids_list]" placeholder="Comma separated"
          value="<%= article.co_author_ids&.join(", ") %>">
      </div>
    </div>
    <% if article.published? %>
      <div class="flex">
        <div class="crayons-field">
          <label for="published_at_<%= article.id %>" class="crayons-field__label">Published at</label>
          <div class="flex gap-1 items-center flex-wrap">
            <%= f.datetime_select :published_at, { required: true, include_blank: true, include_seconds: true }, class: "crayons-select w-auto" %>
            <span class="whitespace-nowrap color-secondary">UTC</span>
          </div>
        </div>
      </div>
    <% end %>
    <div class="flex items-center gap-4">
      <div class="crayons-field crayons-field--checkbox">
        <%= f.check_box :featured, id: "featured-#{article.id}", class: "crayons-checkbox" %>
        <label for="featured-<%= article.id %>" class="crayons-field__label">
          Featured
        </label>
      </div>

      <div class="crayons-field crayons-field--checkbox">
        <%= f.check_box :approved, id: "approved-#{article.id}", class: "crayons-checkbox" %>
        <label for="approved-<%= article.id %>" class="crayons-field__label">
          Approved
        </label>
      </div>
    </div>
    <div>
      <button class="c-btn c-btn--secondary">Save</button>
    </div>
  <% end %>
</article>