{% extends "main.html" %}

{% from 'bootstrap5/utils.html' import render_icon %}
{% from 'bootstrap5/utils.html' import render_messages %}
{% from "macros.html" import shorten_string %}

{% block title %}Capture of {{info.url}}{% endblock %}

{% block card %}
<meta property="og:title" content="Lookyloo capture" />
<meta property="og:type" content="website"/>
<meta
  property="og:description"
  content="URL captured: {{info.url}}"
/>
<meta
  property="og:image"
  content="https://{{public_domain}}{{ url_for('thumbnail', tree_uuid=tree_uuid, width=1200) }}"
/>
<meta property="og:image:width" content="1200"/>
<meta property="og:image:height" content="630"/>
<meta
  property="og:url"
  content="https://{{public_domain}}{{ url_for('tree', tree_uuid=tree_uuid) }}"
/>
<meta name="twitter:card" content="summary_large_image">
{% endblock %}

{% block scripts %}
  {{ super() }}
  <script src='{{ url_for('static', filename='d3.min.js') }}'
          {{get_sri('static', 'd3.min.js')}}
          nonce="{{ csp_nonce() }}"
          crossorigin="anonymous"></script>
  <script src='{{ url_for('static', filename='tree.js') }}'
          {{get_sri('static', 'tree.js')}}
          nonce="{{ csp_nonce() }}"
          crossorigin="anonymous"></script>
  <script src='{{ url_for('static', filename='tree_modals.js') }}'
          {{get_sri('static', 'tree_modals.js')}}
          nonce="{{ csp_nonce() }}"
          crossorigin="anonymous"></script>

  <script nonce="{{ csp_nonce() }}">
    $('.modulesForceRefresh').on('click',function(){
      $('#modulesModal .modal-body').text("Reloading modules, please wait...")
      $('#modulesModal .modal-body').load("{{ url_for('trigger_modules', tree_uuid=tree_uuid, force=True) }}", function(){
        $('#modulesModal').modal({show:true});
      });
    });
  </script>

  <script nonce="{{ csp_nonce() }}">
    $('#fast-categories').submit(function(event){
    event.preventDefault();
      var query = $('#fast-categories').serialize(); // Serialize form data

      $.ajax({
          type: 'POST',
          url: '{{ url_for('categories_capture', tree_uuid=tree_uuid) }}',
          data: query,
          success: function(response) {
           $('#categoriesModal .modal-body').html(response);
              $('#categoriesModal').modal({show:true});
          },
          error: function(error) {
              console.log("An error occurred: ", error);
          }
      });
    });
  </script>

  <script nonce="{{ csp_nonce() }}">
  {% if urlnode_uuid %}
  history.scrollRestoration = "manual";
  window.addEventListener('DOMContentLoaded', (event) => {
    LocateNode('{{urlnode_uuid}}');
  });
  {% else %}
  window.addEventListener('DOMContentLoaded', (event) => {
      let thumbnail = document.getElementById('screenshot_thumbnail');
      thumbnail.scrollIntoView({behavior: "smooth", block: "end", inline: "center"});
  });
  {% endif%}
  </script>

  {% if auto_trigger_modules %}
  <script nonce="{{ csp_nonce() }}">
    $.get("{{ url_for('trigger_modules', tree_uuid=tree_uuid, auto_trigger=True) }}")
  </script>
  {% endif%}
  {% if enable_monitoring %}
  <script nonce="{{ csp_nonce() }}">
    const today = new Date()
    let tomorrow =  new Date()
    tomorrow.setDate(today.getDate() + 1)
    document.getElementById('expire_at').min = tomorrow.toISOString().split('T')[0];
    document.getElementById('expire_at').value = tomorrow.toISOString().split('T')[0];
  </script>
  {% endif%}

{% endblock %}


{% block styles %}
  {{ super() }}
  <link rel="stylesheet"
        {{get_sri('static', 'tree.css')}}
        href="{{ url_for('static', filename='tree.css') }}">
{% endblock %}


{% block content %}
{{super()}}

<script nonce="{{ csp_nonce() }}">
  var treeUUID = "{{ tree_uuid }}";
  var screenshot_thumbnail = "{{ screenshot_thumbnail }}";
  var favicon = "{{ favicon }}";
  var mime_favicon = "{{ mime_favicon }}";
  var enable_bookmark = {{ enable_bookmark|tojson }};
  var treeData = {{ tree_json | safe }};
  var parent_uuid = {{ parent_uuid|tojson }};
  var capture_starttime = new Date(Date.parse("{{ info.timestamp.isoformat() }}"));
  window.addEventListener('DOMContentLoaded', (event) => {
      document.getElementById("start_time").innerHTML = capture_starttime.toString();
  });
</script>

{{ render_messages(container=True, dismissible=True) }}

<!-- Containers -->

