<!--
Base element for form.

This element uses overlay-message element on the page with the ID
"message-bar".
-->
<polymer-element name="base-form">
  <script>
    'use strict';
    Polymer('base-form', {

      /**
       * String substitution using "{{" and "}}" for placeholders.
       *
       * @param {string} str String template.
       * @param {Object} data Dictionary with values to replace.
       * @return {string} The replaced string.
       */
      template: function(str, data) {
        for (var key in data) {
          var find = '{{' + key + '}}';
          str = str.replace(new RegExp(find, 'g'), data[key]);
        }
        return str;
      },

      showErrorMessage: function(label, message) {
        message = '<span style="color: #dd4b39; font-weight: bold;">' +
                  label + ': ' + message + '</span>';
        this.showMessage(message);
      },

      showMessage: function(message, templateDict) {
        if (templateDict) {
          message = this.template(message, templateDict);
        }
        var messageBar = document.getElementById('message-bar');
        messageBar.updateContent(message);
      },
    });
  </script>
</polymer-element>