<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>Warframe Market Gaps</title>

  <!-- Yandex.Metrika counter -->
  <script type="text/javascript" >
    (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
    m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
    (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");

    ym(87671663, "init", {
          clickmap:true,
          trackLinks:true,
          accurateTrackBounce:true
    });
  </script>
  <noscript><div><img src="https://mc.yandex.ru/watch/87671663" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
  <!-- /Yandex.Metrika counter -->
</head>
<body>
  <div class="hero">
    <img id="gunner1" src="./assets/gunner1.png">
    <div class="main">
      <img class="logo" src="./assets/warframe_logo.png">
      <div class="text">
        <h1>Market Gaps</h1>
        <p>Find a profitable difference between the price of the set and the price of the sum of it's parts.</p>
      </div>
    </div>
    <img id="gunner2" src="./assets/gunner2.png">
  </div>

  <div class="main-column">
    <div class="controls">
      <label for="min-difference">Filter by difference:</label>
      <input type="range" min="1" max="60" value="1" id="min-difference">
      <span id="filter-value">1</span>
    </div>

    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Parts price</th>
          <th>Set price</th>
          <th>Difference</th>
        </tr>
      </thead>
      <tbody id="items">
      {{#each items}}
        <tr data-difference="{{this.difference}}">
          <td class="name">
            <a href="{{this.link}}" target="_blank">
              {{this.name}}
            </a>
          </td>
          <td>{{this.parts}}</td>
          <td>{{this.set}}</td>
          <td>{{this.difference}}</td>
        </tr>
      {{/each}}
      </tbody>
    </table>
  </div>

  <div class="timestamp">
    Generated at {{timestamp}}
  </div>

  <script src="index.js"></script>
</body>
</html>
