<div class="scripts-view-shell ui-editor-shell flex h-full min-h-0 flex-col" data-testid="script-editor">
  <div class="ui-editor-header flex shrink-0 items-start justify-between gap-3">
    <div class="flex min-w-0 flex-1 overflow-hidden"><div class="ui-tab ui-tab-active ui-editor-tab-current inline-flex max-w-full items-center overflow-hidden px-3 py-2"><span class="truncate"><%= @script_editor.title %></span></div></div>
    <div class="ui-editor-actions flex flex-wrap items-center justify-end gap-2">
      <span class={[
        "status-badge",
        "ui-badge",
        "status-#{@script_editor.status}"
      ]} data-testid="script-status-badge"><%= BDS.Desktop.ShellData.dashboard_status_label(@script_editor.status) %></span>
      <%= if @script_editor.can_publish? do %>
        <button class="success ui-button ui-button-primary" data-testid="script-publish-button" type="button" phx-click="publish_script_editor" phx-target={@myself}><%= dgettext("ui", "Publish") %></button>
      <% end %>
      <button class="secondary scripts-save-button ui-button ui-button-secondary" type="button" phx-click="save_script_editor" phx-target={@myself}><%= dgettext("ui", "Save") %></button>
      <button class="secondary scripts-run-button ui-button ui-button-secondary" type="button" phx-click="run_script_editor" phx-target={@myself}><%= dgettext("ui", "Run") %></button>
      <button class="secondary scripts-check-button ui-button ui-button-secondary" type="button" phx-click="check_script_editor" phx-target={@myself}><%= dgettext("ui", "Check Syntax") %></button>
      <button class="secondary danger ui-button ui-button-secondary ui-button-danger" type="button" phx-click="delete_script_editor" phx-target={@myself}><%= dgettext("ui", "Delete") %></button>
    </div>
  </div>
  <form class="flex min-h-0 flex-1 flex-col gap-4 overflow-hidden p-4" phx-change="change_script_editor" phx-target={@myself}>
    <div class="grid gap-4">
      <div class="flex min-w-0 flex-col gap-4">
        <div class="ui-field-grid-2 grid gap-4 md:grid-cols-2">
          <div class="ui-field-stack flex flex-col gap-1.5"><label><%= dgettext("ui", "Title") %></label><input class="ui-input" type="text" name="script_editor[title]" value={@script_editor.title} /></div>
          <div class="ui-field-stack flex flex-col gap-1.5"><label><%= dgettext("ui", "Slug") %></label><input class="ui-input" type="text" name="script_editor[slug]" value={@script_editor.slug} /></div>
        </div>
        <div class="ui-field-grid-3 grid gap-4 md:grid-cols-[minmax(0,1fr)_minmax(0,1fr)_auto]">
          <div class="ui-field-stack flex flex-col gap-1.5"><label><%= dgettext("ui", "Kind") %></label><select class="ui-input" name="script_editor[kind]"><option value="utility" selected={@script_editor.kind == "utility"}>utility</option><option value="macro" selected={@script_editor.kind == "macro"}>macro</option><option value="transform" selected={@script_editor.kind == "transform"}>transform</option></select></div>
          <div class="ui-field-stack flex flex-col gap-1.5"><label><%= dgettext("ui", "Entrypoint") %></label><select class="ui-input" name="script_editor[entrypoint]"><%= for entrypoint <- @script_editor.entrypoints do %><option value={entrypoint} selected={entrypoint == @script_editor.entrypoint}><%= entrypoint %></option><% end %></select></div>
          <div class="flex flex-col justify-end gap-1.5"><label><input type="checkbox" name="script_editor[enabled]" checked={@script_editor.enabled} /> <%= dgettext("ui", "Enabled") %></label></div>
        </div>
      </div>
    </div>
    <div class="flex min-h-0 flex-1 flex-col overflow-hidden">
      <div class="ui-toolbar flex items-center gap-3"><div class="ui-toolbar-group flex items-center gap-2"><label><%= dgettext("ui", "Content") %></label></div></div>
      <div
        id={"script-editor-monaco-shell-#{@script_editor.id}"}
        class="scripts-monaco monaco-editor-shell min-h-0 flex-1 overflow-hidden"
        phx-hook="MonacoEditor"
        data-monaco-editor-id={@script_editor.id}
        data-monaco-input-id={"script-editor-content-#{@script_editor.id}"}
        data-monaco-language="lua"
        data-monaco-word-wrap="on"
      >
        <div id={"script-editor-monaco-#{@script_editor.id}"} class="monaco-editor-instance min-h-0 flex-1" phx-update="ignore"></div>
        <textarea id={"script-editor-content-#{@script_editor.id}"} class="monaco-editor-input code-editor-textarea" name="script_editor[content]" spellcheck="false"><%= @script_editor.content %></textarea>
      </div>
    </div>
    <div class="flex shrink-0 flex-wrap gap-4"><span class="text-muted text-small"><%= dgettext("ui", "Created") %>: <%= BDS.Persistence.timestamp_to_iso8601(@script_editor.created_at) %></span><span class="text-muted text-small"><%= dgettext("ui", "Updated") %>: <%= BDS.Persistence.timestamp_to_iso8601(@script_editor.updated_at) %></span></div>
  </form>
</div>