<div id="menu_container_vertical" class="tree-panel-container">
  <div id=menu_vertical>
    <div class="menu_vertical_header">
      <a href="{{ url_for('index') }}" title="Back to captures">
        <img src="{{ url_for('static', filename='lookyloo.jpeg') }}" alt="Lookyloo icon"
             height="110">
      </a>
    </div>
    <hr/>
    <div class="mx-auto" style="width: 52px;">
      <button type="button" class="btn btn-link" data-bs-toggle="collapse" data-bs-target="#menu_vertical_content">
          <span class="if-collapsed">
            <img src="{{ url_for('static', filename='up.jpg') }}" class="arrow-down" alt="Maximize menu" height="25" width="25" title="Expand">
          </span>
          <span class="if-not-collapsed">
            <img src="{{ url_for('static', filename='up.jpg') }}" alt="Minimize menu" height="25" width="25" title="Collapse">
          </span>
      </button>
    </div>

    <div id=menu_vertical_content class="collapse show">
      <hr/>
        <ul class="list-group list-group-flush">
          <li class="list-group-item">
            <a href="{{ url_for('capture_web') }}" role="button">New capture</a>
          </li>
          {% if enable_monitoring %}
          <li class="list-group-item">
            <a href="#monitoringModal" data-bs-toggle="modal" data-bs-target="#monitoringModal" role="button" class="btn btn-outline-info">Monitor capture</a>
          </li>
          {% endif %}
          {% if enable_mail_notification %}
          <li class="list-group-item">
            <a href="#emailModal" data-bs-toggle="modal" data-bs-target="#emailModal" role="button" class="btn btn-outline-danger">Report suspicious</br>capture</a>
          </li>
          {% endif %}
        </ul>
      </div>
    </div>
  </div>
</div>


