{% include "header.html" %}
    <main>
        <section id="scrapingFormContainer" class="container-fluid d-flex justify-content-center">
            <div class="container-md my-5 mx-2 shadow-lg p-4 ">
                <h2>Config</h2>
                <form id="scrapingForm" method="POST" action="{{ url_for('start_scraping') }}">
                    {{ form.hidden_tag() }}
                    <div class="form-group">
                        {{ form.faction_id.label(class="form-control-label") }}
                        {{ form.faction_id(class="form-control") }}
                    </div>
                    <div class="form-group">
                        {{ form.fetch_interval.label(class="form-control-label") }}
                        {{ form.fetch_interval(class="form-control") }}
                    </div>
                    <div class="form-group">
                        {{ form.run_interval.label(class="form-control-label") }}
                        {{ form.run_interval(class="form-control") }}
                    </div>
                    <div class="form-group">
                        {{ form.submit(class="btn btn-primary", type="submit", id="startButton") }}
                    </div>
                </form>
                <button id="stopButton" class="btn btn-primary">Stop Scraping</button>
            </div>
        </section>

        <section id="resultsContainer" class="container-fluid d-flex justify-content-center">
            <div class="container-md my-5 mx-2 shadow-lg p-4" style="height: 500px;">
                <div class="row">
                    <div class="col-7">
                        <h2>Logs</h2>
                        <button id="prevPage">Previous</button>
                        <button id="nextPage">Next</button>
                        <pre id="logs" class="pre-scrollable" style="height: 430px; overflow:scroll; "><code></code></pre>
                    </div>
                    <div class="col">
                        <h2>Stats</h2>
                    </div>
                </div>
            </div>
        </section>
    </main>
    {% block scripts %}
        {{ bootstrap.load_js() }}
        <script src="{{url_for('.static', filename='app.js')}}"></script>
    {% endblock %}
    {% include "footer.html" %}