<%= render_component :split_layout,
alpine_data: "$store.layout.inspector",
":class": "($store.inspector.drawer.hidden || #{@drawer_panels.none?}) && '!grid-rows-[1fr] !grid-cols-[1fr]'" do |layout| %>
<%= layout.pane class: "flex flex-col h-full overflow-hidden",
x_effect: "forceOrientation = (layoutWidth < $store.inspector.minVerticalSplitWidth) ? 'horizontal' : null" do %>
<%= render_component :toolbar do |toolbar| %>
<% toolbar.section ":class": "layoutResizing && 'overflow-hidden'" do %>
<%= render_component :tabs, alpine_data: "$store.inspector.main" do |tabs| %>
<%= @main_panels.each do |panel| %>
<% tabs.tab name: panel.name,
label: panel.label,
hotkey: panel.hotkey,
disabled: panel.disabled %>
<% end %>
<% end %>
<% end %>
<% toolbar.section align: :right, padded: true, class: "flex-none min-w-[140px]", ":class": "{invisible: $store.inspector.main.activeTab !== 'preview'}" do %>
<%= render_component :dimensions_display,
target: "[data-component=viewport] iframe",
class: "ml-auto opacity-30 hover:opacity-100" %>
<% end %>
<% toolbar.section divide: :left, class: "flex-none relative z-10" do %>
<%= render_component :button_group do |group| %>
<% if Lookbook.pages.any? %>
<% group.button icon: :code,
tooltip: "Copy page embed code",
copy: true do %>
<%= embed <%= @preview.preview_class %>, :<%= @example.name %>, params: <%= request.query_parameters.deep_symbolize_keys.to_s %> %>
<% end %>
<% end %>
<% group.button icon: :refresh_cw,
tooltip: "Refresh preview",
"@click.stop": "startSpin(); $dispatch('viewport:reload'); stopSpin(500);" %>
<% group.button icon: :external_link,
href: lookbook.preview_path(@example.lookup_path),
tooltip: "Open preview in new window",
target: "_blank" %>
<% group.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 %>
<%= render_component :tab_panels, alpine_data: "$store.inspector.main" do |tabs| %>
<% @main_panels.each do |panel| %>
<% tabs.panel name: panel.name, class: panel.panel_classes do %>
<%= render panel.partial, **@inspector_data, panel: panel, **panel.locals %>
<% end %>
<% end %>
<% end %>
<% end %>
<%= layout.pane class: "flex flex-col h-full overflow-hidden bg-lookbook-drawer",
x_show: "!$store.inspector.drawer.hidden && #{@drawer_panels.any?}" do %>
<%= render_component :toolbar do |toolbar| %>
<% toolbar.section ":class": "layoutResizing && 'overflow-hidden'" do %>
<%= render_component :tabs, alpine_data: "$store.inspector.drawer" do |tabs| %>
<%= @drawer_panels.each do |panel| %>
<% tabs.tab name: panel.name,
label: panel.label,
hotkey: panel.hotkey,
disabled: panel.disabled %>
<% end %>
<% end %>
<% end %>
<% toolbar.section align: :right, class: "flex-none relative z-10" do %>
<%= render_component :button_group do |group| %>
<%= @drawer_panels.filter { |p| !p.disabled && p.copy }.each do |panel| %>
<% group.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.section divide: :left, class: "flex-none relative z-10" do %>
<%= render_component :button_group do |group| %>
<% group.button icon: :corner_up_right,
tooltip: "Move drawer to right",
"@click": "switchOrientation",
x_show: "horizontal && layoutWidth > $store.inspector.minVerticalSplitWidth",
cloak: true %>
<% group.button icon: :corner_up_right,
x_show: "horizontal && layoutWidth <= $store.inspector.minVerticalSplitWidth",
disabled: true,
cloak: true %>
<% group.button icon: :corner_left_down,
tooltip: "Move drawer to bottom",
"@click": "switchOrientation",
x_show: "vertical",
cloak: true %>
<% group.button icon: :x_circle,
tooltip: "Hide drawer",
"@click": "$store.inspector.drawer.hidden = true",
cloak: true %>
<% end %>
<% end %>
<% end %>
<%= render_component :tab_panels, alpine_data: "$store.inspector.drawer" do |tabs| %>
<% @drawer_panels.each do |panel| %>
<% tabs.panel name: panel.name do %>
<%= render panel.partial, **@inspector_data, panel: panel, **panel.locals %>
<% end %>
<% end %>
<% end %>
<% end %>
<% end %>