<div id="menu_container_horizontal" class="tree-panel-container">
  <div id=menu_horizontal class="d-flex">
    <div class="flex-shrink-1 align-self-center">
      <button type="button" class="btn btn-link mr-3" data-bs-toggle="collapse" data-bs-target="#menu_horizontal_content">
        <span class="if-collapsed">
          <img src="{{ url_for('static', filename='up.jpg') }}" class="arrow-right" alt="Maximize menu" height="25" width="25" title="Expand">
        </span>
        <span class="if-not-collapsed">
          <img src="{{ url_for('static', filename='up.jpg') }}" class="arrow-left" alt="Minimize menu" height="25" width="25" title="Collapse">
        </span>
      </button>
    </div>
    <div id="menu_horizontal_content" class="collapse show flex-grow-1 ms-3 container">
        <div class="hstack gap-3">
          <div class="vr"></div>

          <div id="capture-menu" class="dropdown">
              <button class="dropbtn">Capture</button>
              <div id="capture-menu-content" class="dropdown-content">
                <a href="#detailsModal" data-bs-toggle="modal" data-bs-target="#detailsModal"
                    role="button" title="Details about the capture configuration">Capture Details</a>

                <a href="#statsModal" data-remote="{{ url_for('stats', tree_uuid=tree_uuid) }}" data-bs-toggle="modal"
                    data-bs-target="#statsModal" role="button" title="The capture in numbers">Statistics</a>

                <a href="#screenshotModal" data-bs-toggle="modal" data-bs-target="#screenshotModal"
                    role="button" title="Contains the URL rendered in the browser">Page Screenshot</a>
              </div>
          </div>

          <div id="tools-menu" class="dropdown">
            <button class="dropbtn">Analytical Tools</button>
            <div id="tools-menu-content" class="dropdown-content">
              {% if not capture_indexed %}
                <a href="{{ url_for('trigger_indexing', tree_uuid=tree_uuid) }}" role="button" class="btn btn-warning"
                   title="The capture isn't (fully) indexed, index now.">Index capture</a>
              {% endif %}
              <a href="#modulesModal" data-remote="{{ url_for('trigger_modules', tree_uuid=tree_uuid, force=False) }}"
                  data-bs-toggle="modal" data-bs-target="#modulesModal" role="button"
                  title="Lookups from supported 3rd party services">Third Party Reports</a>

              <a href="#historyModal" data-remote="{{ url_for('historical_lookups', tree_uuid=tree_uuid, force=False) }}"
                  data-bs-toggle="modal" data-bs-target="#historyModal" role="button"
                  title="Historical data and context about this capture ">Historical lookups</a>

              <a href="#hashlookupModal" data-remote="{{ url_for('hashlookup', tree_uuid=tree_uuid) }}"
                  data-bs-toggle="modal" data-bs-target="#hashlookupModal" role="button"
                  title="Hits in Hashlookup ">Hashlookup hits</a>

              <a href="#bodyHashesModal" data-remote="{{ url_for('tree_body_hashes', tree_uuid=tree_uuid) }}"
                  data-bs-toggle="modal" data-bs-target="#bodyHashesModal" role="button"
                  title="All resources contained in the tree">Resources</a>

              <a href="#hostnamesModal" data-remote="{{ url_for('tree_hostnames', tree_uuid=tree_uuid) }}"
                  data-bs-toggle="modal" data-bs-target="#hostnamesModal" role="button"
                  title="All hostnames contained in the tree">Hostnames</a>

              <a href="#urlsModal" data-remote="{{ url_for('tree_urls', tree_uuid=tree_uuid) }}"
                 data-bs-toggle="modal" data-bs-target="#urlsModal" role="button"
                 title="All URLs contained in the tree">URLs</a>

              <a href="#faviconsModal" data-remote="{{ url_for('tree_favicons', tree_uuid=tree_uuid) }}"
                  data-bs-toggle="modal" data-bs-target="#faviconsModal" role="button"
                  title="Favicons found on the rendered page">Favicons</a>

              <a href="#captureHashesTypesModal" data-remote="{{ url_for('tree_capture_hashes_types', tree_uuid=tree_uuid) }}"
                  data-bs-toggle="modal" data-bs-target="#captureHashesTypesModal" role="button"
                  title="Compare hashes of the rendered page">(Fuzzy)Hashes types</a>

              <a href="#identifiersModal" data-remote="{{ url_for('tree_identifiers', tree_uuid=tree_uuid) }}"
                  data-bs-toggle="modal" data-bs-target="#identifiersModal" role="button"
                  title="Identifiers found on the rendered page">Other Identifiers</a>
            </div>
          </div>

          <div id="actions-menu" class="dropdown">
            <button class="dropbtn">Actions</button>
            <div id="actions-menu-content" class="dropdown-content">
              <a href="#urlsInPageModal" data-remote="{{ url_for('urls_rendered_page', tree_uuid=tree_uuid) }}"
                  data-bs-toggle="modal" data-bs-target="#urlsInPageModal" role="button"
                  title="Start a capture from one of the URLs rendered in the page">Subsequent Captures</a>

              <a href="{{ url_for('recapture', tree_uuid=tree_uuid) }}" role="button"
                  title="Submit the URL again">Re-Capture</a>

              <a href="#downloadModal" data-bs-toggle="modal" data-bs-target="#downloadModal" role="button"
                  title="Download specific elements of the capture">Download elements</a>
            </div>
          </div>

          {% if current_user.is_authenticated %}
            <div id="admin-menu" class="dropdown">
              <button class="dropbtn">Admin only</button>
              <div id="admin-menu-content" class="dropdown-content">
                <a href="{{ url_for('rebuild_tree', tree_uuid=tree_uuid) }}" role="button">Rebuild capture</a>
                <a href="{{ url_for('hide_capture', tree_uuid=tree_uuid) }}" role="button">Hide capture</a>
                <a href="{{ url_for('remove_capture', tree_uuid=tree_uuid) }}" role="button" id="removeCapture">Remove capture</a>
                {% if misp_push%}
                  <a href="#mispPushModal" data-remote="{{ url_for('web_misp_push_view', tree_uuid=tree_uuid) }}"
                    data-bs-toggle="modal" data-bs-target="#mispPushModal" role="button">Prepare push to MISP</a>
                {% endif %}
                {% if misp_lookup%}
                  <a href="#mispLookupModal" data-remote="{{ url_for('web_misp_lookup_view', tree_uuid=tree_uuid) }}"
                    data-bs-toggle="modal" data-bs-target="#mispLookupModal" role="button">Search events on MISP</a>
                {% endif %}
                <a href="{{ url_for('logout') }}" role="button" style="color: red">Logout</a>
              </div>
            </div>
          {% endif %}

          {%if enable_categorization or enable_bookmark or enable_context_by_users %}
            <div id="extra-menu" class="dropdown">
              <button class="dropbtn">Extras</button>
              <div id="extra-menu-content" class="dropdown-content">
                {% if enable_categorization and current_user.is_authenticated %}
                    <a href="#categoriesModal" data-remote="{{ url_for('categories_capture', tree_uuid=tree_uuid) }}"
                    data-bs-toggle="modal" data-bs-target="#categoriesModal" role="button">Manage categories</a>
                {% endif %}
                {% if enable_bookmark %}
                    <a href="#/" role="button" id="unbookmarkAllNodes">Unbookmark all nodes</a>
                {% endif %}
                {% if enable_context_by_users %}
                    <a href="#/" role="button" id="markAsKnown">Mark all the captures' entries as known</a>
                {% endif %}
              </div>
            </div>
          {% endif %}

          <a id="help" href="https://www.lookyloo.eu/docs/main/usage.html#_investigate_a_capture" role="button" title="Lookyloo Manual" target="_blank">?</a>

      </div>
    </div>
  </div>
</div>

