{% extends "main.html" %}
{% block title %}Scrape{% endblock %}

{% block content %}
<div class="container">
  <center>
    <img src="{{ url_for('static', filename='lookyloo.jpeg') }}"
         alt="Lookyloo" width="400">
  </center>
  </br>
    <form role="form" action="scrape" method=post enctype=multipart/form-data>
    <div class="form-group row">
      <div class="col-sm-10">
        <div class="form-check">
          <input class="form-check-input"type="checkbox" name="listing" checked="true"></input>
          <label for="listing" class="form-check-label">Display results on public page</label>
        </div>
      </div>
    </div>
      <div class="form-group row">
        <label for="url" class="col-sm-2 col-form-label">URL:</label>
        <div class="col-sm-10">
          <input type="text" class="form-control" name="url" id=url placeholder="URL to scrape" required>
        </div>
      </div>

      <div class="form-group row">
        <label for="depth" class="col-sm-2 col-form-label">Link Depth:</label>
        <div class="col-sm-1">
          <select class="form-control" name="depth" id=depth>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
          </select>
        </div>
      </div>

      <div class="form-group row">
        <label for="cookies" class="col-sm-6">Cookies (JSON export from the Firefox plugin Cookie Quick Manager)</label>
        <div class="col-sm-4">
          <input type="file" class="form-control-file" id="cookies" name="cookies">
        </div>
      </div>

      <div class="dropdown-divider"></div>
      <p><u>Browser Configuration</u></p>
      <div class="form-group row">
        <label for="os" class="col-sm-2 col-form-label">Operating System:</label>
        <div class="col-sm-10">
          <select class="form-control" name="os" id="os">
            {% for os in user_agents.keys() %}
              <option value="{{ os }}">{{ os }}</option>
            {% endfor%}
          </select>
        </div>
      </div>

      {% for os, browsers in user_agents.items() %}
      <div id="{{os.replace(' ', '_')}}" class="style-sub-1 form-group row" {% if not loop.first %}style="display: none;"{%endif%}>
        <label for="browser" class="col-sm-2 col-form-label">Browser Type:</label>
        <div class="col-sm-10">
          <!-- Disable all the selects, unless it is the first one in the OS list-->
          <select class="form-control" name="browser" {% if not loop.first %}disabled{%endif%}>
          {% for browser in browsers.keys()%}
            <option value="{{ browser }}">{{ browser }}</option>
          {% endfor%}
          </select>
        </div>
      </div>
          {% set outer_loop = loop %}
          {% for browser, user_agents in browsers.items()%}
      <div id="{{os.replace(' ', '_')}}_{{browser.replace(' ', '_')}}" class="style-sub-2 form-group row" {% if not loop.first or not outer_loop.first %} style="display: none;"{%endif%}>
        <label for="user_agent" class="col-sm-2 col-form-label">User Agent:</label>
        <div class="col-sm-10">
          <!-- Disable all the selects, unless it is the first one in the OS list and in the browser list-->
          <select class="form-control" name="user_agent" {% if not outer_loop.first or not loop.first %}disabled{%endif%}>
            {% for user_agent in user_agents %}
              <option value="{{ user_agent }}">{{ user_agent }}</option>
            {% endfor%}
          </select>
        </div>
      </div>
          {% endfor%}
      {% endfor%}
      <div class="dropdown-divider"></div>
      <center><button type="submit" class="btn btn-primary">Start looking!</button></center>
  </form>
</div>
{% endblock %}

{% block scripts %}
  {{ super() }}
  <script src='{{ url_for('static', filename='scrape.js') }}'></script>
{% endblock %}