<polymer-element name="login-warning" attributes="missing loginLink">
  <template>
    <style>
      #message {
        color: #dd4b39;
        font-size: 20px;
      }
    </style>
    <div id="message" hidden?="{{!missing}}">
      No data available for {{missing}}. Note that some data is only visible
      when <a href="{{loginLink}}">signed in</a> with a google.com account.
    </div>
  </template>
  <script>
    'use strict';
    Polymer('login-warning', {
      missing: null,
      loginlink: null,

      get messageElement() {
        return this.$.message;
      }
    });
  </script>
</polymer-element>