<%= content_for :page_title, t(".title") %>

<div class="bg-container shadow-border-xs rounded-xl p-4 grow overflow-y-auto">
  <div class="flex flex-col md:flex-row justify-between gap-4 mb-12 last:mb-0">
    <div class="w-full md:w-1/3">
      <div class="md:px-3 flex items-center gap-3">
        <% if @release_notes[:avatar].present? %>
          <div class="fg-inverse shrink-0 w-9 h-9">
            <%= image_tag @release_notes[:avatar], class: "rounded-full w-full h-full object-cover" %>
          </div>
        <% else %>
          <div class="bg-gray-300 text-gray-600 shrink-0 w-9 h-9 rounded-full flex items-center justify-center text-sm font-medium">
            <%= @release_notes[:username]&.first&.upcase || "?" %>
          </div>
        <% end %>
        <div>
          <a class="text-primary font-medium text-sm" href="https://github.com/<%= @release_notes[:username] %>"><%= "@#{@release_notes[:username]}" %></a>
          <div class="text-secondary text-sm"><%= @release_notes[:published_at]&.strftime("%B %d, %Y") || "Date unavailable" %></div>
        </div>
      </div>
    </div>
    <div class="w-full md:w-2/3 text-secondary text-sm prose prose--github-release-notes">
      <h2 class="mb-5 text-xl text-primary"><%= @release_notes[:name] %></h2>
      <%= (@release_notes[:body] || "No release notes available").html_safe %>
    </div>
  </div>
</div>