<div id="legend_container" class="tree-panel-container">
  <div id=legend class="collapse show">
    <center>
      <div style="display: inline">
        <b>Legend</b>
      </div>
      <div style="display: inline;">
        <button type="button" class="btn btn-link" data-bs-toggle="collapse" data-bs-target="#legend">
            <img src="{{ url_for('static', filename='down.jpg') }}" alt="Minimize legend" height="25" width="25" title="Collapse">
        </button>
      </div>
    </center>
  <hr/>
  <div title="The node contains at least one insecure (not HTTPS) request">
    <img src="{{ url_for('static', filename='insecure.svg') }}" alt="Insecure requests"
         height="20" width="20"> Unencrypted requests
  </div>

  <div title="This node contains only empty responses">
    <img src="{{ url_for('static', filename='empty.svg') }}" alt="Empty responses"
         height="20" width="20"> Empty responses
  </div>

  <div title="Number of cookies received in the responses of this node">
    <img src="{{ url_for('static', filename='cookie_received.png') }}" alt="Cookie received"
         height="20" width="20"> Cookie received
  </div>

  <div title="Number of cookies sent in the requests of this node">
    <img src="{{ url_for('static', filename='cookie_read.png') }}" alt="Cookie read"
         height="20" width="20"> Cookie read
  </div>

  <div title="Number of redirects initiated by the responses of this node">
    <img src="{{ url_for('static', filename='redirect.png') }}" alt="Redirect"
         height="20" width="20"> Redirect
  </div>

  <div title="Number of resources loaded from iFrames in the responses in this node">
    <img src="{{ url_for('static', filename='ifr.png') }}" alt="iFrame"
        height="20" width="20"> iFrame
  </div>

  <div title="Number of JavaScript in the responses in this node">
    <img src="{{ url_for('static', filename='javascript.png') }}" alt="JavaScript"
         height="20" width="20"> Javascript
  </div>

  <div title="Number of fonts in the responses in this node">
    <img src="{{ url_for('static', filename='font.png') }}" alt="Font"
         height="20" width="20"> Font
  </div>

  <div title="Number of HTML in the responses in this node">
    <img src="{{ url_for('static', filename='html.png') }}" alt="HTML"
         height="20" width="20"> HTML
  </div>

  <div title="Number of JSON in the responses in this node">
    <img src="{{ url_for('static', filename='json.png') }}" alt="JSON"
         height="20" width="20"> JSON
  </div>

  <div title="Number of CSS in the responses in this node">
    <img src="{{ url_for('static', filename='css.png') }}" alt="CSS"
         height="20" width="20"> CSS
  </div>

  <div title="Number of executables in the responses in this node">
    <img src="{{ url_for('static', filename='exe.png') }}" alt="EXE"
        height="20" width="20"> EXE
  </div>

  <div title="Number of images in the responses in this node">
    <img src="{{ url_for('static', filename='img.png') }}" alt="Image"
        height="20" width="20"> Image
  </div>

  <div title="Number of videos in the responses in this node">
    <img src="{{ url_for('static', filename='video.png') }}" alt="Video"
        height="20" width="20"> Video
  </div>

  <div title="Number of unknown resources in the responses in this node">
    <img src="{{ url_for('static', filename='wtf.png') }}" alt="Content type not set/unknown"
        height="20" width="20"> Unknown content
    </div>

  <div title="The node contains a downloaded file">
    <img src="{{ url_for('static', filename='download.png') }}" alt="Contains a downloaded file"
        height="20" width="20"> Downloaded file
    </div>
  </div>

  <div style="width: 70px; float: right;">
    <center>
    <button type="button" class="btn btn-link" data-bs-toggle="collapse" data-bs-target="#legend">
      <img src="{{ url_for('static', filename='up.jpg') }}" alt="Maximize legend" height="40" width="40" title="Expand">
      <b>Legend</b>
    </button>
    </center>
  </div>
</div>


<!-- Modals -->

<div class="modal fade" id="detailsModal" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-xl" role="document">
  <div class="modal-content">
    <div class="modal-header">
      <h5 class="modal-title" id="detailsModalLabel">Details of the capture at the time it happened</h5>
        <button type="button" class="btn btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
    </div>
    <div class="modal-body">
      <dl class="row">
        <dt class="col-sm-2">URL captured</dt>
        <dd class="col-sm-10">{{ shorten_string(info.url, 1000) }}</dd>

        <dt class="col-sm-2">Page title</dt>
        <dd class="col-sm-10">{{ info.title }}</dd>

        <dt class="col-sm-2">Capture time</dt>
        <dd class="col-sm-10" id="start_time"></dd>

        <dt class="col-sm-2">User Agent</dt>
        <dd class="col-sm-10">{{ info.user_agent }}</dd>

        {% if info.referer %}
        <dt class="col-sm-2">Referer</dt>
        <dd class="col-sm-10">{{ info.referer }}</dd>
        {%endif%}

        {% if meta %}
          {% for k, v in meta.items() if k not in ['user_agent'] %}
            <dt class="col-sm-2">{{k.title()}}</dt>
            <dd class="col-sm-10">{{ v }}</dd>
          {% endfor %}
        {%endif%}
        {% if capture_settings %}
          {% for k, v in capture_settings.items() if v and k in ['proxy']%}
            <dt class="col-sm-2">{{k.title()}}</dt>
            <dd class="col-sm-10">{{ v }}</dd>
          {% endfor %}
        {%endif%}
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
    </div>
  </div>
  </div>
</div>

<div class="modal fade" id="statsModal" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-xl" role="document">
      <div class="modal-content">
          <div class="modal-header">
              <h5 class="modal-title" id="statsModalLabel">Statistics</h5>
              <button type="button" class="btn btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
              ... loading statistics ...
          </div>
          <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          </div>
      </div>
  </div>
</div>

<div class="modal fade" id="identifiersModal" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-xl" role="document">
      <div class="modal-content">
          <div class="modal-header">
              <h5 class="modal-title" id="identifiersModalLabel">Identifiers found on the rendered page</h5>
              <button type="button" class="btn btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
              ... loading identifiers ...
          </div>
          <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          </div>
      </div>
  </div>
