{% extends "base.html" %}

{% block content %}
<h1>Edit Scraper</h1>
<form method="POST" class="scraper-form">
    <div class="form-group">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" value="{{ scraper.name }}" required>
    </div>
    
    <div class="form-group">
        <label for="url">URL:</label>
        <input type="url" id="url" name="url" value="{{ scraper.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" {% if scraper.selector_type == 'xpath' %}selected{% endif %}>XPath</option>
            <option value="css" {% if scraper.selector_type == 'css' %}selected{% endif %}>CSS Selector</option>
        </select>
    </div>
    
    <div class="form-group">
        <label for="selector">Selector:</label>
        <textarea id="selector" name="selector" required>{{ scraper.selector }}</textarea>
    </div>
    
    <div class="form-group">
        <label for="interval">Interval (minutes):</label>
        <input type="number" id="interval" name="interval" value="{{ scraper.interval }}" required min="1">
    </div>

    <div class="form-group">
        <label for="use_proxy">
            <input type="checkbox" id="use_proxy" name="use_proxy" {% if scraper.use_proxy %}checked{% endif %}> Use Proxy
        </label>
    </div>
    <div class="form-group" id="proxy_group" style="display: {% if scraper.use_proxy %}block{% else %}none{% endif %};">
        <label for="proxy">Proxy (host:port:user:password):</label>
        <input type="text" id="proxy" name="proxy" value="{{ scraper.proxy }}">
    </div>

    <div class="form-group">
        <label for="use_rotating_proxies">
            <input type="checkbox" id="use_rotating_proxies" name="use_rotating_proxies" {% if scraper.use_rotating_proxies %}checked{% endif %}> Use Rotating Proxies
        </label>
    </div>

    <!-- Add this checkbox after the other proxy-related checkboxes -->
    <div class="form-group">
<div>
    <input type="checkbox" id="use_direct_connection" name="use_direct_connection" {% if scraper.use_direct_connection %}checked{% endif %}>
    <label for="use_direct_connection">Use Direct Connection if Proxy Fails</label>
</div>
</div>

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

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