<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="x-firepad.html">
<link rel="import" href="x-pretty-json.html">

<dom-module id="my-custom-element">
  <style is="custom-style">
    :host {
      display: inline-block;
    }
  </style>
  <template><span>{{greeting}}</span><span style="color:green">{{fullName}}</span></template>
</dom-module>

<dom-module id="firepad-demo">
    <style>
      :host {
        display: block;
      }
    </style>
  <template>

    <div class="layout vertical">
      <h3>Firepad Experiment</h3>

      <x-firepad>

      </x-firepad>

    </div>

  </template>
</dom-module>
  <script>
    (function () {
      Polymer({
        is: 'my-custom-element',
        properties: {
          fullName: {
            type: String
          }
        },
        ready: function() {
          this.greeting = 'hello: ';
          this.fullName= 'rob beers';
        }
      });

      Polymer({
        is: 'firepad-demo'
      });
    })();
  </script>
