canvas#tinting-display(width=200, height=200).img-rounded

#color-settings
  for group in colorGroups
    .color-group(data-name=group.name)
      div.name-cell
        input(type='checkbox', checked=group.exists).color-group-checkbox
        span(data-i18n=group.dasherized)= group.humanized
      div.sliders
        div.slider-cell
          label(for=group.humanized+"_hue", data-i18n="hue") Hue
          .controls
            .selector(id=group.humanized+"_hue", name=group.name+'.hue', data-key='hue')
        div.slider-cell
          label(for=group.humanized+"_saturation", data-i18n="saturation") Saturation
          .controls
            .selector(id=group.humanized+"_saturation", name=group.name+'.saturation', data-key='saturation')
        div.slider-cell
          label(for=group.humanized+"_lightness", data-i18n="lightness") Lightness
          .controls
            .selector(id=group.humanized+"_lightness", name=group.name+'.lightness', data-key='lightness')
      div.clearfix