{% extends "main.html" %}

{% block title %}Details for {{ hostname }} {% endblock %}

{% block scripts %}
  {{ super() }}
  <script>
      function whereAmI() {
          window.opener.ProcessChildMessage("{{ hostname_uuid }}");
      };
  </script>
  <script>
    // Source: https://codepen.io/nathanlong/pen/ZpAmjv
    function copyToClipboard(text, el) {
      var elOriginalText = el.attr('data-original-title');

      var copyTextArea = document.createElement("textarea");
      copyTextArea.value = text;
      document.body.appendChild(copyTextArea);
      copyTextArea.select();

      var successful = document.execCommand('copy');
      var msg = successful ? 'Copied!' : 'Whoops, not copied!';
      el.attr('data-original-title', msg).tooltip('show');

      document.body.removeChild(copyTextArea);
      el.attr('data-original-title', elOriginalText);
    }

    $(document).ready(function() {
      // Copy to clipboard
      // Grab any text in the attribute 'data-copy' and pass it to the copy function
        $('.js-copy').tooltip();
      $('.js-copy').click(function() {
        var text = $(this).attr('data-copy');
        var el = $(this);
        copyToClipboard(text, el);
      });
    });
  </script>

{% endblock %}

{% block content %}
  <center>
    <h3>{{ hostname }}</h3>
    <button type="button" class="btn btn-info" onclick="whereAmI()">Locate node on tree</button>
    <a href="{{ url_for('hostnode_details_text', tree_uuid=tree_uuid, node_uuid=hostname_uuid) }}" class="btn btn-info" role="button">Get URLs as text</a>
  </center>
  <p>Click on the URL to get the content of the response</p>
  <ul class="list-group-flush">
    {% for secure, path, url in urls %}
    <li class="list-group-item">
      <div class="h3">
        <button type="button" class="btn btn-default btn-copy js-copy"
                data-toggle="tooltip" data-placement="bottom" data-copy="{{url.name}}" title="Copy to clipboard">
          <svg class="bi bi-clipboard" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/>
            <path fill-rule="evenodd" d="M9.5 1h-3a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/>
          </svg>
        </button>
        {% if secure %}
        <svg class="bi bi-lock" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M11.5 8h-7a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1V9a1 1 0 0 0-1-1zm-7-1a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-7zm0-3a3.5 3.5 0 1 1 7 0v3h-1V4a2.5 2.5 0 0 0-5 0v3h-1V4z"/>
        </svg>
        {% else %}
        <svg class="bi bi-unlock" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M9.655 8H2.333c-.264 0-.398.068-.471.121a.73.73 0 0 0-.224.296 1.626 1.626 0 0 0-.138.59V14c0 .342.076.531.14.635.064.106.151.18.256.237a1.122 1.122 0 0 0 .436.127l.013.001h7.322c.264 0 .398-.068.471-.121a.73.73 0 0 0 .224-.296 1.627 1.627 0 0 0 .138-.59V9c0-.342-.076-.531-.14-.635a.658.658 0 0 0-.255-.237A1.122 1.122 0 0 0 9.655 8zm.012-1H2.333C.5 7 .5 9 .5 9v5c0 2 1.833 2 1.833 2h7.334c1.833 0 1.833-2 1.833-2V9c0-2-1.833-2-1.833-2zM8.5 4a3.5 3.5 0 1 1 7 0v3h-1V4a2.5 2.5 0 0 0-5 0v3h-1V4z"/>
        </svg>
        {%endif%}
        ... /{{ path }}
      </div>
      <ul class="list-group">
        <li class="list-group-item">
          <p class="h4">Response</p>

          <div>
          {% for key, path in keys_response.items() %}
            {% if url[key] %}
              {% if key == "response_cookie" %}
              <a href="{{ url_for('urlnode_response_cookies', tree_uuid=tree_uuid, node_uuid=url.uuid) }}">
               <img src="{{ path }}" alt="{{ key }}" width="21" height="21"/>
              </a>
              {% else %}
              <img src="{{ path }}" alt="{{ key }}" width="21" height="21"/>
              {%endif%}
            {%endif%}
          {% endfor %}
          </div>

          <div>
          {% if not url.empty_response %}
            <a href="{{ url_for('urlnode_details', tree_uuid=tree_uuid, node_uuid=url.uuid) }}">
              Download response body.
            </a></br>
            Body size: {{ sizeof_fmt(url.body.getbuffer().nbytes) }}
          {% else %}
            Empty body.
          {%endif%}
          </div>

          <div>
            Status Code: {{ url.response['status'] }}
          </div>


          {% if url.sane_js_details_to_print %}
          <div>
            {% if url.sane_js_details_to_print is string %}
              {{ url.sane_js_details_to_print }}
            {% else %}
              This file is known as part of <b>{{ url.sane_js_details_to_print[0] }}</b>
              version <b>{{ url.sane_js_details_to_print[1] }}</b>: <b>{{ url.sane_js_details_to_print[2] }}</b>.
              {% if url.sane_js_details_to_print[3] > 1%}
              It is also present in <b>{{ url.sane_js_details_to_print[3] -1 }}</b> other libraries.
              {%endif%}
            {%endif%}
          </div>
          {% endif %}

          {% if url.set_third_party_cookies %}
          <div>This response contains 3rd party cookies.</div>
          {% endif %}

        </li>

        <li class="list-group-item">
          <p class="h4">Request</p>
          <div>
          {% for key, path in keys_request.items() %}
            {% if url[key] %}
              {% if key == "request_cookie" %}
              <a href="{{ url_for('urlnode_request_cookies', tree_uuid=tree_uuid, node_uuid=url.uuid) }}">
               <img src="{{ path }}" alt="{{ key }}" width="21" height="21"/>
              </a>
              {% else %}
              <img src="{{ path }}" alt="{{ key }}" width="21" height="21"/>
              {%endif%}
            {%endif%}
          {% endfor %}
          </div>
          {% if url.posted_data %}
          <a href="{{ url_for('urlnode_post_request', tree_uuid=tree_uuid, node_uuid=url.uuid) }}">
              Download posted data
          </a></br>
          Posted data size: {{ sizeof_fmt(url.posted_data|length) }}
          {% endif %}
        </li>
      </ul>
    </li>
    {% endfor %}
  </ul>
{% endblock %}