<!-- The <instance-status-sk> custom element declaration.

  Polls the backend for how long the instance has been running, which it
  displays in a human friendly manner, and also presents a button to restart
  the instance.

  Attributes:
    None.

  Events:
    None.

  Methods:
    None.
-->
<link rel="stylesheet" href="/res/common/css/md.css" type="text/css" media="all">

<dom-module id="instance-status-sk">
  <style>
    form {
      display: inline-block;
      margin-left: 0.5em;
      margin-right: 1em;
    }

    a {
      color: white;
      text-decoration: none;
      border: solid white 1px;
      border-radius: 3px;
      padding: 0.6em 1.2em;
      margin: 0.6em;
      text-transform: uppercase;
    }

    a:hover {
      opacity: 0.5;
    }
  </style>
  <template>
    <content>
      Your instance has been running <span id=duration></span>.
      <form id=form action="./instanceStatus" method="post" accept-charset="utf-8">
        <button type="submit">Restart Instance</button>
        <a href="/instanceNew" title="Start a new instance.">New</a>
      </form>
    </content>
  </template>
</dom-module>

<script>
  Polymer({
    is: "instance-status-sk",

    ready: function() {
      this.async(this._updateDuration.bind(this), 1000);
      window.setInterval(function() {
        this._updateDuration();
      }.bind(this), 60*1000);
      this.$.form.action = this._correctedOrigin() + "instanceStatus";
    },

    _updateDuration: function() {
      if (!this.classList.contains("hidden")) {
        sk.get(this._correctedOrigin() + "instanceStatus").then(JSON.parse).then(function(json){
          this.$.duration.innerText = sk.human.diffDate(json.started*1000);
        }.bind(this));
      }
    },

    _correctedOrigin: function() {
      // TODO(jcgregorio) Extract from here and app.html into a common code file.
      // Since we always use relative URLs, i.e. "./foo" we need to make
      // sure the base URL ends with a "/".
      var origin = window.location.href;
      if (origin[origin.length-1] != "/") {
        origin += "/";
      }
      return origin;
    },

  });
</script>