</div>

<div class="modal fade" id="identifierDetailsModal" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-xl" role="document">
      <div class="modal-content">
          <div class="modal-header">
              <h5 class="modal-title" id="identifierDetailsModalLabel">Other occurrences of the identifier</h5>
              <button type="button" class="btn btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
              ... loading identifier details ...
          </div>
          <div class="modal-footer">
              <a class="btn btn-primary" href="#identifiersModal"
                 data-remote="{{ url_for('tree_identifiers', tree_uuid=tree_uuid) }}"
                 data-bs-toggle="modal" data-bs-target="#identifiersModal" role="button">Back to capture's identifiers</a>
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          </div>
      </div>
  </div>
</div>

<div class="modal fade" id="faviconsModal" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-xl" role="document">
      <div class="modal-content">
          <div class="modal-header">
              <h5 class="modal-title" id="faviconsModalLabel">Favicons found on the rendered page</h5>
              <button type="button" class="btn btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
              ... loading favicons ...
          </div>
          <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          </div>
      </div>
  </div>
</div>

<div class="modal fade" id="faviconDetailsModal" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-xl" role="document">
      <div class="modal-content">
          <div class="modal-header">
              <h5 class="modal-title" id="faviconDetailsModalLabel">Other occurrences of the favicon</h5>
              <button type="button" class="btn btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
              ... loading favicon details ...
          </div>
          <div class="modal-footer">
              <a class="btn btn-primary" href="#faviconsModal"
                 data-remote="{{ url_for('tree_favicons', tree_uuid=tree_uuid) }}"
                 data-bs-toggle="modal" data-bs-target="#faviconsModal" role="button">Back to capture's favicons</a>
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          </div>
      </div>
  </div>
</div>

<div class="modal fade" id="captureHashesTypesModal" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-xl" role="document">
      <div class="modal-content">
          <div class="modal-header">
              <h5 class="modal-title" id="captureHashesTypesModalLabel">Hashes of the rendered page</h5>
              <button type="button" class="btn btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
              ... loading hash types ...
          </div>
          <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          </div>
      </div>
  </div>
</div>

<div class="modal fade" id="captureHashesTypesDetailsModal" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-xl" role="document">
      <div class="modal-content">
          <div class="modal-header">
              <h5 class="modal-title" id="captureHashesTypesDetailsModalLabel">Other occurrences of the hash</h5>
              <button type="button" class="btn btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
              ... loading hash details ...
          </div>
          <div class="modal-footer">
              <a class="btn btn-primary" href="#captureHashesTypesModal"
                 data-remote="{{ url_for('tree_capture_hashes_types', tree_uuid=tree_uuid) }}"
                 data-bs-toggle="modal" data-bs-target="#captureHashesTypesModal" role="button">Back to capture's hashes</a>
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          </div>
      </div>
  </div>
</div>

<div class="modal fade" id="faviconDetailsProbabilisticHashModal" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-xl" role="document">
      <div class="modal-content">
          <div class="modal-header">
              <h5 class="modal-title" id="faviconDetailsProbabilisticHashModalLabel">Other occurrences of the favicon from a probabilistic hash</h5>
              <button type="button" class="btn btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
              ... loading favicon details from probabilistic hash ...
          </div>
          <div class="modal-footer">
              <a class="btn btn-primary" href="#faviconsModal"
                 data-remote="{{ url_for('tree_favicons', tree_uuid=tree_uuid) }}"
                 data-bs-toggle="modal" data-bs-target="#faviconsModal" role="button">Back to capture's favicons</a>
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          </div>
      </div>
  </div>
</div>

<div class="modal fade" id="bodyHashesModal" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-xl" role="document">
      <div class="modal-content">
          <div class="modal-header">
              <h5 class="modal-title" id="bodyHashesModalLabel">Resources in tree</h5>
              <button type="button" class="btn btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
              ... loading resources ...
          </div>
          <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          </div>
      </div>
  </div>
</div>

<div class="modal fade" id="bodyHashDetailsModal" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-xl" role="document">
      <div class="modal-content">
          <div class="modal-header">
              <h5 class="modal-title" id="bodyHashDetailsModalLabel">Other occurrences of the resource</h5>
              <button type="button" class="btn btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
              ... loading resource details ...
          </div>
          <div class="modal-footer">
              <a class="btn btn-primary" href="#bodyHashesModal"
                 data-remote="{{ url_for('tree_body_hashes', tree_uuid=tree_uuid) }}"
                 data-bs-toggle="modal" data-bs-target="#bodyHashesModal" role="button">Back to capture's resources</a>
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          </div>
      </div>
  </div>
</div>

<div class="modal fade" id="hostnamesModal" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-xl" role="document">
      <div class="modal-content">
          <div class="modal-header">
              <h5 class="modal-title" id="hostnamesModalLabel">Hostnames in tree</h5>
              <button type="button" class="btn btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
              ... loading hostnames ...
          </div>
          <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          </div>
      </div>
  </div>
</div>

