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

<% @page_title = bubble_title(@bubble) %>

<% content_for :header do %>
  <% if @bubble.creating? && @bubble.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; --bubble-color: <%= @bubble.color %>;">
      You have an unsaved work. Would you like to continue where you left off?
      <%= button_to bucket_bubble_recover_path(@bubble.bucket, @bubble), class: "btn btn--reversed", data: { turbo_action: "replace" } do %>
        <span>Restore</span>
      <% end %>
    </div>
  <% end %>

  <% if @bubble.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 "bubbles/publish", bubble: @bubble %>
    </div>
  <% end %>

  <nav class="align-start max-width">
    <%= link_to root_path, class: "btn", data: { controller: "hotkey", action: "keydown.esc@document->hotkey#click" } do %>
      <%= icon_tag "home" %>
      <span class="for-screen-reader">Home</span>
    <% end %>

    <%= link_to "#", class: "btn flex-item-justify-start", data: { controller: "back-navigation hotkey", action: "keydown.esc@document->hotkey#click", back_navigation_fallback_destination_value: bubbles_path(bucket_id: @bubble.bucket) } do %>
      <%= icon_tag "arrow-left" %>
      <span class="for-screen-reader">Go Back</span>
    <% 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="<%= bucket_bubble_readings_url(@bubble.bucket, @bubble) %>">
  <div class="card__container position-relative <%= "card__container--pointing" unless @bubble.published? %>">
    <%= render "bubbles/card", bubble: @bubble %>

    <div class="card__actions flex flex-column gap-half">
      <%= render "bubbles/color", bubble: @bubble %>
      <%= render "bubbles/image", bubble: @bubble %>
      <%= button_to bucket_bubble_path(@bubble.bucket, @bubble),
            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 @bubble.published? %>
      <div class="card__actions card__actions--right flex flex-column gap-half">
        <%= turbo_frame_tag dom_id(@bubble, :watch), src: bucket_bubble_watch_path(@bubble.bucket, @bubble) %>
        <%= turbo_frame_tag dom_id(@bubble, :pin), src: bucket_bubble_pin_path(@bubble.bucket, @bubble) %>
      </div>
    <% end %>
  </div>

  <% unless @bubble.drafted? || @bubble.creating? %>
    <% if @bubble.stage.present? %>
      <div class="card__actions-wrapper">
        <%= render "bubbles/pop_toggle", bubble: @bubble %>
      </div>
    <% else %>
      <div class="card__actions-wrapper">
        <div class="card__actions-container center border-radius flex-inline align-center justify-center gap" style="--bubble-color: <%= @bubble.color %>">
          <%= button_to bucket_bubble_stagings_path(@bubble.bucket, @bubble, stage_id: @bubble.bucket&.workflow&.stages&.first), method: :post, class: "btn borderless" do %>
            <span>We’re doing this</span>
          <% end %>
          <%= button_to bucket_bubble_pop_path(@bubble.bucket, @bubble), class: "btn borderless" do %>
            <span>Not now</span>
          <% end %>
        </div>
      </div>
    <% end %>
  <% end %>

  <% if @bubble.published? %>
    <%= render "bubbles/messages", bubble: @bubble %>
  <% 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, loading: :lazy %>
        </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="#bubble_form"
                data-action="paste->paste#pasteFiles">
              <%= tag.house_md @bubble.draft_comment, name: "bubble[draft_comment]", class: "input comment__input", 
                    form: "bubble_form", 
                    placeholder: new_comment_placeholder(@bubble),
                    data: { action: "house-md:change->outlet-auto-save#change focusout->outlet-auto-save#submit", uploads_url: uploads_url(format: "json") } %>
            </form>

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