{% if from_popup %}
{% extends "main.html" %}

{% from 'bootstrap5/utils.html' import render_messages %}

{% block title %}{{ hhh }}{% endblock %}

{% block scripts %}
{{ super() }}
<script type="text/javascript" nonce="{{ csp_nonce() }}">
    const openNewTabButtons = document.querySelectorAll('.openNewTab');
    if (openNewTabButtons) {
        openNewTabButtons.forEach(el => el.addEventListener('click', event => {
            window.opener.openTreeInNewTab(el.dataset.capture, el.dataset.hostnode);
        }));
    }
</script>
{% endblock %}

{%endif%}

{% block content %}
{% if from_popup %}
<button class="btn btn-primary goBack" type="button">Go Back</button>
{%endif%}
  <center>
      <h2>{{ hhh }}</h2>
  </center>
  <div class="table-responsive">
      <table id="table" class="table">
          <thead>
              <tr>
                  <th scope="col">Name</th>
                  <th scope="col">Value sample</th>
              </tr>
          </thead>
          <tbody>
              {%for name, value in headers%}
              <tr>
                  <th scope="row">{{name}}</th>
                  <td>{{value}}</td>
              </tr>
              {%endfor%}
          </tbody>
      </table>
  </div>
  <p>The same HTTP Headers Hash was seen in these captures:</p>
  <ul>
  <div class="table-responsive">
      <table id="table" class="table">
          <thead>
              <tr>
                  <th>Capture Title</th>
                  <th>URL matching the HHH</th>
              </tr>
          </thead>
          <tbody>
            {% for capture_uuid, hostnode_uuid, url, title in captures %}
            <tr>
                <td>
                    {% if from_popup %}
                    <button type="button" class="btn btn-link openNewTab" data-capture="{{capture_uuid}}" data-hostnode="{{hostnode_uuid}}">{{ title }}</button>
                    {% else %}
                    <a href="{{ url_for('tree', tree_uuid=capture_uuid, node_uuid=hostnode_uuid) }}">{{ title }}</a>
                    {% endif %}
                </td>
                <td>{{url}}</td>
            </tr>
            {% endfor %}
          </tbody>
      </table>
  </div>
  </ul>
{% endblock %}