- title "Wardrobe v2"

!!! 5
%html
  %head
    %meta{charset: 'utf-8'}
    %meta{name: 'viewport', content: 'width=device-width, initial-scale=1'}
    %title= yield :title
    %link{href: image_path('favicon.png'), rel: 'icon'}
    = stylesheet_link_tag "application/hanger-spinner"
    = stylesheet_link_tag "application/outfit-viewer"
    = page_stylesheet_link_tag "outfits/new_v2"
    = 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 "outfits/new_v2", async: true
    = csrf_meta_tags
    %meta{name: 'outfit-viewer-morph-mode', value: 'full-page'}
  %body.wardrobe-v2
    .wardrobe-container
      .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

        %species-color-picker
          = form_with url: wardrobe_v2_path, method: :get do |f|
            = outfit_state_params except: [:color, :species]
            = select_tag :color,
              options_from_collection_for_select(@colors, "id", "human_name",
                @selected_color&.id),
              "aria-label": "Pet color"
            = select_tag :species,
              options_from_collection_for_select(@species, "id", "human_name",
                @selected_species&.id),
              "aria-label": "Pet species"
            = submit_tag "Go", name: nil

      .outfit-controls-section
        %h1 Customize your pet

        = form_with url: wardrobe_v2_path, method: :get, class: "item-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"
        - elsif @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|
                    %li.item-card
                      .item-thumbnail
                        = image_tag item.thumbnail_url, alt: item.name, loading: "lazy"
                      .item-info
                        .item-name= item.name
                        .item-badges
                          = render "items/badges/kind", item: item
                          = render "items/badges/first_seen", item: item
                      = button_to wardrobe_v2_path, method: :get, class: "item-remove-button", title: "Remove #{item.name}", "aria-label": "Remove #{item.name}" do
                        ❌
                        = outfit_state_params @outfit.without_item(item)