link(href='http://fonts.lug.ustc.edu.cn/css?family=Lato:300,400'
rel='stylesheet'
type='text/css')

mixin cubePart(x, y, z)
  div(class="cube-part-wrapper cube-part-wrapper-#{x}#{y}#{z}"
      data-x="#{x}"
      data-y="#{y}"
      data-z="#{z}")
    .axis.axis-part
      ul.cube-part
        li(class=z>1?"side top white" : "side top")
          .sticker
        li(class=z<1?"side bottom yellow" : "side bottom")
          .sticker
        li(class=y>1?"side right orange" : "side right")
          .sticker
        li(class=y<1?"side left red" : "side left")
          .sticker
        li(class=x>1?"side back green" : "side back")
          .sticker
        li(class=x<1?"side front blue" : "side front")
          .sticker

// --- @start control section
.controls
  // --- @start button-wrapper
  .button-wrapper

    div
      - each theme in ["flat", "realistic"]
        button(type="button"
               class=theme==="flat"?"themer selected" : "themer"
               data-theme="#{theme}") #{theme}  
      button(type="button"
           class="scrambler") Scramble
h1 RubiCCS cube
h3 drag anywhere to rotate
h3 drag cube to play
// --- @start canvas
.canvas.theme-flat
  .cube-wrapper
    .cube
      .swiper.top(data-x="y"
                  data-y="x"
                  data-control="top")
      .swiper.bottom(data-x="y"
                  data-y="x"
                  data-control="bottom")
      .swiper.left(data-x="y"
                  data-y="z"
                  data-control="left")
      .swiper.right(data-x="y"
                  data-y="z"
                  data-control="right")
      .swiper.front(data-x="z"
                  data-y="x"
                  data-control="front")
      .swiper.back(data-x="z"
                  data-y="x"
                  data-control="back")
      // --- @start grip
      .grip
        .axis.axis-grip
      // --- @start parts
      - for (var x = 0; x < 3; x++)
        - for (var y = 0; y < 3; y++)
          - for (var z = 0; z < 3; z++)
            +cubePart(x, y, z)