<.admin_page_header back={PhoenixKit.Utils.Routes.path("/admin/settings/media")} title={gettext("Instance Dimensions")} subtitle={gettext("Manage dimension presets for automatic file instance generation")} /> <%!-- Info Alert --%>
<.icon name="hero-information-circle" class="w-5 h-5" />

{gettext("Dimension Presets")}

{gettext( "Dimensions define the target sizes for automatic variant generation. Images are resized and videos are transcoded to these preset sizes." )} {gettext( "The migration seeds 8 default dimensions: 4 image sizes (thumbnail, small, medium, large) and 4 video variants (360p, 720p, 1080p, video_thumbnail)." )}

<%!-- Dimensions List --%>
<%= if length(@dimensions) == 0 do %>
<.icon name="hero-photo" class="w-16 h-16 mx-auto mb-4 text-base-content/30" />

{gettext("No dimensions configured")}

{gettext("Create your first dimension preset to start generating file variants.")}

<.link navigate={ PhoenixKit.Utils.Routes.path("/admin/settings/media/dimensions/new/image") } class="btn btn-info" > <.icon name="hero-plus" class="w-4 h-4 mr-1" /> {gettext("Add Image Dimension")} <.link navigate={ PhoenixKit.Utils.Routes.path("/admin/settings/media/dimensions/new/video") } class="btn btn-warning" > <.icon name="hero-plus" class="w-4 h-4 mr-1" /> {gettext("Add Video Dimension")}
<% else %> <%!-- Image Dimensions --%>

<.icon name="hero-photo" class="w-6 h-6 mr-2" /> {gettext("Image Dimensions")}

<.link navigate={ PhoenixKit.Utils.Routes.path("/admin/settings/media/dimensions/new/image") } class="btn btn-info" > <.icon name="hero-plus" class="w-4 h-4 mr-1" /> {gettext("Add Image Dimension")}
<%= for dimension <- Enum.filter(@dimensions, & &1.applies_to in ["image", "both"]) do %> <% end %>
{gettext("Name")} <%= if Enum.any?(Enum.filter(@dimensions, & &1.applies_to in ["image", "both"]), & &1.maintain_aspect_ratio) do %> {gettext("Target Width / Size")} <% else %> {gettext("Size")} <% end %> {gettext("Mode")} {gettext("Quality")} {gettext("Format")} {gettext("Status")} {gettext("Actions")}
{dimension.name}
 <%= if dimension.maintain_aspect_ratio do %> {dimension.width}px <% else %> {format_dimension_size(dimension.width, dimension.height)} <% end %> <%= if dimension.maintain_aspect_ratio do %> {gettext("Aspect Ratio")} <% else %> {gettext("Fixed")} <% end %> {dimension.quality}% <%= if dimension.format do %> {dimension.format} <% else %> {gettext("Original")} <% end %> <%= if dimension.enabled do %> {gettext("Enabled")} <% else %> {gettext("Disabled")} <% end %>
<.link navigate={ PhoenixKit.Utils.Routes.path( "/admin/settings/media/dimensions/#{dimension.uuid}/edit" ) } class="btn btn-xs btn-outline btn-info tooltip tooltip-bottom" data-tip={gettext("Edit")} > <.icon name="hero-pencil" class="w-4 h-4 hidden sm:inline" /> {gettext("Edit")}
<%!-- Video Dimensions --%>

<.icon name="hero-video-camera" class="w-6 h-6 mr-2" /> {gettext( "Video Dimensions" )}

<.link navigate={ PhoenixKit.Utils.Routes.path("/admin/settings/media/dimensions/new/video") } class="btn btn-warning" > <.icon name="hero-plus" class="w-4 h-4 mr-1" /> {gettext("Add Video Dimension")}
<%= for dimension <- Enum.filter(@dimensions, & &1.applies_to in ["video", "both"]) do %> <% end %>
{gettext("Name")} <%= if Enum.any?(Enum.filter(@dimensions, & &1.applies_to in ["video", "both"]), & &1.maintain_aspect_ratio) do %> {gettext("Target Width / Resolution")} <% else %> {gettext("Resolution")} <% end %> {gettext("Mode")} {gettext("Quality (CRF)")} {gettext("Codec")} {gettext("Status")} {gettext("Actions")}
{dimension.name}
 <%= if dimension.maintain_aspect_ratio do %> {dimension.width}px <% else %> {format_dimension_size(dimension.width, dimension.height)} <% end %> <%= if dimension.maintain_aspect_ratio do %> {gettext("Aspect Ratio")} <% else %> {gettext("Fixed")} <% end %> {dimension.quality} <%= if dimension.format do %> {dimension.format} <% else %> {gettext("Original")} <% end %> <%= if dimension.enabled do %> {gettext("Enabled")} <% else %> {gettext("Disabled")} <% end %>
<.link navigate={ PhoenixKit.Utils.Routes.path( "/admin/settings/media/dimensions/#{dimension.uuid}/edit" ) } class="btn btn-xs btn-outline btn-info tooltip tooltip-bottom" data-tip={gettext("Edit")} > <.icon name="hero-pencil" class="w-4 h-4 hidden sm:inline" /> {gettext("Edit")}
<% end %>
<%!-- Help Section --%>
<.icon name="hero-light-bulb" class="w-5 h-5" />

{gettext("Variant Generation System")}

{gettext("Quality Settings:")} {gettext("Images use 1-100 scale (compression quality)")}
{gettext("Video Settings:")} {gettext("Videos use CRF 0-51 scale (lower = higher quality)")}
{gettext("Format Override:")} {gettext("Leave empty to preserve original format, or specify jpg/png/webp/mp4")}