{% extends "base.html" %}

{% block content %}
<h1>Create Scraper</h1>
<form method="POST" class="scraper-form">
    <div class="form-group">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" required>
    </div>
    
    <div class="form-group">
        <label for="url">URL:</label>
        <input type="url" id="url" name="url" required>
    </div>
    
    <div class="form-group">
        <label for="selector_type">Selector Type:</label>
        <select id="selector_type" name="selector_type" required>
            <option value="xpath">XPath</option>
            <option value="css">CSS Selector</option>
        </select>
    </div>
    
    <div class="form-group">
        <label for="selector">Selector:</label>
        <textarea id="selector" name="selector" required></textarea>
    </div>
    
    <div class="form-group">
        <label for="interval">Interval (minutes):</label>
        <input type="number" id="interval" name="interval" required min="1">
    </div>

    <!-- Add this after the interval input -->
<div class="form-group">
    <label for="use_proxy">
        <input type="checkbox" id="use_proxy" name="use_proxy"> Use Proxy
    </label>
</div>
<div class="form-group" id="proxy_group" style="display: none;">
    <label for="proxy">Proxy (host:port:user:password):</label>
    <input type="text" id="proxy" name="proxy">
</div>

<!-- Add this to the form -->
<div class="form-group">
    <label for="use_rotating_proxies">
        <input type="checkbox" id="use_rotating_proxies" name="use_rotating_proxies"> Use Rotating Proxies
    </label>
</div>

<div class="form-group">
<div>
    <input type="checkbox" id="use_direct_connection" name="use_direct_connection">
    <label for="use_direct_connection">Use Direct Connection if Proxy Fails</label>
</div>
</div>


    
    <button type="submit" class="btn">Create Scraper</button>
</form>

<script>
    document.getElementById('use_proxy').addEventListener('change', function() {
        document.getElementById('proxy_group').style.display = this.checked ? 'block' : 'none';
    });
    </script>

{% endblock %}