- 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 "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 "wardrobe/show", 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

        .preview-controls
          %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

          - if @pet_type
            - pose_info = pose_emoji_and_label(@selected_pose)
            %button#pose-picker-button.pose-picker-button{type: "button", popovertarget: "pose-picker-popover"}
              %span.pose-emoji= pose_info[:emoji]
              %span.pose-label= pose_info[:label]
              %span.chevron ▾

            %pose-picker-popover#pose-picker-popover{popover: "auto"}
              = form_with url: wardrobe_v2_path, method: :get, class: "pose-picker-form" do |f|
                = outfit_state_params except: [:pose]
                %table.pose-picker-table
                  %thead
                    %tr
                      %th
                      %th
                        %span.emoji-icon{title: "Happy"} 😀
                      %th
                        %span.emoji-icon{title: "Sad"} 😢
                      %th
                        %span.emoji-icon{title: "Sick"} 🤢
                  %tbody
                    %tr
                      %th
                        %span.emoji-icon{title: "Masculine"} 💁‍♂️
                      %td
                        = render "pose_option", pose: "HAPPY_MASC", pet_state: @available_poses["HAPPY_MASC"], selected: @selected_pose == "HAPPY_MASC"
                      %td
                        = render "pose_option", pose: "SAD_MASC", pet_state: @available_poses["SAD_MASC"], selected: @selected_pose == "SAD_MASC"
                      %td
                        = render "pose_option", pose: "SICK_MASC", pet_state: @available_poses["SICK_MASC"], selected: @selected_pose == "SICK_MASC"
                    %tr
                      %th
                        %span.emoji-icon{title: "Feminine"} 💁‍♀️
                      %td
                        = render "pose_option", pose: "HAPPY_FEM", pet_state: @available_poses["HAPPY_FEM"], selected: @selected_pose == "HAPPY_FEM"
                      %td
                        = render "pose_option", pose: "SAD_FEM", pet_state: @available_poses["SAD_FEM"], selected: @selected_pose == "SAD_FEM"
                      %td
                        = render "pose_option", pose: "SICK_FEM", pet_state: @available_poses["SICK_FEM"], selected: @selected_pose == "SICK_FEM"
                = submit_tag "Change pose", name: nil, class: "pose-submit-button"

      .outfit-controls-section
        .item-search-form
          - if @search_mode
            = button_to wardrobe_v2_path, method: :get, class: "back-button" do
              ←
              = outfit_state_params except: [:q]
          = form_with url: wardrobe_v2_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
          %h1 Untitled outfit
          - 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|
                      %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)