assets/iframe.html

<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@zendeskgarden/css-tables@4.0.19/dist/index.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@zendeskgarden/css-buttons@7.0.19/dist/index.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@zendeskgarden/css-bedrock@8.0.0/dist/index.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@zendeskgarden/css-menus@9.0.20/dist/index.min.css">
  <link href="main.css" rel="stylesheet">
  <link href="loaders.css" rel="stylesheet">
</head>
<body>

  <div class="content">
    <div>
      <input style="width: 100%" class="c-txt__input" placeholder="Search for issues to link" type="text" id="linked-ticket-search" />
    </div>
    <div style="text-align: center; padding-top: 10px;">
      <button class="c-btn c-btn--primary" type="button" onclick="getSearchResults()">
        Search
      </button>
    </div>
    <div id="candidate-ticket-loading-icon" class="loader" style="display: none;"></div>
    <div class="content" id="candidate-tickets"></div>
  </div>

  <div class="content" id="content"></div>

  <footer>
    <a href="https://github.com/alexdglover/linkets/issues" target="_blank">Report bugs</a>
    <img class="c-btn__icon get_help" style="float: right;" src="questionmark.png">
  </footer>

  <script id="candidate-ticket-template" type="text/x-handlebars-template">
    <table class="c-table">
      <thead>
        <tr class="c-table__row c-table__row--header">
          <th class="c-table__row__cell c-table__row__cell--min" style="text-align: left;">Ticket</th>
          <th class="c-table__row__cell c-table__row__cell--min" style="text-align: left;">Link?</th>
        </tr>
      </thead>
      {{#each ticket}}
      {{#everyOther @index 2 }}
      <tr class="c-table__row c-table__row--stripe">
      {{else}}
      <tr class="c-table__row">
      {{/everyOther}}
        <td class="c-table__row__cell"><a href="#" onclick="openTicket('{{id}}')">{{id}} - {{subject}}</a></td>
        <td class="c-table__row__cell">
          <div class="l-btn-group u-mb-lg">
            <button class="c-btn js-menu">
              Link
            </button>
            <div class="u-position-relative">
              <ul aria-hidden="true" class="c-menu c-menu--up" role="menu" style="right:136px; top:-32px; min-width: 120px;">
                <li class="c-menu__item" onclick="linkTicket('{{id}}', 'blcks')" role="menuitem">Blocks</li>
                <li class="c-menu__item" onclick="linkTicket('{{id}}', 'blckdby')" role="menuitem">Blocked By</li>
                <li class="c-menu__item" onclick="linkTicket('{{id}}', 'prnt')" role="menuitem">Parent</li>
                <li class="c-menu__item" onclick="linkTicket('{{id}}', 'chld')" role="menuitem">Child</li>
                <li class="c-menu__item" onclick="linkTicket('{{id}}', 'rlts')" role="menuitem">Relates To</li>
              </ul>
            </div>
          </div>
        </td>
      </tr>
      {{/each}}
    </table>
  </script>

  <script id="linked-ticket-template" type="text/x-handlebars-template">
    <table class="c-table">
      <thead>
        <tr class="c-table__row c-table__row--header">
          <th class="c-table__row__cell c-table__row__cell--min" style="text-align: left; width: 8px;">Type</th>
          <th class="c-table__row__cell c-table__row__cell--min" style="text-align: left;">Ticket</th>
          <th class="c-table__row__cell c-table__row__cell--min" style="text-align: left; width: 1px;">Un-Link</th>
        </tr>
      </thead>
      {{#each ticket}}
      {{#everyOther @index 2 }}
      <tr class="c-table__row c-table__row--stripe">
      {{else}}
      <tr class="c-table__row">
      {{/everyOther}}
        <td class="c-table__row__cell">{{relationship}}</td>
        <td class="c-table__row__cell"><a href="#" onclick="openTicket('{{id}}')">{{id}} - {{subject}}</a></td>
        <td class="c-table__row__cell" style="text-align: right;">
          <button class="c-btn c-btn--primary c-btn--danger c-btn--icon" onclick="unlinkTicket('{{id}}', '{{relationshipCode}}')">
            <p style="color:white;">X</p>
          </button>
        </td>
      </tr>
      {{/each}}
    </table>
  </script>

  <script id="error-template" type="text/x-handlebars-template">
    <p>Status - {{status}}</p>
    <p>{{statusText}} error.</p>
    <p>If you believe this is in error, please report a bug at the link below.</p>
  </script>

  <script id="no-ticket-template" type="text/x-handlebars-template">
    <p>There are no tickets linked to the current ticket</p>
    <p>If you believe this is in error, please report a bug at the link below.</p>
  </script>

  <script src="https://cdn.jsdelivr.net/handlebarsjs/4.0.8/handlebars.min.js"></script>
  <script>
    Handlebars.registerHelper("everyOther", function (index, amount, scope) {
        if ( ++index % amount)
            return scope.inverse(this);
        else
            return scope.fn(this);
    });
  </script>
  <script src="https://cdn.jsdelivr.net/jquery/3.2.1/jquery.min.js"></script>
  <script type="text/javascript" src="garden-svg4everybody.js"></script>
  <script type="text/javascript" src="garden-index.js"></script>
  <script type="text/javascript" src="https://static.zdassets.com/zendesk_app_framework_sdk/2.0/zaf_sdk.min.js"></script>
  <script type="text/javascript" src="main.js"></script>
</body>

</html>