- 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"
    = csrf_meta_tags
    = javascript_include_tag "application", async: true
    = javascript_include_tag "idiomorph", async: true
    = javascript_include_tag "outfit-viewer", async: true
    = javascript_include_tag "outfits/new_v2", async: true
  %body.wardrobe-v2
    = turbo_frame_tag "outfit-editor" do
      .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

        .outfit-controls-section
          %h1 Customize your pet

          .species-color-picker
            = form_with url: wardrobe_v2_path, method: :get do |f|
              .form-group
                = label_tag :species, "Species:"
                = select_tag :species,
                  options_from_collection_for_select(@species, "id", "human_name",
                    @selected_species&.id),
                  onchange: "this.form.requestSubmit()"

              .form-group
                = label_tag :color, "Color:"
                = select_tag :color,
                  options_from_collection_for_select(@colors, "id", "human_name",
                    @selected_color&.id),
                  onchange: "this.form.requestSubmit()"

              -# Preserve item IDs in the URL
              - if params[:objects].present?
                - params[:objects].each do |item_id|
                  = hidden_field_tag "objects[]", item_id

          - if @outfit.pet_state
            .current-selection
              %p
                Currently showing:
                %strong= "#{@selected_color.human_name} #{@selected_species.human_name}"

          - if @outfit.worn_items.any?
            .worn-items
              %h2 Items (#{@outfit.worn_items.size})
              %ul
                - @outfit.worn_items.each do |item|
                  %li= item.name