How to get different modes in sightly HTML

<sly data-sly-use.wcmModes="/libs/wcm/foundation/components/page/initwcm.js"></sly>

Classic Edit Mode :

 <div data-sly-test="${wcmModes.wcmmode.edit}"> Classic Edit Mode </div>

Touch Edit Mode : 

 <div data-sly-test="${wcmModes.isTouchAuthoring}"> Touch Edit Mode </div>

Design Mode :

 <div data-sly-test="${wcmModes.wcmmode.design}"> Design Mode  </div>

Disabled mode:

 <div data-sly-test="${wcmModes.wcmmode.disabled}"> Disabled mode </div>