<div class="modal fade" id="hostnameDetailsModal" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-xl" role="document">
      <div class="modal-content">
          <div class="modal-header">
              <h5 class="modal-title" id="hostnameDetailsModalLabel">Other occurrences of the hostname</h5>
              <button type="button" class="btn btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
              ... loading hostname details ...
          </div>
          <div class="modal-footer">
              <a class="btn btn-primary" href="#HostnamesModal"
                 data-remote="{{ url_for('tree_hostnames', tree_uuid=tree_uuid) }}"
                 data-bs-toggle="modal" data-bs-target="#hostnamesModal" role="button">Back to capture's hostnames</a>
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          </div>
      </div>
  </div>
</div>

<div class="modal fade" id="urlsModal" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-xl" role="document">
      <div class="modal-content">
          <div class="modal-header">
              <h5 class="modal-title" id="urlsModalLabel">URLs in tree</h5>
              <button type="button" class="btn btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
              ... loading urls ...
          </div>
          <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          </div>
      </div>
  </div>
</div>

<div class="modal fade" id="urlDetailsModal" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-xl" role="document">
      <div class="modal-content">
          <div class="modal-header">
              <h5 class="modal-title" id="hostnameDetailsModalLabel">Other occurrences of the URL</h5>
              <button type="button" class="btn btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
              ... loading url details ...
          </div>
          <div class="modal-footer">
              <a class="btn btn-primary" href="#HostnamesModal"
                 data-remote="{{ url_for('tree_urls', tree_uuid=tree_uuid) }}"
                 data-bs-toggle="modal" data-bs-target="#urlsModal" role="button">Back to capture's URLs</a>
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          </div>
      </div>
  </div>
</div>

<div class="modal fade" id="mispPushModal" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-xl" role="document">
      <div class="modal-content">
          <div class="modal-header">
              <h5 class="modal-title" id="mispPushModalLabel">MISP Push</h5>
              <button type="button" class="btn btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
              ... loading MISP Push view ...
          </div>
          <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          </div>
      </div>
  </div>
</div>

<div class="modal fade" id="mispLookupModal" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-xl" role="document">
      <div class="modal-content">
          <div class="modal-header">
              <h5 class="modal-title" id="mispLookupModalLabel">MISP Lookup</h5>
              <button type="button" class="btn btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
              ... loading MISP Lookup view ...
          </div>
          <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          </div>
      </div>
  </div>
</div>

<div class="modal fade" id="screenshotModal" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-xl" role="document">
  <div class="modal-content">
    <div class="modal-header">
      <h5 class="modal-title" id="screenshotModalLabel">Screenshot</h5>
        <button type="button" class="btn btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
    </div>
    <div class="modal-body">
    <center>
      {% set screenshot_too_big = screenshot_size > 10 * 1024 * 1024 %}
      {% if screenshot_too_big %}
        Image too big ({{ sizeof_fmt(screenshot_size) }}) to display in the browser, the screenshot below is cropped.
        </br>
      {% endif %}
      {% if blur_screenshot %}
      <button type="button" class="btn btn-primary" id="blurScreenshot">Unblur</button>
      {% endif %}
      <a href="{{ url_for('image', tree_uuid=tree_uuid) }}" role="button" class="btn btn-primary">Download</a>
      </br>
      </br>
      <img src="{{ url_for('image', tree_uuid=tree_uuid, width=1024 if screenshot_too_big else '') }}" class="img-fluid {{ 'blur' if blur_screenshot else '' }}" id="screenshot"/>
      </br>
    </center>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
    </div>
  </div>
  </div>
</div>

<div class="modal fade" id="modulesModal" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-xl" role="document">
      <div class="modal-content">
          <div class="modal-header">
              <h4 class="modal-title" id="modulesModalLabel">
                  Reports from 3rd party services
              </h4>
              </br>
              <button type="button" class="btn btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          </br>
          <center><h5>Note that if you get an error when you click on a
                  link below, it probably means the capture is still ongoing.
                  Try reloading the page after a few seconds.</h5></center>
          <div class="modal-body">
              ... loading results from 3rd party modules ...
          </div>
          <div class="modal-footer">
              <button type="button" class="btn btn-success modulesForceRefresh">Re-run all modules</button>
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          </div>
      </div>
  </div>
</div>

<div class="modal fade" id="historyModal" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-xl" role="document">
      <div class="modal-content">
          <div class="modal-header">
              <h4 class="modal-title" id="historyModalLabel">
                  Historical data and context about this capture
              </h4>
              </br>
              <button type="button" class="btn btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          </br>
          <div class="modal-body">
              ... loading results historical context ...
          </div>
          <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          </div>
      </div>
  </div>
</div>

