template.html

<header class="lead d-inline-block text-center row mx-auto mb-2">Results</header>
<ul class="result-list list-unstyled row mx-auto">
{% for hit in hits.hits %}
  <li class="card text-white bg-dark col-sm-12 px-0 mb-3"
    data-infohash="{{ hit._id }}"
    data-name="{{ hit._source.name }}"
    data-magnet="{{ hit._source.magnet }}">
    <header class="card-header">{{ hit._source.name }}</header>
    <div class="card-body">
      <form class="input-group input-group-sm mb-1" onsubmit="magnet(this, event)">
        <input class="form-control" readonly value="{{ hit._source.magnet }}" />
        <div class="input-group-append">
          <button class="btn btn-outline-light">Copy</button>
        </div>
      </form>
      <button class="btn btn-primary btn-block btn-sm" onclick="watch(this)">Watch Online</button>
      <div data-role="progress" class="progress w-100" hidden>
        <div class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div>
      </div>
      <ul data-role="video-list" class="list-unstyled"></ul>
    </div>
  </li>
{% else %}
  <li class="list-group-item d-inline-block text-center font-weight-bold">Not found!</li>
{% endfor %}
</ul>