<%= render_component_tag id: id,
class: "border-b border-lookbook-divider rounded-md overflow-hidden",
cloak: true do %>
<%= lookbook_render :toolbar,
class: "border border-b-0 border-lookbook-divider",
style: "border-top-left-radius: 6px; border-top-right-radius: 6px;" do |toolbar| %>
<% toolbar.with_section padded: true do %>
<%= target.preview.label %>
<% if scenarios.many? %>
<%= select_tag("target", options_for_select(scenario_select_options, helpers.lookbook_embed_path(target.lookup_path)), "x-model": "targetPath", class: "!ml-2 compact") %>
<% else %>
(<%= target.label %>)
<% end %>
<% end %>
<% toolbar.with_section align: :right, class: "flex-none" do %>
<% if display_option_controls? && 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 %>
<% if actions.any? %>
<% toolbar.with_section divide: :left do %>
<%= lookbook_render :button_group do |group| %>
<% if display_action?(:inspect) %>
<% group.with_button icon: :eye,
href: helpers.lookbook_inspect_url(target.lookup_path, params),
tooltip: "View in Inspector",
target: "_top" %>
<% end %>
<% if display_action?(:open) %>
<% group.with_button icon: :external_link,
href: helpers.lookbook_preview_url(target.lookup_path, params),
tooltip: "Open in new window",
target: "_blank" %>
<% end %>
<% end %>
<% end %>
<% end %>
<% end %>
style="border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; overflow: hidden;"
<% end %>>
<%= lookbook_render :viewport,
iframe_id: "#{id}-viewport",
src: helpers.lookbook_preview_path(target.lookup_path, request.query_parameters.merge(lookbook_timestamp: Time.now, lookbook_embed: true)),
alpine_data: "store",
resize_height: false,
class: "mb-[-2px] transition-[height] duration-150",
":style": "`height: ${viewportCssHeight}`"
%>
<% if drawer? %>
<%= lookbook_render :toolbar, id: "#{id}-drawer-toolbar" do |toolbar| %>
<% toolbar.with_section do %>
<%= lookbook_render :tabs, alpine_data: "store", id: "#{id}-drawer-tabs" do |tabs| %>
<%= 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| %>
<%= panels.select { |p| !p.disabled && p.copy }.each do |panel| %>
<% group.with_button id: "copy-panel-contents-button-#{panel.name}",
icon: :copy,
tooltip: "Copy panel contents",
copy: !!panel.copy,
"x-show": "store.activeTab === '#{panel.name}'",
cloak: true do %>
<%= panel.copy ? panel.copy : "" %>
<% end %>
<% end %>
<% end %>
<% end %>
<% end %>
<%= lookbook_render :tab_panels, alpine_data: "store", id: "{id}-drawer-panels" do |tabs| %>
<% panels.each do |panel| %>
<% tabs.with_panel name: panel.name do %>
<%= lookbook_render :inspector_panel, name: panel.name do %>
<%= render panel.partial, **data, panel: panel, **panel.locals %>
<% end %>
<% end %>
<% end %>
<% end %>
<% end %>
<% end %>