script#axis-control-template(type="text/x-template")
  svg(xmlns="http://www.w3.org/2000/svg",
    xmlns:xlink="http://www.w3.org/1999/xlink",
    width="100%", viewBox="0 0 300 300")
    defs
      lineargradient#red
        stop(offset="0", stop-color="#d26969")
        stop(offset="1", stop-color="#ff7f7f")

      lineargradient#green
        stop(offset="0", stop-color="#69d269")
        stop(offset="1", stop-color="#7fff7f")

      lineargradient#blue
        stop(offset="0", stop-color="#6969d2")
        stop(offset="1", stop-color="#7f7fff")

      lineargradient#orange
        stop(offset="0", stop-color="#d29d69")
        stop(offset="1", stop-color="#ffbf7f")

      lineargradient#cyan
        stop(offset="0", stop-color="#69d2d2")
        stop(offset="1", stop-color="#7fffff")

      lineargradient#purple
        stop(offset="0", stop-color="#d269d2")
        stop(offset="1", stop-color="#ff7fff")


      each color in 'red green blue orange cyan purple'.split(' ')
        lineargradient(xlink:href="#" + color, id=color + "-1",
          gradientunits="userSpaceOnUse", gradienttransform="rotate(180 7 5)",
          x1="0", y1="0", x2="15", y2="10")

        lineargradient(xlink:href="#" + color, id=color + "-2",
          gradientunits="userSpaceOnUse", x1="10", y1="10", x2="40", y2="40")


      filter#shadow(x="-50%" y="-50%" width="200%" height="200%")
        feOffset(in="SourceAlpha", dx="3", dy="3")
        feComponentTransfer
          feFuncR(type="discrete", tableValues="0.05")
          feFuncG(type="discrete", tableValues="0.05")
          feFuncB(type="discrete", tableValues="0.05")
        feGaussianBlur(result="shadow", stdDeviation="5")
        feBlend(in="SourceGraphic", in2="shadow", mode="normal")

      path#pie-1(d="M107,0 83,0 0,83 0,107A107,107 0 0 0 107,0Z")
      path#pie-2(d="M83,0 59,0 0,59 0,83A83,83 0 0 0 83,0Z")
      path#pie-3(d="M59,0 35,0 0,35 0,59A59,59 0 0 0 59,0Z")
      path#pie-4(d="M35,0 0,0 0,35A35,35 0 0 0 35,0Z")

      path#arrow(d="M-16,9 0,9 0,17 17,0 0,-17 0,-9 -16,-9 -16,9Z")

      circle#centrebutton(cx="0",cy="0",r="15",fill="green")


    g(transform="scale(1.0, 1.0)")
      // 100% ring
      g.ring(fill="#9f9f9f", filter="url(#shadow)")
        use.button(xlink:href="#pie-1", v-if="enabled[0]",
          transform="translate(134 121) rotate(-45)",
          @mousedown="jog(0, 3, 1)", @mouseup="release(0)",
          @touchstart.prevent="jog(0, 3, 1)", @touchend.prevent="release(0)")

        use.button(xlink:href="#pie-1", v-if="enabled[0]",
          transform="translate(115 121) rotate(135)",
          @mousedown="jog(0, 3, -1)", @mouseup="release(0)",
          @touchstart.prevent="jog(0, 3, -1)", @touchend.prevent="release(0)")

        g.button(v-if="enabled[1]",
          @mousedown="jog(1, 3, 1)", @mouseup="release(1)",
          @touchstart.prevent="jog(1, 3, 1)", @touchend.prevent="release(1)")
          use.button(xlink:href="#pie-1",
            transform="translate(124 111) rotate(-135)")
          text(x="125", y="21", transform="rotate(22 125 125)") {{text(3)}}
          text(x="125", y="21", transform="rotate(-22 125 125)") {{text(3)}}
          use.button(xlink:href="#pie-1", fill="transparent",
            transform="translate(124 111) rotate(-135)")

        use.button(xlink:href="#pie-1", v-if="enabled[1]",
          transform="translate(124 130) rotate(45)",
          @mousedown="jog(1, 3, -1)", @mouseup="release(1)",
          @touchstart.prevent="jog(1, 3, -1)", @touchend.prevent="release(1)")

      // 50% ring
      g.ring(fill="#c5c5c5", filter="url(#shadow)")
        use.button(xlink:href="#pie-2", v-if="enabled[0]",
          transform="translate(134 121) rotate(-45)",
          @mousedown="jog(0, 2, 1)", @mouseup="release(0)",
          @touchstart.prevent="jog(0, 2, 1)", @touchend.prevent="release(0)")

        use.button(xlink:href="#pie-2", v-if="enabled[0]",
          transform="translate(115 121) rotate(135)",
          @mousedown="jog(0, 2, -1)", @mouseup="release(0)",
          @touchstart.prevent="jog(0, 2, -1)", @touchend.prevent="release(0)")

        g.button(v-if="enabled[1]",
          @mousedown="jog(1, 2, 1)", @mouseup="release(1)",
          @touchstart.prevent="jog(1, 2, 1)", @touchend.prevent="release(1)")
          use.button(xlink:href="#pie-2",
            transform="translate(124 111) rotate(-135)")
          text(x="125", y="48") {{text(2)}}
          use.button(xlink:href="#pie-2", fill="transparent",
            transform="translate(124 111) rotate(-135)")

        use.button(xlink:href="#pie-2", v-if="enabled[1]",
          transform="translate(124 130) rotate(45)",
          @mousedown="jog(1, 2, -1)", @mouseup="release(1)",
          @touchstart.prevent="jog(1, 2, -1)", @touchend.prevent="release(1)")


      // 25% ring
      g.ring(fill="#e2e2e2", filter="url(#shadow)")
        use.button(xlink:href="#pie-3", v-if="enabled[0]",
          transform="translate(134 121) rotate(-45)",
          @mousedown="jog(0, 1, 1)", @mouseup="release(0)",
          @touchstart.prevent="jog(0, 1, 1)", @touchend.prevent="release(0)")

        use.button(xlink:href="#pie-3", v-if="enabled[0]",
          transform="translate(115 121) rotate(135)",
          @mousedown="jog(0, 1, -1)", @mouseup="release(0)",
          @touchstart.prevent="jog(0, 1, -1)", @touchend.prevent="release(0)")

        g.button(v-if="enabled[1]",
          @mousedown="jog(1, 1, 1)", @mouseup="release(1)",
          @touchstart.prevent="jog(1, 1, 1)", @touchend.prevent="release(1)")
          use.button(xlink:href="#pie-3",
            transform="translate(124 111) rotate(-135)")
          text(x="125", y="69") {{text(1)}}
          use.button(xlink:href="#pie-3", fill="transparent",
            transform="translate(124 111) rotate(-135)")

        use.button(xlink:href="#pie-3", v-if="enabled[1]",
          transform="translate(124 130) rotate(45)",
          @mousedown="jog(1, 1, -1)", @mouseup="release(1)",
          @touchstart.prevent="jog(1, 1, -1)", @touchend.prevent="release(1)")


      // 10% ring
      g.ring(fill="#f7f7f7", filter="url(#shadow)")
        use.button(xlink:href="#pie-4", v-if="enabled[0]",
          transform="translate(134 121) rotate(-45)",
          @mousedown="jog(0, 0, 1)", @mouseup="release(0)",
          @touchstart.prevent="jog(0, 0, 1)", @touchend.prevent="release(0)")

        use.button(xlink:href="#pie-4", v-if="enabled[0]",
          transform="translate(115 121) rotate(135)",
          @mousedown="jog(0, 0, -1)", @mouseup="release(0)",
          @touchstart.prevent="jog(0, 0, -1)", @touchend.prevent="release(0)")

        g.button(v-if="enabled[1]",
          @mousedown="jog(1, 0, 1)", @mouseup="release(1)",
          @touchstart.prevent="jog(1, 0, 1)", @touchend.prevent="release(1)")
          use.button(xlink:href="#pie-4",
            transform="translate(124 111) rotate(-135)")
          text(x="125", y="91") {{text(0)}}
          use.button(xlink:href="#pie-4", fill="transparent",
            transform="translate(124 111) rotate(-135)")

        use.button(xlink:href="#pie-4", v-if="enabled[1]",
          transform="translate(124 130) rotate(45)",
          @mousedown="jog(1, 0, -1)", @mouseup="release(1)",
          @touchstart.prevent="jog(1, 0, -1)", @touchend.prevent="release(1)")


      // +A
      g.button.arrow(v-if="enabled[0]", transform="translate(230 120)",
        @mousedown="jog(0, 3, 1)", @mouseup="release(0)",
        @touchstart.prevent="jog(0, 3, 1)", @touchend.prevent="release(0)")
        use(xlink:href="#arrow", fill="url(#{{colors[0]}}-1)")
        text(x="-12", y="5", font-size="14", textLength="21") +{{axes[0]}}


      // -A
      g.button.arrow(v-if="enabled[0]", transform="translate(20 120)",
        @mousedown="jog(0, 3, -1)", @mouseup="release(0)",
        @touchstart.prevent="jog(0, 3, -1)", @touchend.prevent="release(0)")
        use(xlink:href="#arrow", fill="url(#{{colors[0]}}-1)",
          transform="rotate(180)")
        text(x="-8", y="5", font-size="14", textLength="16") -{{axes[0]}}


      // +B
      g.button.arrow(v-if="enabled[1]", transform="translate(125, 18)",
        @mousedown="jog(1, 3, 1)", @mouseup="release(1)",
        @touchstart.prevent="jog(1, 3, 1)", @touchend.prevent="release(1)")
        use(xlink:href="#arrow", fill="url(#{{colors[1]}}-1)",
          transform="rotate(-90)")
        text(x="-8", y="5", font-size="12", textLength="16") +{{axes[1]}}


      // -B
      g.button.arrow(v-if="enabled[1]", transform="translate(125, 225)",
        @mousedown="jog(1, 3, -1)", @mouseup="release(1)",
        @touchstart.prevent="jog(1, 3, -1)", @touchend.prevent="release(1)")
        use(xlink:href="#arrow", fill="url(#{{colors[1]}}-1)",
          transform="rotate(90)")
        text(x="-7", y="5", font-size="12", textLength="14") -{{axes[1]}}

      // Return to zero button
      g.button.cicle(@mouseup="back2zero(0,1)",transform="translate(124,121)")
        use(xlink:href="#centrebutton")
        text(x="-12",y="3",font-size="9") {{axes[0]}}0{{axes[1]}}0
