{% extends "main.html" %}
{% from 'bootstrap5/utils.html' import render_messages %}
{% block title %}Capture{% endblock %}

{% block card %}
<meta property="og:title" content="Lookyloo" />
<meta property="og:type" content="website"/>
<meta
  property="og:description"
  content="Lookyloo captures websites and let you investigate them."
/>
<meta
  property="og:image"
  content="https://{{public_domain}}{{ url_for('static', filename='lookyloo.jpeg') }}"
/>
<meta
  property="og:url"
  content="https://{{public_domain}}"
/>
<meta name="twitter:card" content="summary_large_image">
{% endblock %}

{% block content %}
<div class="container">
  <center>
    <a href="{{ url_for('index') }}" title="Go back to index">
      <img src="{{ url_for('static', filename='lookyloo.jpeg') }}"
           alt="Lookyloo" width="25%">
    </a>
  </center>
  {{ render_messages(container=True, dismissible=True) }}
  <form role="form" action="{{ url_for('simple_capture') }}" method=post enctype=multipart/form-data>
    <!-- Submission type -->

    <div class="tab-content" id="nav-tabContent">
      </br>
      <div class="tab-pane fade show active" id="nav-url" role="tabpanel" aria-labelledby="nav-url-tab">
        <div class="row input-group mb-3">
          <label for="singleCaptureField" class="col-sm-1 col-form-label">URL(s):</label>
          <input type="text" class="form-control col-auto" name="url" id=singleCaptureField
                 placeholder="URL to capture" value="{{predefined_url_to_capture}}" required>

          <textarea class="form-control col-auto d-none" placeholder="URLs to capture, one per line"
                    name="urls" id=multipleCapturesField></textarea>

          <span class="col-sm-2 input-group-text">
            <div class="form-check">
              <input class="form-check-input" name="multipleCaptures" id="multipleCaptures" type="checkbox"
                     value="" aria-label="tick to enable multiple captures">
              <label for="multipleCaptures" class="form-check-label">Multiple captures</label>
            </div>
          </span>
        </div>
      </div>
    </div>
    <hr>

    <center>
      </br>
      <button type="submit" class="new-capture-button btn btn-primary" id="btn-looking">Submit!</button>
    </center>
  </form>
</div>
{% endblock %}

{% block scripts %}
  {{ super() }}
  <script src='{{ url_for('static', filename='capture.js') }}'
          {{get_sri('static', 'capture.js')}}
          crossorigin="anonymous"></script>
  <script>
      document.getElementById('multipleCaptures').addEventListener('click', function(e) {
        if (document.getElementById('multipleCaptures').checked == true) {
            document.getElementById('singleCaptureField').value = '';
            document.getElementById("singleCaptureField").classList.add("d-none");
            document.getElementById("singleCaptureField").required = false;
            document.getElementById("multipleCapturesField").classList.remove("d-none");
            document.getElementById("multipleCapturesField").required = true;
        }
        else {
            document.getElementById('multipleCapturesField').value = '';
            document.getElementById("singleCaptureField").classList.remove("d-none");
            document.getElementById("singleCaptureField").required = true;
            document.getElementById("multipleCapturesField").classList.add("d-none");
            document.getElementById("multipleCapturesField").required = false;
        }
      })
  </script>
{% endblock %}