<!-- The <commit-detail-sk> custom element declaration.

  An element to display information around a single commit.

  The element takes as data a serialized cid.CommitDetail.

  Attributes:
    cid - A serialized cid.CommitDetail.

  Events:
    None.

  Methods:
    None.
-->
<dom-module id="commit-detail-sk">
  <style>
    a,
    .linkish {
      text-decoration: underline;
      color: #1f78b4;
    }

    pre {
      font-family: 'Roboto Mono', monospace;
      margin: 0;
    }

    .tip {
      padding: 0.41em;
      border: solid #ddd 1px;
      margin: 0.6em;
      display: inline-block;
    }

    .hidden {
      display: none;
    }
  </style>
  <template>
    <div on-click=_click class=linkish><pre>[[cid.message]]</pre></div>
    <div class="tip hidden" id=tip>
      <a href="/g/e/[[cid.hash]]">Explore</a>
      <a href="/g/c/[[cid.hash]]">Cluster</a>
      <a href="/g/t/[[cid.hash]]">Triage</a>
      <a href="[[cid.url]]">Commit</a>
    </div>
  </template>
</dom-module>

<script>
  Polymer({
    is: "commit-detail-sk",

    properties: {
      cid: {
        type: Object,
        value: function() { return {}; },
      },
    },

    _click: function() {
      this.$.tip.classList.toggle("hidden");
    },

  });
</script>