<% @page_title = @card.title %>
<%= turbo_stream_from @card %>

<% content_for :header do %>
  <% if @card.creating? && @card.can_recover_abandoned_creation? %>
    <div class="fill-selected position-sticky flex align-center gap-half justify-center border-block margin-block-end"
          style="view-transition-name: draft-banner; --card-color: <%= @card.color %>;">
      You have an unsaved work. Would you like to continue where you left off?
      <%= button_to card_recover_path(@card), class: "btn btn--reversed", data: { turbo_action: "replace" } do %>
        <span>Restore</span>
      <% end %>
    </div>
  <% end %>

  <% if @card.drafted? %>
    <div class="fill-selected position-sticky flex align-center gap-half fill-highlight justify-center border-block margin-block-end"
          style="view-transition-name: draft-banner;">
      This is a draft, it’s only visible to you.

      <%= button_to card_publish_path(@card), class: "btn txt-small btn--link", style: "--btn-background: #{@card.color}" do %>
        <span>Post to project</span>
      <% end %>
    </div>
  <% end %>

  <%= render "cards/show/header" %>
<% end %>

<header class="card-perma__collection-header">
  <%= link_to cards_path(collection_ids: [ @card.collection ]), class: "txt-large overflow-ellipsis margin-none txt-ink", style: "view-transistion-name: card-collection-title", data: { controller: "hotkey", action: "keydown.esc@document->hotkey#click" } do %>
    &larr; <strong class="font-black"><%= @card.collection.name %></strong>
  <% end %>
</header>

<div data-controller="beacon" data-beacon-url-value="<%= card_reading_url(@card) %>">
  <%= render "cards/container", card: @card %>

  <% if @card.published? || @card.drafted? %>
    <%= render "cards/messages", card: @card %>
  <% end %>
</div>
