<!-- The <issue-sk> custom element declaration.

Shows the issues that are currently associated with a digest, a trace or a test.
Used across different views.

TODO(stephana): Fill in all details once we have determined the details on the
backend.

  Attributes:
    TBD

  Events:
    TBD

  Methods:
    TBD
-->
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="bower_components/paper-button/paper-button.html">
<link rel="import" href="bower_components/iron-icons/iron-icons.html">
<link rel="import" href="shared-styles.html">

<dom-module id="issue-sk">
  <template>
    <style include="shared-styles">
      .issueHeader {
        font-size: 18px;
        font-weight: bold;
        padding-bottom: .5em;
      }

      .issueId {
        width: 5em;
        padding: 0, 1em, 0, 1em;
      }

      .itemTitle {
        padding: 0, 0, 0, 1em;
      }

      .issueRow {
        font-size: 20pt;
        padding: 0 0 0 1em;
      }

      .buttonContainer {
        padding: 1em 0 0 1em;
      }

      .noIssuesContainer {
        padding: .3em 0 .3em 1.3em;
      }

    </style>
    <div class="vertical layout">
      <div class="issueHeader">Issues</div>
      <div class="noIssuesContainer" hidden$="{{_hasIssues(issues)}}">
        No issues.
      </div>
      <template is="dom-repeat" hidden$={{!_hasIssues(issues)}} items="{{issues}}">
        <div class="issueRow">
          <span class="issueId"><a href$="{{_issueTrackerLink(item.id)}}">{{item.id}}</a></span>
          <span class="issueTitle"><a href$="{{_issueTrackerLink(item.id)}}">{{item.title}}</a></span>
        </div>
      </template>

      <div class="buttonContainer horizontal layout">
        <a class="buttonLink" href$="{{_addIssueLink(test, digest)}}" target="_blank" rel="noopener">
          <paper-button title="Create a new issue in Monorail" noink raised><iron-icon icon="icons:add"></iron-icon>New Issue</paper-button>
        </a>
        <paper-button title="Search for existing issue" noink raised><iron-icon icon="icons:search"></iron-icon>Search Issues</paper-button>
      </div>
    </div>
  </template>

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

      // TODO(stephana): These properties are temporary and will change once the backend
      // is better defined.
      properties: {
        test: {
          type: String
        },
        digest: {
          type: String
        },
        issues: {
          type: Array,
          value: function() { return []; }
        }
      },

      _hasIssues(issues) {
        return issues && (issues.length > 0);
      },

      _issueTrackerLink: function(issueID) {
        return gold.issueURL(issueID);
      },

      // _addIssueLink returns the link that can be used to create a new issue
      // that connects this digests.
      _addIssueLink: function(test, digest) {
        var backlink = window.location.origin + "/detail?test=" + test + "&digest=" + digest;
        var msg = "This issue was reported through Skia Gold.\n\n"+
          "Visit this URL to see the details of the digest:\n\n"+
          "    " + backlink + "\n\n";
        var q = {
          labels:  "FromSkiaGold",
          comment: msg,
        }
        return "https://bugs.chromium.org/p/skia/issues/entry?" + sk.query.fromObject(q);
      }
    });
  </script>
</dom-module>