<div class="modal fade" id="downloadModal" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-xl" role="document">
      <div class="modal-content">
          <div class="modal-header">
              <h4 class="modal-title" id="downloadModalLabel">
                  Download specific elements of the capture.
              </h4>
              </br>
              <button type="button" class="btn btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          </br>
          <div class="modal-body">
          <ul>
            <li>
              <a href="#" id="dlTreeAsSVG" role="button">Download tree as PNG</a>
            </li>
            <li>
              <a href="{{ url_for('image', tree_uuid=tree_uuid) }}" role="button">Download screenshot</a>
            </li>
            <li>
              <a href="{{ url_for('cookies', tree_uuid=tree_uuid) }}" role="button">Download cookiejar</a>
            </li>
            <li>
              <a href="{{ url_for('hashes_tree', tree_uuid=tree_uuid) }}" role="button">Download hashes for all the resources</a>
            </li>
            <li>
              <a href="{{ url_for('export', tree_uuid=tree_uuid) }}" role="button">Download full capture</a>
            </li>
            <li>
              <a href="{{ url_for('GenericAPI_misp_export', capture_uuid=tree_uuid) }}" role="button">Download as MISP Event</a>
              {% if parent_uuid %}
              (<a href="{{ url_for('GenericAPI_misp_export', capture_uuid=tree_uuid, with_parents=True) }}" role="button">with parents</a>)
              {% endif %}
            </li>
            {% if has_redirects %}
            <li>
              <a href="{{ url_for('redirects', tree_uuid=tree_uuid) }}" role="button">Download redirects</a>
            </li>
            {% endif %}
          </ul>
          </div>
          <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          </div>
      </div>
  </div>
</div>

<div class="modal fade" id="hashlookupModal" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-xl" role="document">
      <div class="modal-content">
          <div class="modal-header">
              <h4 class="modal-title" id="hashlookupModalLabel">
                  Hits in Hashlookup
              </h4>
              </br>
              <button type="button" class="btn btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          </br>
          <div class="modal-body">
              ... loading results from hashlookup ...
          </div>
          <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          </div>
      </div>
  </div>
</div>

{% if enable_categorization %}
<div class="modal fade" id="categoriesModal" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-xl" role="document">
      <div class="modal-content">
          <div class="modal-header">
              <h5 class="modal-title" id="categoriesModalLabel">Categorize the capture</h5>
              <button type="button" class="btn btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
              ... loading the categorization options ...
          </div>
          <p>
          <form role="form" id="fast-categories" class="fast-categories">
            <fieldset id="verification-status">
              <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" id="legitimate" name="verification-status" value="legitimate">
                <label class="form-check-label" for="legitimate">legitimate</label>
              </div>
              <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" id="malicious" name="verification-status" value="malicious">
                <label class="form-check-label" for="malicious">malicious</label>
              </div>
              <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" id="unclear" name="verification-status" value="unclear" checked>
                <label class="form-check-label" for="unclear">unclear</label>
              </div>
            </fieldset>

            <div id="content-categoies">
              <p>Content Categories (Multiple Choices possible)</p>
              <fieldset id="legitimate-categories" hidden>
                <p>Only if legitimate:</p>
                <div class="form-check">
                  <input class="form-check-input" type="checkbox" id="parking-page" name="parking-page" value="parking-page">
                  <label class="form-check-label" for="parking-page">parking-page</label><br>
                </div>
                <div class="form-check">
                  <input class="form-check-input" type="checkbox" id="default-page" name="default-page" value="default-page">
                  <label class="form-check-label" for="default-page">default-page</label><br>
                </div>
                <div class="form-check">
                  <input class="form-check-input" type="checkbox" id="institution" name="institution" value="institution">
                  <label class="form-check-label" for="institution">institution / company</label><br>
                </div>
                <!-- the name of the institution/company could be added here in the future, maybe with propositions
                 <label for="institution-name">Enter the name of the institution/company:</label><br>
                 <input type="text" id="institution-name" name="institution-name">
                -->
              </fieldset>
              <fieldset id="malicious-categories" hidden>
                <p>Only if malicious:</p>
                <div class="form-check">
                  <input class="form-check-input" type="checkbox" id="clone" name="clone" value="clone">
                  <label class="form-check-label" for="clone">clone</label><br>
                </div>
                <div class="form-check">
                  <input class="form-check-input" type="checkbox" id="phishing" name="phishing" value="phishing">
                  <label class="form-check-label" for="phishing">phishing</label><br>
                </div>
              </fieldset>
              <div class="form-check">
                <input class="form-check-input" type="checkbox" id="captcha" name="captcha" value="captcha">
                <label class="form-check-label" for="captcha">captcha</label><br>
              </div>
              <div class="form-check">
                <input class="form-check-input" type="checkbox" id="authentication-form" name="authentication-form" value="authentication-form">
                <label class="form-check-label" for="authentication-form">authentication-form</label><br>
              </div>
              <div class="form-check">
                <input class="form-check-input" type="checkbox" id="adult-content" name="adult-content" value="adult-content">
                <label class="form-check-label" for="adult-content">adult-content</label><br>
              </div>
              <div class="form-check">
                <input class="form-check-input" type="checkbox" id="shop" name="shop" value="shop">
                <label class="form-check-label" for="shop">shop</label><br>
              </div>
            </div>

            <label for="query" class="form-label">Category to search</label>
            <input type="text" class="form-control" name="query" id="query" placeholder="Query">
            <button type="submit" class="btn btn-success" name="submit">Submit</button>
          </form>
          </p>
          <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          </div>
      </div>
  </div>
