<template>
  <!-- The following require is required as a workaround for last version of materializecss.   -->
  <require from="materialize/dist/css/materialize.css"></require>
  <div>
    <p>
      <md-checkbox md-checked.bind="checked">A default checkbox</md-checkbox> with value: ${checked | stringify}
    </p>
    <p>
      <md-checkbox md-checked="false" md-disabled="true">A disabled checkbox</md-checkbox>
    </p>
    <p>
      <md-checkbox md-checked.bind="indeterminateChecked">An indeterminate checkbox</md-checkbox> with value: ${indeterminateChecked | stringify}
    </p>
  </div>

  <!-- i18n support.   -->
  <br/>
  <div>
    <h4>i18n support</h4>
    <select md-select value.two-way="language" change.trigger="updateLanguage()">
      <option value="" disabled selected t="selectLanguage">S L</option>
      <option value="en_UK">English UK</option>
      <option value="en_US">English US</option>
    </select>
    <!-- The checkbox text should be wrapped into a span element and the translation applied to this wrapper element.   -->
    <md-checkbox md-checked="false"><span t="dialogs.aDefaultCheckbox">adc</span></md-checkbox>
    <!-- This example is not working because of the implementation of slot translation, probably an i18n bug.
         See https://github.com/aurelia-ui-toolkits/aurelia-materialize-bridge/issues/305
      -->
    <br/><md-checkbox md-checked="false" t="dialogs.aDefaultCheckbox">adc</md-checkbox>
  </div>
</template>