const app = require('../app')

app.component('appTestPage', {
  template: html`
  <div flex layout="column">
    <h2>Material Buttons</h2>
    <p>
      <md-button class="md-primary">Hello World</md-button>
      <md-button class="md-accent">Hello World</md-button>
      <md-button class="md-warn">Hello World</md-button>
      <md-button class="">Hello World</md-button>
    </p>
    <hr />
    <h2>md-colors</h2>
    <div ng-repeat="palette in ::ctrl.palettes">
      <h3>{{::palette}}</h3>
      <div ng-repeat="hue in ::ctrl.hues">
        <pre md-colors="{ color: palette + '-' + hue }">md-colors="{ color: '{{palette + '-' + hue}}' }</pre>
      </div>
    </div>
  </div>
  `,
  controllerAs: 'ctrl',
  controller: function() {
    this.palettes = ['primary', 'accent', 'warn', 'background']
    this.hues = [100, 200, 300, 400, 500, 600, 700, 800, 900]
  }
})