{% extends "base.html" %}
{% block content %}
   <div class="appheader">
    <h1 class="text-center mb-4" id="apptitle">{{title}}<br>📡</h1>
    <strong style="font-weight: 900; font-size: 28px;">{{subtitle}}</strong>
   </div>
    <form method="POST" action="/scrape" id="scrapeForm">
    <div class="form-group mb-3">
        <label for="saved-url" class="form-label">Scrape Saved URLs:</label>
        <select name="selected_urls" id="selected_urls" class="form-select" onchange="document.getElementById('url').value = this.value;">
        <option value="" selected>Select Saved URL...</option>
            {% for url in urls %}
        <option value="{{ url[1] }}">{{ url[1] }}</option>
            {% endfor %}
        </select>
    </div>
        <button type="submit" class="btn btn-success" style="margin-top: 10px;">Run Scraper</button>&nbsp;&nbsp;
        <a href="/" class="btn btn-primary" style="margin-top: 10px;">Run URL Analysis</a>
    </form>
    <div id="loadingMessage" style="display: none; text-align: center; font-size: 20px; font-weight: bold; color: #007bff; margin-top: 20px;">
        Scraping: <span id="urlInProgress">...</span>
    </div>
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <script>
        document.getElementById('scrapeForm').onsubmit = function() {
            var selectedUrl = document.getElementById('selected_urls').value;
            if (selectedUrl) {
                document.getElementById('urlInProgress').textContent = selectedUrl;
            } else {
                document.getElementById('urlInProgress').textContent = 'Unknown URL';
            }
            document.getElementById('loadingMessage').style.display = 'block';
        };
    </script>

{% endblock %}