.breadcrumb= link_to "← Back to home page", root_path
%h1 Wittle ##{@puzzle.id}
.puzzle-description #{@puzzle.category.capitalize} - #{@puzzle.created_at.localtime.strftime("%B %-d, %Y")}
#puzzle-container{ style: "display: flex; justify-content: center; align-items: center" }
  %svg#puzzle{ style: "pointer-events: auto"}
#submission-form
- if @playable
  - unless @already_started
    #activation-button
      %button{ type: "button" } Reveal Puzzle
    #timer
      %label#minutes 00
      %label#colon :
      %label#seconds 00
- if @playable or @puzzle.latest?
  %details#trace-settings
    %summary Settings
    .things
      %label{ for: "sens" } Mouse Speed 2D
      %input#sens{ type: "range", min: "0.1", max: "1.3", step: "0.1" }
      %label{ for: "volume" } Volume
      %input#volume{ type: "range", min: "0", max: "0.24", step: "0.02" }
- unless @playable
  #scores
    #by-time
      %h2 Fastest Solves
      %table
        - @puzzle.scores.where("seconds_taken IS NOT NULL").order(seconds_taken: :asc, created_at: :asc).limit(100).each_with_index do |score, i|
          %tr
            %td #{(i + 1)}.
            %td= score.name
            %td.score-field= humanize_interval(score.seconds_taken)
    #by-when
      %h2 Completion Order
      %table
        - @puzzle.scores.order(created_at: :asc).limit(100).each_with_index do |score, i|
          %tr
            %td #{(i + 1)}.
            %td= score.name
            %td.score-field= score.created_at.getlocal().strftime("%-I:%M:%S%P")
= render partial: "handle_puzzle"