{% extends "main.html" %}

{% block title %}Tree{% endblock %}

{% block scripts %}
  {{ super() }}
  <script src='{{ url_for('static', filename='tree.js') }}'></script>
  <script>
    $('#screenshot_view_button').click(function(){
      $(this).text(function(i, old){
        return old=='View' ?  'Hide' : 'View';
      });
    });
  </script>
{% endblock %}

{% block content %}
{{super()}}
<script>
  var treeData = {{ tree_json | safe }};
</script>

<div id=lookyloo-icon></div>
<div id=screenshot class="collapse">
  <img src="{{ url_for('image', tree_uuid=tree_uuid) }}" class="img-fluid"/>
</div>

<div id="legend_container" class="container">
  <div id=legend class="collapse show">
    <div>
      <center>
      <div style="display: inline">
        <b>Legend</b>
      </div>
      <div style="display: inline;">
        <button type="button" class="btn btn-link" data-toggle="collapse" data-target="#legend">
            <img src="{{ url_for('static', filename='minimize2.jpg') }}" alt="Minimize legend" height="25" width="25">
        </button>
      </div>
      </center>
    </div>
    <hr/>
    <img src="{{ url_for('static', filename='javascript.png') }}"
         alt="JavaScript" height="20" width="20"> Javascript <br>

    <img src="{{ url_for('static', filename='cookie_received.png') }}"
         alt="Cookie received" height="20" width="20"> Cookie received<br>

    <img src="{{ url_for('static', filename='cookie_read.png') }}"
         alt="Cookie read" height="20" width="20"> Cookie read<br>

    <img src="{{ url_for('static', filename='redirect.png') }}"
         alt="Redirect" height="20" width="20"> Redirect<br>

    <img src="{{ url_for('static', filename='font.png') }}"
         alt="Font" height="20" width="20"> Font<br>

    <img src="{{ url_for('static', filename='html.png') }}"
         alt="HTML" height="20" width="20"> HTML<br>

    <img src="{{ url_for('static', filename='json.png') }}"
         alt="JSON" height="20" width="20"> JSON<br>

    <img src="{{ url_for('static', filename='css.png') }}"
         alt="CSS" height="20" width="20"> CSS<br>

    <img src="{{ url_for('static', filename='exe.png') }}"
        alt="EXE" height="20" width="20"> EXE<br>

    <img src="{{ url_for('static', filename='img.png') }}"
        alt="Image" height="20" width="20"> Image<br>

    <img src="{{ url_for('static', filename='video.png') }}"
        alt="Video" height="20" width="20"> Video<br>

    <img src="{{ url_for('static', filename='ifr.png') }}"
        alt="iFrame" height="20" width="20"> iFrame<br>

    <img src="{{ url_for('static', filename='wtf.png') }}"
        alt="Content type not set/unknown" height="20" width="20"> Content type not set/unknown<br>
  </div>
  <div style="width: 100px">
      <div style="display: inline;">
      <button type="button" class="btn btn-link" data-toggle="collapse" data-target="#legend">
        <img src="{{ url_for('static', filename='maximize2.jpg') }}" alt="Minimize legend" height="40" width="40">
      </button>
      </div>
      <div style="display: inline">
        <b>Legend</b>
      </div>
  </div>
</div>

<div id="tree-details_container" class="container">
  <div id=tree-details class="collapse show">
    <div>
      <center>
      <div style="display: inline">
        <b>Tree details</b>
      </div>
      <div style="display: inline;">
        <button type="button" class="btn btn-link" data-toggle="collapse" data-target="#tree-details">
            <img src="{{ url_for('static', filename='minimize1.jpg') }}"
                 alt="Minimize tree details" height="25" width="25">
        </button>
      </div>
      </center>
    </div>
    <hr/>
    <b>Root URL</b>: {{ root_url }}<br>
    <b>Start time</b>: {{ start_time }}<br>
    <b>User Agent</b>: {{ user_agent }}<br>
    {% if meta %}
      {%for k, v in meta.items()%}
        <b>{{k.title()}}</b>: {{ v }}<br>
      {%endfor%}
    {%endif%}
    <b>Screenshot</b>:
    <a href="{{ url_for('image', tree_uuid=tree_uuid) }}" class="btn btn-info" role="button">Download</a>
    <button id="screenshot_view_button" type="button" class="btn btn-info"
            data-toggle="collapse" data-target="#screenshot">View</button>
    <br>
  </div>
  <div style="width: 100px;float: right;">
    <div style="display: inline;">
    <button type="button" class="btn btn-link" data-toggle="collapse" data-target="#tree-details">
      <img src="{{ url_for('static', filename='maximize1.jpg') }}" alt="Minimize tree details" height="40" width="40">
    </button>
    </div>
    <div style="display: inline">
      <b>Tree details</b>
    </div>
  </div>
</div>

{% endblock content %}