<div class={["misc-editor-shell flex h-full min-h-0 flex-col overflow-hidden", misc_class(@misc_editor.kind)]} data-testid="misc-editor">
  <div class="misc-editor-header flex shrink-0 items-start justify-between gap-3">
    <div>
      <h2><%= @misc_editor.title %></h2>
      <p><%= @misc_editor.subtitle %></p>
    </div>
    <div class="misc-editor-actions flex flex-wrap items-center justify-end gap-2">
      <%= if refreshable?(@misc_editor.kind) do %>
        <button class="secondary ui-button ui-button-secondary" type="button" phx-click="rerun_misc_editor" phx-target={@myself}><%= dgettext("ui", "Refresh") %></button>
      <% end %>
      <%= if @misc_editor.kind == :site_validation do %>
        <button class="primary ui-button ui-button-primary" type="button" phx-click="apply_site_validation" phx-target={@myself} disabled={Enum.empty?(@misc_editor.missing_url_paths) and Enum.empty?(@misc_editor.extra_url_paths) and Enum.empty?(@misc_editor.updated_post_url_paths)}><%= dgettext("ui", "Apply") %></button>
      <% end %>
      <%= if @misc_editor.kind == :find_duplicates do %>
        <button class="secondary ui-button ui-button-secondary" type="button" phx-click="dismiss_selected_duplicates" phx-target={@myself} disabled={MapSet.size(@misc_editor.selected_pairs) == 0}><%= dgettext("ui", "Dismiss Checked") %></button>
      <% end %>
    </div>
  </div>

  <div class="misc-editor-summary flex flex-wrap gap-2">
    <%= for {label, value} <- summary_items(@misc_editor) do %>
      <div class="misc-summary-pill"><span><%= label %></span><strong><%= value %></strong></div>
    <% end %>
  </div>

  <div class="misc-editor-content min-h-0 flex-1 overflow-auto">
    <%= case @misc_editor.kind do %>
      <% :documentation -> %>
        <div class="documentation-view">
          <main class="documentation-scroll">
            <div class="documentation-content markdown-body">
              <article class="documentation-article help-doc-markdown" data-testid="help-documentation">
                <%= markdown_html(@misc_editor.markdown) %>
              </article>
            </div>
          </main>
        </div>

      <% :api_documentation -> %>
        <div class="documentation-view">
          <main class="documentation-scroll">
            <div class="documentation-content markdown-body">
              <article class="documentation-article help-doc-markdown" data-testid="help-api-documentation">
                <%= markdown_html(@misc_editor.markdown) %>
              </article>
            </div>
          </main>
        </div>

      <% :site_validation -> %>
        <div class="misc-columns">
          <section class="misc-card"><h3><%= dgettext("ui", "Missing URLs") %></h3><%= if Enum.empty?(@misc_editor.missing_url_paths) do %><p><%= dgettext("ui", "None found") %></p><% end %><ul><%= for path <- @misc_editor.missing_url_paths do %><li><%= path %></li><% end %></ul></section>
          <section class="misc-card"><h3><%= dgettext("ui", "Extra URLs") %></h3><%= if Enum.empty?(@misc_editor.extra_url_paths) do %><p><%= dgettext("ui", "None found") %></p><% end %><ul><%= for path <- @misc_editor.extra_url_paths do %><li><%= path %></li><% end %></ul></section>
          <section class="misc-card"><h3><%= dgettext("ui", "Updated URLs") %></h3><%= if Enum.empty?(@misc_editor.updated_post_url_paths) do %><p><%= dgettext("ui", "None found") %></p><% end %><ul><%= for path <- @misc_editor.updated_post_url_paths do %><li><%= path %></li><% end %></ul></section>
        </div>

      <% :metadata_diff -> %>
        <div class="metadata-diff-tool">
          <div class="metadata-diff-tabs" role="tablist">
            <%= for tab <- @misc_editor.tabs do %>
              <button
                class={["metadata-diff-tab", "ui-tab", if(@misc_editor.active_tab == tab.id, do: "active ui-tab-active")]}
                data-testid="metadata-diff-tab"
                data-entity-tab={tab.id}
                type="button"
                phx-click="select_metadata_diff_tab"
                phx-target={@myself}
                phx-value-tab={tab.id}
              >
                <span><%= tab.label %></span>
                <%= if tab.badge_count > 0 do %>
                  <span class="tab-badge ui-badge"><%= tab.badge_count %></span>
                <% end %>
              </button>
            <% end %>
          </div>

          <%= if @misc_editor.field_summaries != [] do %>
            <div class="metadata-diff-field-pills">
              <%= for field <- @misc_editor.field_summaries do %>
                <div class={["metadata-diff-field-pill", if(@misc_editor.active_field == field.field_name, do: "active")]}>
                  <button
                    class="metadata-diff-field-pill-toggle"
                    data-testid="metadata-diff-field-pill"
                    data-field={field.field_name}
                    type="button"
                    phx-click="toggle_metadata_diff_field"
                    phx-target={@myself}
                    phx-value-field={field.field_name}
                  >
                    <span class="field-pill-label"><%= field.field_name %></span>
                    <span class="field-pill-count"><%= field.diff_count %></span>
                  </button>

                  <%= if @misc_editor.repair_enabled do %>
                    <div class="metadata-diff-field-pill-actions">
                      <button
                        class="secondary metadata-diff-action-button ui-button ui-button-secondary"
                        data-testid="metadata-diff-repair-button"
                        data-direction="db_to_file"
                        data-field={field.field_name}
                        type="button"
                        phx-click="repair_metadata_diff"
                        phx-target={@myself}
                        phx-value-direction="db_to_file"
                        phx-value-field={field.field_name}
                      >
                        <%= dgettext("ui", "DB to File") %>
                      </button>

                      <button
                        class="secondary metadata-diff-action-button ui-button ui-button-secondary"
                        data-testid="metadata-diff-repair-button"
                        data-direction="file_to_db"
                        data-field={field.field_name}
                        type="button"
                        phx-click="repair_metadata_diff"
                        phx-target={@myself}
                        phx-value-direction="file_to_db"
                        phx-value-field={field.field_name}
                      >
                        <%= dgettext("ui", "File to DB") %>
                      </button>
                    </div>
                  <% end %>
                </div>
              <% end %>
            </div>
          <% end %>

          <div class="metadata-diff-results">
            <%= if @misc_editor.items == [] do %>
              <section class="misc-card metadata-diff-empty">
                <p><%= @misc_editor.empty_message %></p>
              </section>
            <% else %>
              <div class="diff-item-list">
                <%= for item <- @misc_editor.items do %>
                  <article class="diff-item-card" data-entity-type={item.entity_type}>
                    <header class="diff-item-header">
                      <div>
                        <strong><%= item.label %></strong>
                        <div class="diff-item-meta"><%= item.display_entity_type %> · <%= item.meta_label %></div>
                      </div>
                    </header>

                    <div class="diff-item-fields">
                      <%= for diff <- item.differences do %>
                        <div class="diff-field-row" data-field={diff.field}>
                          <div class="diff-field-name"><%= diff.field %></div>
                          <div class="diff-field-values">
                            <div class="diff-field-value db-value">
                              <span class="diff-source-label">DB</span>
                              <span><%= diff.db_value %></span>
                            </div>
                            <div class="diff-field-value file-value">
                              <span class="diff-source-label"><%= dgettext("ui", "File") %></span>
                              <span><%= diff.file_value %></span>
                            </div>
                          </div>
                        </div>
                      <% end %>
                    </div>
                  </article>
                <% end %>
              </div>
            <% end %>

            <%= if @misc_editor.active_field == nil and @misc_editor.orphan_files != [] do %>
              <section class="orphan-files-section" data-testid="metadata-diff-orphans">
                <div class="orphan-files-header">
                  <h3><%= dgettext("ui", "Orphan Files") %></h3>
                  <div class="orphan-files-actions">
                    <span class="misc-summary-pill"><%= length(@misc_editor.orphan_files) %></span>
                    <button
                      class="secondary metadata-diff-action-button ui-button ui-button-secondary"
                      data-testid="metadata-diff-import-button"
                      type="button"
                      phx-click="import_metadata_diff_orphans"
                      phx-target={@myself}
                    >
                      <%= dgettext("ui", "Import") %>
                    </button>
                  </div>
                </div>
                <div class="diff-item-list">
                  <%= for orphan <- @misc_editor.orphan_files do %>
                    <article class="diff-item-card orphan-file">
                      <header class="diff-item-header">
                        <div>
                          <strong><%= orphan.slug %></strong>
                          <div class="diff-item-meta"><%= dgettext("ui", "Orphan Files") %></div>
                        </div>
                      </header>

                      <div class="diff-item-fields">
                        <div class="diff-field-row">
                          <div class="diff-field-name"><%= dgettext("ui", "Path") %></div>
                          <div class="diff-field-values">
                            <div class="diff-field-value file-value orphan-path"><span><%= orphan.file_path %></span></div>
                          </div>
                        </div>
                      </div>
                    </article>
                  <% end %>
                </div>
              </section>
            <% end %>
          </div>
        </div>

      <% :translation_validation -> %>
        <div class="translation-validation-view">
          <section class="translation-validation-summary">
            <p><%= @misc_editor.summary_text %></p>
          </section>

          <section class="translation-validation-section">
            <h3><%= dgettext("ui", "translationValidation.databaseTitle") %></h3>

            <%= if @misc_editor.invalid_database_rows == [] do %>
              <p class="translation-validation-empty"><%= dgettext("ui", "translationValidation.noneDatabase") %></p>
            <% else %>
              <div class="translation-validation-list">
                <%= for issue <- @misc_editor.invalid_database_rows do %>
                  <article class="translation-validation-card translation-validation-card-db" data-testid="translation-validation-card">
                    <p class="translation-validation-card-title"><%= translation_issue_label(issue) %></p>
                    <dl class="translation-validation-card-meta">
                      <dt><%= dgettext("ui", "translationValidation.field.translationFor") %></dt>
                      <dd><%= translation_issue_value(issue, :translation_for) %></dd>
                      <%= if translation_issue_value(issue, :translation_id) do %>
                        <dt><%= dgettext("ui", "translationValidation.field.translationId") %></dt>
                        <dd><%= translation_issue_value(issue, :translation_id) %></dd>
                      <% end %>
                      <%= if translation_issue_value(issue, :title) do %>
                        <dt><%= dgettext("ui", "translationValidation.field.title") %></dt>
                        <dd><%= translation_issue_value(issue, :title) %></dd>
                      <% end %>
                      <dt><%= dgettext("ui", "translationValidation.field.languages") %></dt>
                      <dd><%= translation_issue_languages(issue) %></dd>
                      <%= if translation_issue_value(issue, :file_path) do %>
                        <dt><%= dgettext("ui", "translationValidation.field.filePath") %></dt>
                        <dd><%= translation_issue_value(issue, :file_path) %></dd>
                      <% end %>
                    </dl>
                  </article>
                <% end %>
              </div>
            <% end %>
          </section>

          <section class="translation-validation-section">
            <h3><%= dgettext("ui", "translationValidation.filesystemTitle") %></h3>

            <%= if @misc_editor.invalid_filesystem_files == [] do %>
              <p class="translation-validation-empty"><%= dgettext("ui", "translationValidation.noneFilesystem") %></p>
            <% else %>
              <div class="translation-validation-list">
                <%= for issue <- @misc_editor.invalid_filesystem_files do %>
                  <article class="translation-validation-card translation-validation-card-file" data-testid="translation-validation-card">
                    <p class="translation-validation-card-title"><%= translation_issue_label(issue) %></p>
                    <dl class="translation-validation-card-meta">
                      <dt><%= dgettext("ui", "translationValidation.field.translationFor") %></dt>
                      <dd><%= translation_issue_value(issue, :translation_for) %></dd>
                      <%= if translation_issue_value(issue, :title) do %>
                        <dt><%= dgettext("ui", "translationValidation.field.title") %></dt>
                        <dd><%= translation_issue_value(issue, :title) %></dd>
                      <% end %>
                      <dt><%= dgettext("ui", "translationValidation.field.languages") %></dt>
                      <dd><%= translation_issue_languages(issue) %></dd>
                      <%= if translation_issue_value(issue, :file_path) do %>
                        <dt><%= dgettext("ui", "translationValidation.field.filePath") %></dt>
                        <dd><%= translation_issue_value(issue, :file_path) %></dd>
                      <% end %>
                    </dl>
                  </article>
                <% end %>
              </div>
            <% end %>
          </section>

          <div class="translation-validation-actions">
            <button class="secondary ui-button ui-button-secondary" type="button" phx-click="rerun_misc_editor" phx-target={@myself} data-testid="translation-validation-revalidate"><%= dgettext("ui", "translationValidation.revalidate") %></button>
            <button class="primary ui-button ui-button-primary" type="button" phx-click="fix_translation_validation" phx-target={@myself} data-testid="translation-validation-fix" disabled={not @misc_editor.can_fix?}><%= dgettext("ui", "translationValidation.fix") %></button>
          </div>
        </div>

      <% :find_duplicates -> %>
        <div class="misc-list">
          <%= for pair <- @misc_editor.pairs do %>
            <article class="misc-list-item duplicate-pair-row">
              <label><input type="checkbox" checked={duplicate_checked?(@misc_editor, pair_id_from_pair(pair))} phx-click="toggle_duplicate_pair" phx-target={@myself} phx-value-pair-id={pair_id_from_pair(pair)} /> <span></span></label>
              <button class="linkish" type="button" phx-click="open_duplicate_post" phx-target={@myself} phx-value-id={BDS.MapUtils.attr(pair, :post_id_a)} phx-value-title={BDS.MapUtils.attr(pair, :title_a)}><%= BDS.MapUtils.attr(pair, :title_a) %></button>
              <span>→</span>
              <button class="linkish" type="button" phx-click="open_duplicate_post" phx-target={@myself} phx-value-id={BDS.MapUtils.attr(pair, :post_id_b)} phx-value-title={BDS.MapUtils.attr(pair, :title_b)}><%= BDS.MapUtils.attr(pair, :title_b) %></button>
              <span class="misc-summary-pill"><%= if(BDS.MapUtils.attr(pair, :exact_match), do: dgettext("ui", "Exact Match"), else: "#{Float.round((BDS.MapUtils.attr(pair, :similarity) || 0.0) * 100, 1)}%") %></span>
              <button class="secondary ui-button ui-button-secondary" type="button" phx-click="dismiss_duplicate_pair" phx-target={@myself} phx-value-post-id-a={BDS.MapUtils.attr(pair, :post_id_a)} phx-value-post-id-b={BDS.MapUtils.attr(pair, :post_id_b)}><%= dgettext("ui", "Dismiss") %></button>
            </article>
          <% end %>
        </div>

      <% :git_diff -> %>
        <div class="git-diff-view">
          <%= if @misc_editor.files == [] do %>
            <p class="git-diff-empty"><%= @misc_editor.empty_message %></p>
          <% else %>
            <form class="git-diff-toolbar" phx-change="select_git_diff_file" phx-target={@myself}>
              <label for="git-diff-file-select"><%= dgettext("ui", "gitDiff.changedFiles") %></label>
              <select class="ui-input" id="git-diff-file-select" data-testid="git-diff-file-select" name="path">
                <%= for file_path <- @misc_editor.files do %>
                  <option value={file_path} selected={file_path == @misc_editor.selected_file_path}><%= file_path %></option>
                <% end %>
              </select>
            </form>

            <div
              id={"git-diff-editor-#{String.replace(@misc_editor.active_diff.file_path || "working-tree", ~r/[^a-zA-Z0-9_-]+/, "-")}"}
              class="git-diff-editor"
              phx-hook="MonacoDiffEditor"
              data-monaco-diff-language={@misc_editor.active_diff.language}
              data-monaco-diff-file-path={@misc_editor.active_diff.file_path}
              data-monaco-diff-view-style={@misc_editor.preferences.view_style}
              data-monaco-diff-word-wrap={if(@misc_editor.preferences.word_wrap, do: "on", else: "off")}
              data-monaco-diff-hide-unchanged={if(@misc_editor.preferences.hide_unchanged_regions, do: "true", else: "false")}
            >
              <textarea class="monaco-diff-original" hidden><%= @misc_editor.active_diff.original %></textarea>
              <textarea class="monaco-diff-modified" hidden><%= @misc_editor.active_diff.modified %></textarea>
              <div class="monaco-diff-editor-instance"></div>
            </div>
          <% end %>
        </div>
    <% end %>
  </div>
</div>