Cacher is the code snippet organizer for pro developers

switch
  off*
    turn_on -> on
  on
    turn_off -> off

function render(model){
  let current_state_name = model.active_states[0].name;

  let container_attrs = {
     position: 'relative',
     margin: '32px',
     width: '60px',
     height: '32px',
     borderRadius: '16px',
  }
  
  let knob_attrs = {
    position: 'absolute',
    height: '28px',
    width: '28px',
    padding: '2px',
    borderRadius: '50%',
    transition: 'left 250ms ease-in',
    '-webkit-box-shadow': '2px 2px 4px 0px rgba(200,200,200,1)',
    '-moz-box-shadow': '2px 2px 4px 0px rgba(200,200,200,1)',
    'box-shadow': '2px 2px 4px 0px rgba(200,200,200,1)'
  }
  
  function handleClick() {
    switch (model.active_states[0].name) {
      case "off":
        model.emit('turn_on')
        break;
      case "on":
        model.emit('turn_off')
        break;
    }
  }
  
  switch (current_state_name) {
    case "off":
      knob_attrs.background = '#AAA'
      knob_attrs.left = 2
      container_attrs.background = "#efefef"
      break;
    case "on":
      knob_attrs.background = '#3C3'
      knob_attrs.left = 26
      container_attrs.background = "#AFA"
      break;
    default:
      null
  }
  
  return(
    $("div",
      {
        style: container_attrs,
        onClick: handleClick
      },
      $("div",
        {
          style: knob_attrs,
        }
        )
     )
)}