219 lines
13 KiB
Plaintext
219 lines
13 KiB
Plaintext
<%= 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">
|
||
<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}
|
||
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-current"><%= field.current_value %></div>
|
||
<div class="ai-suggestion-value"><%= 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 %> |