<link rel="import" href="../../bower_components/polymer/polymer.html" />

<dom-module id="app-error-modal">

  <link type="css" rel="import" href="../../bower_components/bootstrap/dist/css/bootstrap.css" />

  <template>
    <style>
      :host {
        display: block;
      }
    </style>

    <div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="modal-label" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
              <span class="sr-only">Close</span>
            </button>
            <h4 class="modal-title" id="modal-label">{{title}}</h4>
          </div>
          <div class="modal-body">{{message}}</div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">OK</button>
          </div>
        </div>
      </div>
    </div>
  </template>

  <script>
    Polymer({
      is: 'app-error-modal',
      show: function(message) {
        if (message !== undefined) {
          this.message = message;
        }

        console.log('Oops!', this.message);

        $(this.$.modal).modal('show');
      },
      properties: {
        message: {
          type: String,
          reflectToAttribute: true,
        },
        title: {
          type: String,
          value: 'Something has gone wrong here.',
        }
      }
    });
  </script>

</dom-module>

Add an error modal component
Add an error modal component
