{{ template "layout" . }}
{{ define "content" }}
<section class="wizard">
  <div class="step-indicator" aria-label="Step 1 of 4">
    <span class="step active" aria-current="step">1. URLs</span>
    <span class="step">2. Infrastructure</span>
    <span class="step">3. Evidence</span>
    <span class="step">4. Review</span>
  </div>

  <h1>Step 1: Enter URLs</h1>
  <p>Enter the URLs of the abusive content, one per line. All URLs must be from the same domain.</p>

  <div class="alert alert-danger" role="alert">
    <strong>Stop:</strong> If the content involves child sexual abuse material (CSAM), do <em>not</em> use this tool. Report it immediately to the <a href="https://report.cybertip.org/" target="_blank" rel="noopener noreferrer">NCMEC CyberTipline</a>. For other federal cybercrimes or imminent threats, report to <a href="https://www.ic3.gov/" target="_blank" rel="noopener noreferrer">IC3.gov</a>.
  </div>

  <div class="alert alert-warning" role="alert">
    <strong>Retaliation risk:</strong> Hosting providers <strong>will forward</strong> your abuse report to the site operator. Operators of abusive sites may retaliate by publicly posting your complaint and encouraging further harassment. There is <strong>no expectation of privacy</strong> for abuse reports. Do not include personally identifying information in your description or evidence unless you accept this risk.
  </div>

  {{ if .Errors.Recaptcha }}
  <div class="alert alert-danger" role="alert">{{ .Errors.Recaptcha }}</div>
  {{ end }}

  <form method="post" action="/wizard/step1" id="step1-form">
    <input type="hidden" name="csrf_token" value="{{ .CSRFToken }}">
    <input type="hidden" name="g-recaptcha-response" id="g-recaptcha-response">

    <div class="form-group">
      <label for="urls">URLs (one per line)</label>
      <textarea id="urls" name="urls" rows="8" required
        placeholder="https://example.com/page1&#10;https://example.com/page2"
        aria-describedby="urls-help">{{ .FormValues.URLs }}</textarea>
      <small id="urls-help" class="form-help">All URLs must belong to the same domain.</small>
      {{ if .Errors.URLs }}
      <span class="form-error" role="alert">{{ .Errors.URLs }}</span>
      {{ end }}
    </div>

    <div class="form-actions">
      <button type="submit" class="btn btn-primary">Look Up Infrastructure</button>
    </div>
  </form>

  {{ if .RecaptchaSiteKey }}
  <script src="https://www.google.com/recaptcha/api.js?render={{ .RecaptchaSiteKey }}"></script>
  <script>
    document.getElementById('step1-form').addEventListener('submit', function(e) {
      var tokenField = document.getElementById('g-recaptcha-response');
      if (tokenField.value) return;
      e.preventDefault();
      var form = this;
      grecaptcha.ready(function() {
        grecaptcha.execute('{{ .RecaptchaSiteKey }}', {action: 'create_report'}).then(function(token) {
          tokenField.value = token;
          form.submit();
        });
      });
    });
  </script>
  {{ end }}
</section>
{{ end }}