fizzy/app/views/cards/show.html.erb

<% @page_title = card_title(@card) %>
<%= 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.
      <%= render "cards/publish", card: @card %>
    </div>
  <% end %>

  <nav class="align-start max-width">
    <%= link_to_home %>
    <%= link_to_back fallback_path: cards_path(collection_id: @card.collection) %>

    <% if @card.published? && !@card.closed? %>
      <div class="card__actions-container card__actions-container--top center border-radius" id="<%= dom_id(@card, :card_engagement_toggle) %>" style="--card-color: <%= @card.color %>;">
        <div class="btn__group flex full-width txt-uppercase">
          <%= form_with url: card_engagement_path(@card), method: :delete, data: { controller: "form" } do |form| %>
            <%= form.label :engagement, value: "considering", class: "btn", aria: { label: "Move to Doing"} do %>
              <%= form.radio_button :engagement, "considering", checked: @card.considering?, class: "for-screen-reader", data: { action: "change->form#submit" } %>
              <span>Considering</span>
            <% end %>
          <% end %>

          <%= form_with url: card_engagement_path(@card), method: :post, data: { controller: "form" } do |form| %>
            <%= form.label :engagement, value: "doing", class: "btn", aria: { label: "Move back to Considering"} do %>
              <%= form.radio_button :engagement, "doing", checked: @card.doing?, class: "for-screen-reader", data: { action: "change->form#submit" } %>
              <span>Doing</span>
            <% end %>
          <% end %>
        </div>
      </div>
    <% end %>

    <div class="btn btn--placeholder flex-item-justify-end"></div>
    <div class="btn btn--placeholder"></div>
  </nav>
<% end %>

<div data-controller="beacon" data-beacon-url-value="<%= card_reading_url(@card) %>">
  <div id="<%= dom_id(@card, :card_container) %>" class="card__container position-relative <%= "card__container--pointing" unless @card.published? %>" style="--card-color: <%= @card.color %>;">
    <%= render "cards/display/perma", card: @card %>

    <div class="card__actions flex flex-column gap-half">
      <%= render "cards/golden_toggle", card: @card if @card.doing? %>

      <%= render "cards/image", card: @card %>
      <%= button_to collection_card_path(@card.collection, @card),
            method: :delete,
            class: "btn",
            data: { turbo_confirm: "Are you sure you want to delete this?" } do %>
        <%= icon_tag "trash" %>
        <span class="for-screen-reader">Delete</span>
      <% end %>
    </div>


    <% if @card.published? %>
      <div class="card__actions card__actions--right flex flex-column gap-half">
        <%= turbo_frame_tag dom_id(@card, :watch), src: card_watch_path(@card), refresh: :morph %>
        <%= turbo_frame_tag dom_id(@card, :pin), src: card_pin_path(@card), refresh: :morph %>
      </div>
    <% end %>
  </div>

  <% unless @card.drafted? || @card.creating? %>
    <div class="card__actions-wrapper">
      <%= render "cards/closure_toggle", card: @card %>
    </div>
  <% end %>

  <% if @card.published? %>
    <%= render "cards/messages", card: @card %>
  <% else %>
    <div class="comments pad-block">
      <div class="comment comment--new flex-inline align-start full-width">
        <figure class="comment__avatar flex-item-no-shrink" aria-hidden="true">
          <%= avatar_tag Current.user, hidden_for_screen_reader: true %>
        </figure>

        <div class="comment__content flex-inline flex-column full-width">
          <div class="comment__body txt-align-start">
            <form data-controller="outlet-auto-save paste"
                class="flex flex-column gap full-width"
                data-outlet-auto-save-auto-save-outlet="#card_form"
                data-action="paste->paste#pasteFiles">
              <%= tag.house_md @card.draft_comment, name: "card[draft_comment]", class: "input comment__input",
                    form: "card_form",
                    placeholder: new_comment_placeholder(@card),
                    data: { action: "house-md:change->outlet-auto-save#change focusout->outlet-auto-save#submit", uploads_url: uploads_url(format: "json") } %>
            </form>

            <% if @card.creating? %>
              <div class="margin-block-start flex align-center gap">
                <%= button_to "Create card", card_publish_path(@card), class: "btn btn--reversed" %>
                <%= button_to "Save as draft", collection_card_path(@card.collection, @card), name: "card[status]", value: "drafted", method: :put, class: "btn" %>
              </div>
            <% end %>
          </div>
        </div>
      </div>
    </div>
  <% end %>
</div>