- title @outfit.name

!!! 5
%html
  %head
    %meta{charset: 'utf-8'}
    %meta{name: 'viewport', content: 'width=device-width, initial-scale=1'}
    %title #{yield :title} | #{t "app_name"}
    %link{href: image_path('favicon.png'), rel: 'icon'}
    = stylesheet_link_tag "application/hanger-spinner"
    = stylesheet_link_tag "application/outfit-viewer"
    = page_stylesheet_link_tag "wardrobe/show"
    = javascript_include_tag "application", async: true
    = javascript_include_tag "idiomorph", async: true
    = javascript_include_tag "outfit-viewer", async: true
    = javascript_include_tag "species-color-picker", async: true
    = javascript_include_tag "pose-picker", async: true
    = javascript_include_tag "tab-panel", async: true
    = javascript_include_tag "outfit-rename-field", async: true
    = javascript_include_tag "wardrobe/show", async: true
    = csrf_meta_tags
    %meta{name: 'outfit-viewer-morph-mode', value: 'full-page'}
  %body.wardrobe-v2
    - if flash[:alert]
      .flash-messages
        .flash-alert= flash[:alert]
    .wardrobe-container{data: @saved_outfit ? {"has-unsaved-changes": @has_unsaved_changes.to_s} : {}}
      .outfit-preview-section
        - if @pet_type.nil?
          .no-preview-message
            %p
              We haven't seen this kind of pet before! Try a different species/color
              combination.
        - else
          = outfit_viewer @outfit, id: "wardrobe-outfit-viewer",
            preferred_image_format: :svg # TODO: Make this a selectable option

        .preview-controls
          .preview-controls-top
            %outfit-viewer-play-pause-toggle{for: "wardrobe-outfit-viewer"}
              %label.play-pause-control-button.button
                %input{type: "checkbox", checked: cookies[:DTIOutfitViewerIsPlaying] != "false"}
                %span.paused-label Paused
                %span.playing-label Playing

          .preview-controls-bottom
            = render "species_color_picker"

            - if @pet_type
              = render "pose_picker"

      .outfit-controls-section
        .item-search-form
          - if @search_mode
            = button_to @wardrobe_path, method: :get, class: "back-button" do
              ←
              = outfit_state_params except: [:q]
          = form_with url: @wardrobe_path, method: :get, class: "search-form" do |f|
            = outfit_state_params
            = f.text_field "q[name]", placeholder: "Search for items...", value: params.dig(:q, :name), "aria-label": "Search for items"
            = f.submit "Search"

        - if @search_mode
          = render "search_results"
        - else
          .outfit-header
            - if @saved_outfit && !@is_owner
              .outfit-name-static= @outfit.name
            - else
              = render "outfit_rename_field"
            = render "save_button"
          - if @outfit.worn_items.any?
            .worn-items
              - outfit_items_by_zone(@outfit).each do |zone_group|
                .zone-group
                  %h3.zone-label= zone_group[:zone_label]
                  %ul.items-list
                    - zone_group[:items].each do |item|
                      = render "item_card", item: item