bDS2/lib/bds/desktop/shell_live/overlay_html/shell_overlay.html.heex

<%= if @shell_overlay do %>
  <%= case @shell_overlay.kind do %>
    <% :ai_suggestions -> %>
      <div class="shell-overlay-backdrop ai-suggestions-modal-backdrop" data-testid="shell-overlay-backdrop" phx-window-keydown="overlay_keydown">
        <button class="shell-overlay-dismiss" type="button" phx-click="close_overlay" aria-label={translated("Cancel")}></button>
        <div class="ai-suggestions-modal" role="dialog" aria-modal="true">
          <div class="ai-suggestions-modal-header">
            <h2><%= @shell_overlay.title %></h2>
            <button class="ai-suggestions-modal-close" type="button" phx-click="close_overlay">×</button>
          </div>
          <div class="ai-suggestions-modal-body">
            <%= if Map.get(@shell_overlay, :error) do %>
              <div class="ai-suggestions-error">
                <strong><%= translated("Error") %></strong>
                <span><%= @shell_overlay.error %></span>
              </div>
            <% end %>
            <div class="ai-suggestions-list">
              <%= for field <- @shell_overlay.fields do %>
                <div class="ai-suggestion-item">
                  <label class="ai-suggestion-checkbox">
                    <input
                      type="checkbox"
                      checked={field.accepted}
                      disabled={field.locked or field.loading}
                      phx-click="overlay_toggle_ai_field"
                      phx-value-key={field.key}
                    />
                    <span class="checkmark"></span>
                  </label>
                  <div class="ai-suggestion-content">
                    <div class="ai-suggestion-label"><%= field.label %></div>
                    <div class={["ai-suggestion-value", if(field.loading, do: "loading")]}>
                      <%= if field.loading, do: "Loading…", else: field.suggested_value %>
                    </div>
                  </div>
                </div>
              <% end %>
            </div>
          </div>
          <div class="ai-suggestions-modal-footer">
            <button class="button-cancel" type="button" phx-click="close_overlay"><%= translated("Cancel") %></button>
            <button class="button-apply" type="button" phx-click="overlay_confirm"><%= translated("Apply Selected") %></button>
          </div>
        </div>
      </div>

    <% :insert_link -> %>
      <div class="shell-overlay-backdrop insert-modal-backdrop" data-testid="shell-overlay-backdrop" phx-window-keydown="overlay_keydown">
        <button class="shell-overlay-dismiss" type="button" phx-click="close_overlay" aria-label={translated("Cancel")}></button>
        <div class="insert-modal" role="dialog" aria-modal="true">
          <div class="insert-modal-header">
            <h2 class="insert-modal-title"><%= @shell_overlay.title %></h2>
            <div class="insert-modal-tabs">
              <button class={["insert-modal-tab", if(@shell_overlay.active_tab == :internal, do: "active")]} type="button" phx-click="overlay_set_tab" phx-value-tab="internal"><%= translated("Internal") %></button>
              <button class={["insert-modal-tab", if(@shell_overlay.active_tab == :external, do: "active")]} type="button" phx-click="overlay_set_tab" phx-value-tab="external"><%= translated("External") %></button>
            </div>
          </div>

          <%= if @shell_overlay.active_tab == :internal do %>
            <form class="insert-modal-search" phx-change="overlay_set_search">
              <input class="insert-modal-input" type="text" name="overlay[query]" value={@shell_overlay.search_query} placeholder={translated("sidebar.searchPostsPlaceholder")} />
            </form>
            <div class="insert-modal-results">
              <%= for result <- if(String.length(@shell_overlay.search_query) >= 2, do: @shell_overlay.results, else: @shell_overlay.related_posts) do %>
                <button class="insert-modal-result-item" type="button" phx-click="overlay_select_result" phx-value-id={result.post_id}>
                  <div class="insert-modal-result-title"><%= result.title %></div>
                  <div class="insert-modal-result-meta"><%= result.canonical_url %></div>
                </button>
              <% end %>
              <%= if Enum.empty?(if(String.length(@shell_overlay.search_query) >= 2, do: @shell_overlay.results, else: @shell_overlay.related_posts)) do %>
                <div class="insert-modal-status"><%= translated("No items") %></div>
              <% end %>
            </div>
          <% else %>
            <form class="insert-modal-external" phx-change="overlay_update_form">
              <label class="insert-modal-field">
                <span class="insert-modal-label"><%= translated("URL") %></span>
                <input class="insert-modal-input" type="text" name="overlay[url]" value={@shell_overlay.external_url} />
              </label>
              <label class="insert-modal-field">
                <span class="insert-modal-label"><%= translated("Display Text") %></span>
                <input class="insert-modal-input" type="text" name="overlay[text]" value={@shell_overlay.external_text} />
              </label>
              <button class="insert-modal-submit" type="button" phx-click="overlay_insert_external"><%= translated("Insert") %></button>
            </form>
          <% end %>
        </div>
      </div>

    <% :insert_media -> %>
      <div class="shell-overlay-backdrop insert-modal-backdrop" data-testid="shell-overlay-backdrop" phx-window-keydown="overlay_keydown">
        <button class="shell-overlay-dismiss" type="button" phx-click="close_overlay" aria-label={translated("Cancel")}></button>
        <div class="insert-modal" role="dialog" aria-modal="true">
          <div class="insert-modal-header">
            <h2 class="insert-modal-title"><%= @shell_overlay.title %></h2>
          </div>
          <form class="insert-modal-search" phx-change="overlay_set_search">
            <input class="insert-modal-input" type="text" name="overlay[query]" value={@shell_overlay.search_query} placeholder={translated("sidebar.searchMediaPlaceholder")} />
          </form>
          <div class="insert-modal-results insert-modal-media-grid">
            <%= for result <- @shell_overlay.results do %>
              <button class="insert-modal-media-item" type="button" phx-click="overlay_select_result" phx-value-id={result.media_id}>
                <%= if result.thumbnail_url do %>
                  <img class="insert-modal-media-thumb" src={result.thumbnail_url} alt="" loading="lazy" />
                <% else %>
                  <span class="insert-modal-media-fallback"><%= result.original_name %></span>
                <% end %>
                <span class="insert-modal-media-title"><%= result.title %></span>
              </button>
            <% end %>
          </div>
        </div>
      </div>

    <% :language_picker -> %>
      <div class="shell-overlay-backdrop language-picker-modal-backdrop" data-testid="shell-overlay-backdrop" phx-window-keydown="overlay_keydown">
        <button class="shell-overlay-dismiss" type="button" phx-click="close_overlay" aria-label={translated("Cancel")}></button>
        <div class="language-picker-modal" role="dialog" aria-modal="true">
          <div class="language-picker-modal-header">
            <h2><%= @shell_overlay.title %></h2>
            <button class="language-picker-modal-close" type="button" phx-click="close_overlay">×</button>
          </div>
          <div class="language-picker-modal-body">
            <div class="language-picker-label"><%= translated("Available languages") %></div>
            <div class="language-picker-options">
              <%= for target <- @shell_overlay.available_targets do %>
                <button class="language-picker-option" type="button" phx-click="overlay_select_language" phx-value-code={target.code}>
                  <span class="language-picker-flag"><%= target.flag_emoji %></span>
                  <span class="language-picker-name"><%= target.name %></span>
                  <%= if target.has_existing_translation do %>
                    <span class="language-picker-status"><%= target.existing_status %></span>
                  <% end %>
                </button>
              <% end %>
            </div>
          </div>
        </div>
      </div>

    <% :confirm_delete -> %>
      <div class="shell-overlay-backdrop confirm-delete-modal-backdrop" data-testid="shell-overlay-backdrop" phx-window-keydown="overlay_keydown">
        <button class="shell-overlay-dismiss" type="button" phx-click="close_overlay" aria-label={translated("Cancel")}></button>
        <div class="confirm-delete-modal" role="dialog" aria-modal="true">
          <div class="confirm-delete-modal-header">
            <h2><%= @shell_overlay.title %></h2>
            <button class="confirm-delete-modal-close" type="button" phx-click="close_overlay">×</button>
          </div>
          <div class="confirm-delete-modal-body">
            <div class="confirm-delete-message"><strong><%= @shell_overlay.entity_name %></strong></div>
            <%= if @shell_overlay.reference_count > 0 do %>
              <div class="confirm-delete-warning">
                <div class="warning-content">
                  <strong><%= translated("This item is referenced by:") %></strong>
                  <ul class="reference-list">
                    <%= for title <- @shell_overlay.reference_list do %>
                      <li><span class="reference-title"><%= title %></span></li>
                    <% end %>
                  </ul>
                </div>
              </div>
            <% end %>
          </div>
          <div class="confirm-delete-modal-footer">
            <button class="button-cancel" type="button" phx-click="close_overlay"><%= translated("Cancel") %></button>
            <button class="button-delete" type="button" phx-click="overlay_confirm"><%= translated("Delete") %></button>
          </div>
        </div>
      </div>

    <% :confirm_dialog -> %>
      <div class="shell-overlay-backdrop confirm-delete-modal-backdrop" data-testid="shell-overlay-backdrop" phx-window-keydown="overlay_keydown">
        <button class="shell-overlay-dismiss" type="button" phx-click="close_overlay" aria-label={translated("Cancel")}></button>
        <div class="confirm-delete-modal" role="dialog" aria-modal="true">
          <div class="confirm-delete-modal-header">
            <h2><%= @shell_overlay.title %></h2>
            <button class="confirm-delete-modal-close" type="button" phx-click="close_overlay">×</button>
          </div>
          <div class="confirm-delete-modal-body">
            <div class="confirm-delete-message"><%= @shell_overlay.message %></div>
          </div>
          <div class="confirm-delete-modal-footer">
            <button class="button-cancel" type="button" phx-click="close_overlay"><%= translated("Cancel") %></button>
            <button class="button-apply" type="button" phx-click="overlay_confirm"><%= translated("Confirm") %></button>
          </div>
        </div>
      </div>

    <% :gallery -> %>
      <div class="shell-overlay-backdrop gallery-overlay-backdrop" data-testid="shell-overlay-backdrop" phx-window-keydown="overlay_keydown">
        <button class="shell-overlay-dismiss" type="button" phx-click="close_overlay" aria-label={translated("Cancel")}></button>
        <div class="gallery-overlay" role="dialog" aria-modal="true">
          <div class="gallery-overlay-header">
            <h2><%= translated("Gallery") %></h2>
            <button class="gallery-overlay-close" type="button" phx-click="close_overlay">×</button>
          </div>
          <div class="gallery-overlay-grid">
            <%= for image <- @shell_overlay.images do %>
              <button class="gallery-overlay-item" type="button" phx-click="overlay_select_gallery_image" phx-value-id={image.media_id}>
                <img src={image.thumbnail_url} alt={image.alt_text || ""} loading="lazy" />
              </button>
            <% end %>
          </div>
        </div>

        <%= if @shell_overlay.lightbox do %>
          <div class="lightbox-overlay">
            <button class="shell-overlay-dismiss" type="button" phx-click="overlay_close_lightbox" aria-label={translated("Cancel")}></button>
            <div class="lightbox-container">
              <button class="lightbox-close" type="button" phx-click="overlay_close_lightbox">×</button>
              <%= if @shell_overlay.lightbox.total_count > 1 do %>
                <button class="lightbox-nav lightbox-prev" type="button" phx-click="overlay_lightbox_previous">‹</button>
              <% end %>
              <img class="lightbox-image" src={@shell_overlay.lightbox.image_url} alt={@shell_overlay.lightbox.alt_text || ""} />
              <%= if @shell_overlay.lightbox.total_count > 1 do %>
                <button class="lightbox-nav lightbox-next" type="button" phx-click="overlay_lightbox_next">›</button>
                <div class="lightbox-counter"><%= @shell_overlay.lightbox.position %>/<%= @shell_overlay.lightbox.total_count %></div>
              <% end %>
            </div>
          </div>
        <% end %>
      </div>

    <% _other -> %>
  <% end %>
<% end %>