</div>
{% endif %}

{% if enable_monitoring %}
<div class="modal fade" id="monitoringModal" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-xl" role="document">
    <form role="form" action="{{ tree_uuid }}/monitor" method=post enctype=multipart/form-data>
      <div class="modal-content">
          <div class="modal-header">
              <h5 class="modal-title" id="monitorModalLabel">Monitor capture</h5>
              <button type="button" class="btn btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            {% if monitoring_settings["force_expire"] %}
            <div class="alert alert-warning" role="alert">
              The monitoring instance is configured to automatically expire what you want to
              monitor after <b>{{monitoring_settings["max_captures"]}} captures</b>.
              </br>
              Keep that in mind when you select the frequency.
            </div>
            {% endif %}
            <p>The capture will be submitted to the monitoring interface.</p>
            <div class="mb-3">
              <label for=frequency" class="form-label">Frequency (must be higher than {{monitoring_settings["min_frequency"]}} seconds)</label>
              <select name="frequency" id="frequency" class="form-select" aria-label="Select a frequency for the monitoring" required>
                <option value="hourly" selected>Hourly</option>
                <option value="daily">Daily</option>
              </select>

              <!-- boat fields -->
              <label class="boatymcboat form-label" for="name">Your Name</label>
              <input class="boatymcboat" autocomplete="off" type="text" id="name" name="name"
                     placeholder="Your fav boat name here">
              <!-- end -->
            </div>
            <div class="mb-3">
              <label for="expire_at" class="form-label">Expire</label>
              <input type="date" class="form-control" name="expire_at" id="expire_at"
                     value="" />
              {% if monitoring_settings["force_expire"] %}
              <div class="alert alert-warning" role="alert">
                The expire date will be ignored if the max amount of captures ({{monitoring_settings["max_captures"]}}) is reached first.
              </div>
              {% endif %}
            </div>
            <div class="mb-3">
              {% if monitoring_collections %}
              <label for="collection" class="form-label">Pick a collection.</label>
              <input type="text" class="form-control" list="collections" id="collection" name="collection" placeholder="Type a collection name, or select an existing one (arrow down to see them)">
              <datalist id="collections">
                {% for name in monitoring_collections %}
                <option value="{{name}}">{{name}}</option>
                {% endfor %}
              </datalist>
              {%else%}
              <label for=collection" class="form-label">Add to a collection.</label>
              <input type="text" class="form-control" name="collection" id="collection" placeholder="Name of the collection">
              {% endif %}
            </div>
            <div class="mb-3">
              <label for=notification" class="form-label">Get notified when the capture changes (WiP)</label>
              <input type="email" class="form-control" name="notification" id="notification" placeholder="Email address to receive the notification">
            </div>
            <div class="mb-3 form-check">
                <input class="form-check-input" type="checkbox" name="confirm" id="monitoring_toc" required >
                <label for="monitoring_toc" class="form-check-label">{{ confirm_message }}</label>
            </div>
          </div>
          <div class="modal-footer">
              <button type="submit" class="btn btn-success" id="btn-notification-monitoring">Send to monitoring</button>
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          </div>
      </div>
    </form>
  </div>
</div>
{% endif %}

{% if enable_mail_notification %}
<div class="modal fade" id="emailModal" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-xl" role="document">
    <form role="form" action="{{ tree_uuid }}/send_mail" method=post enctype=multipart/form-data>
      <div class="modal-content">
          <div class="modal-header">
              <h5 class="modal-title" id="emailModalLabel">Notify by email</h5>
              <button type="button" class="btn btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <p>A notification of this capture will be sent to the owners of this Lookyloo instance. They may or may not act on it.</p>
            <div class="mb-3">
              <label for="email" class="form-label">Email address - used to get back in touch with you if needed (optional)</label>
              <input type="email" class="form-control" name="email" id="email" placeholder="Enter email">

              <!-- boat fields -->
              <label class="boatymcboat form-label" for="name">Your Name</label>
              <input class="boatymcboat" autocomplete="off" type="text" id="name" name="name"
                     placeholder="Your fav boat name here">
            </div>
            <div class="mb-3">
              <label for="comment" class="form-label">Please write a comment (optional)</label>
              <textarea class="form-control" name="comment" id=comment rows="3"></textarea>
            </div>
            <div class="mb-3 form-check">
                <input class="form-check-input" type="checkbox" name="confirm" id="mail_notification_toc" required>
                <label for="mail_notification_toc" class="form-check-label">{{ confirm_message }}</label>
            </div>
          </div>
          <div class="modal-footer">
              <button type="submit" class="btn btn-success" id="btn-notification-report">Send email</button>
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          </div>
      </div>
    </form>
  </div>
</div>
{% endif %}

<div class="modal fade" id="urlsInPageModal" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-xl" role="document">
      <div class="modal-content">
          <div class="modal-header">
              <h5 class="modal-title" id="urlsInPageModalLabel">URLs in the rendered page</h5>
              <button type="button" class="btn btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
              ... loading URLs in rendered page ...
          </div>
          <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          </div>
      </div>
  </div>
</div>
{% endblock content %}