<div class="style-view" data-testid="style-editor">
  <div class="style-view-header">
    <h2 data-testid="editor-title"><%= translated("Style") %></h2>
    <p><%= translated("Theme preview and renderer theme selection") %></p>
  </div>

  <div class="style-theme-picker" role="group" aria-label={translated("Theme picker")}>
    <%= for theme <- @style_editor.themes do %>
      <button type="button" class={["style-theme-option", if(theme.name == @style_editor.selected_theme, do: "selected")]} phx-click="select_style_theme" phx-value-theme={theme.name} aria-pressed={theme.name == @style_editor.selected_theme}>
        <span class="style-theme-swatch">
          <span class="style-theme-tones" aria-hidden="true">
            <span class="style-theme-tone style-theme-tone-accent" style={"background: linear-gradient(135deg, #{theme.accent_color}, #{theme.dark_bg_color})"}></span>
            <span class="style-theme-tone style-theme-tone-light" style={"background-color: #{theme.light_bg_color}"}></span>
            <span class="style-theme-tone style-theme-tone-dark" style={"background-color: #{theme.dark_bg_color}"}></span>
          </span>
          <span class="style-theme-name"><%= theme_display_name(theme.name) %></span>
        </span>
      </button>
    <% end %>
  </div>

  <div class="style-apply-row">
    <label class="style-preview-mode-control">
      <span><%= translated("Preview Mode") %></span>
      <select phx-change="change_style_preview_mode" name="mode">
        <option value="auto" selected={@style_editor.preview_mode == "auto"}><%= translated("Auto") %></option>
        <option value="light" selected={@style_editor.preview_mode == "light"}><%= translated("Light") %></option>
        <option value="dark" selected={@style_editor.preview_mode == "dark"}><%= translated("Dark") %></option>
      </select>
    </label>
    <button class="primary" type="button" phx-click="apply_style_theme" disabled={@style_editor.selected_theme == @style_editor.applied_theme}><%= translated("Apply Theme") %></button>
  </div>

  <div class="style-preview-container">
    <iframe title={translated("Theme Preview")} class="style-preview-frame" src={@style_editor.preview_url}></iframe>
  </div>
</div>