<%= lookbook_render :split_layout,
alpine_data: "$store.layout.inspector",
":class": "($store.inspector.drawer.hidden || #{@drawer_panels.none?}) && '!grid-rows-[1fr] !grid-cols-[1fr]'",
data: {
"preview-target": @target.id
} do |layout| %>
<%= layout.with_pane class: "flex flex-col h-full overflow-hidden",
"x-effect": "forceOrientation = (layoutWidth < $store.inspector.minVerticalSplitWidth) ? 'horizontal' : null" do %>
<%= lookbook_render :toolbar, id: "main-toolbar" do |toolbar| %>
<% toolbar.with_section ":class": "layoutResizing && 'overflow-hidden'" do %>
<%= lookbook_render :tabs, alpine_data: "$store.inspector.main", id: "inspector-tabs-main" do |tabs| %>
<%= @main_panels.each do |panel| %>
<% tabs.with_tab name: panel.name,
label: panel.label,
hotkey: panel.hotkey,
disabled: panel.disabled %>
<% end %>
<% end %>
<% end %>
<% toolbar.with_section align: :right, class: "flex-none" do %>
<% if @dynamic_display_options.any? %>
<%= lookbook_render "display_options/editor" do |editor| %>
<% @dynamic_display_options.each do |key, opts| %>
<% editor.with_field name: key, opts: opts, value: @static_display_options[key] %>
<% end %>
<% end %>
<% end %>
<% end %>
<% toolbar.with_section divide: :left, class: "flex-none relative z-10" do %>
<%= lookbook_render :button_group do |group| %>
<%= group.with_button id: "embed-generator-dropdown-button", icon: :code_2, tooltip: "Get embed code" do |button| %>
<% button.with_dropdown.with_content(lookbook_render :embed_code_dropdown,
pages: @pages,
preview: @preview,
target: @target,
params: request.query_parameters
) %>
<% end %>
<% group.with_button id: "copy-preview-url-button",
icon: :link,
tooltip: "Copy preview URL",
copy: true do %>
<%= lookbook_inspect_url(@target.lookup_path, request.query_parameters) %>
<% end %>
<% group.with_button id: "refresh-preview-button",
icon: :refresh_cw,
tooltip: "Refresh preview",
"@click.stop": "startSpin(); $dispatch('viewport:reload'); stopSpin(500);" %>
<% group.with_button id: "open-preview-button",
icon: :external_link,
href: lookbook_preview_path(@target.lookup_path, request.query_parameters),
tooltip: "Open preview in new window",
target: "_blank" %>
<% group.with_button id: "show-drawer-button",
icon: "vertical ? 'sidebar' : 'credit-card'",
tooltip: "Show drawer",
"@click": "$store.inspector.drawer.hidden = false",
class: "rotate-180",
"x-show": "$store.inspector.drawer.hidden",
cloak: true %>
<% end %>
<% end %>
<% end %>
<%= lookbook_render :tab_panels, alpine_data: "$store.inspector.main", id: "inspector-panels-main" do |tabs| %>
<% @main_panels.each do |panel| %>
<% tabs.with_panel name: panel.name do %>
<%= lookbook_render :inspector_panel, name: panel.name do %>
<%= render panel.partial, **@inspector_data, panel: panel, **panel.locals %>
<% end %>
<% end %>
<% end %>
<% end %>
<% end %>
<%= layout.with_pane class: "flex flex-col h-full overflow-hidden bg-lookbook-drawer-bg",
"x-show": "!$store.inspector.drawer.hidden && #{@drawer_panels.any?}" do %>
<%= lookbook_render :toolbar, id: "drawer-toolbar" do |toolbar| %>
<% toolbar.with_section ":class": "layoutResizing && 'overflow-hidden'" do %>
<%= lookbook_render :tabs, alpine_data: "$store.inspector.drawer", id: "inspector-tabs-drawer" do |tabs| %>
<%= @drawer_panels.each do |panel| %>
<% tabs.with_tab name: panel.name,
label: panel.label,
hotkey: panel.hotkey,
disabled: panel.disabled %>
<% end %>
<% end %>
<% end %>
<% toolbar.with_section align: :right, class: "flex-none relative z-10" do %>
<%= lookbook_render :button_group do |group| %>
<%= @drawer_panels.select { |p| !p.disabled && p.copy }.each do |panel| %>
<% group.with_button id: "copy-panel-contents-button",
icon: :copy,
tooltip: "Copy panel contents",
copy: !!panel.copy,
"x-show": "$store.inspector.drawer.activeTab === '#{panel.name}'",
cloak: true do %>
<%= panel.copy ? panel.copy : "" %>
<% end %>
<% end %>
<% end %>
<% end %>
<% toolbar.with_section divide: :left, class: "flex-none relative z-10" do %>
<%= lookbook_render :button_group do |group| %>
<% group.with_button id: "drawer-to-right-button",
icon: :sidebar_open,
tooltip: "Pin drawer on right",
"@click": "switchOrientation",
"x-show": "horizontal",
":class": "{'pointer-events-none opacity-50 !cursor-not-allowed': horizontal && layoutWidth <= $store.inspector.minVerticalSplitWidth}",
cloak: true %>
<% group.with_button id: "drawer-to-bottom-button",
icon: :sidebar_open,
tooltip: "Pin drawer on bottom",
"@click": "switchOrientation",
"x-show": "vertical",
class: "rotate-90",
cloak: true %>
<% group.with_button id: "hide-drawer-button",
icon: :x_circle,
tooltip: "Hide drawer",
"@click": "$store.inspector.drawer.hidden = true",
cloak: true %>
<% end %>
<% end %>
<% end %>
<%= lookbook_render :tab_panels, alpine_data: "$store.inspector.drawer", id: "inspector-panels-drawer" do |tabs| %>
<% @drawer_panels.each do |panel| %>
<% tabs.with_panel name: panel.name do %>
<%= lookbook_render :inspector_panel, name: panel.name do %>
<%= render panel.partial, **@inspector_data, panel: panel, **panel.locals %>
<% end %>
<% end %>
<% end %>
<% end %>
<% end %>
<% end %>