{% extends "base.html" %}

{% block content %}
<h1>Scraper Dashboard <span class="scraper-count">({{ scrapers|length }} scrapers)</span></h1>

<style>
            .scraper-card {
            border: 1px solid #ddd;
            border-radius: 8px;
            margin-bottom: 20px;
            padding: 15px;
            background-color: #f9f9f9;
        }

        .action-buttons {
            
            margin-top:10px;
        }

    @media (max-width: 768px) {
        .scraper-card {
            border: 1px solid #ddd;
            border-radius: 8px;
            margin-bottom: 20px;
            padding: 15px;
            background-color: #f9f9f9;
        }
        .scraper-card h2 {
            margin-top: 0;
            color: #697565;
        }
        .scraper-info {
            margin-bottom: 10px;
        }
        .scraper-info strong {
            display: inline-block;
            width: 120px;
        }
        .action-buttons {
            margin-top:20px;
        }
        .action-buttons .btn {
            margin: 5px 0;
        }
    }
</style>

<div class="scraper-list">
    {% for scraper in scrapers %}
    <div class="scraper-card">
        <h2>{{ scraper.name }}</h2>
        <div class="scraper-info"><strong>URL:</strong> {{ scraper.url }}</div>
        <div class="scraper-info"><strong>Selector Type:</strong> {{ scraper.selector_type }}</div>
        <div class="scraper-info"><strong>Selector:</strong> {{ scraper.selector[:30] }}{% if scraper.selector|length > 30 %}...{% endif %}</div>
        <div class="scraper-info"><strong>Interval:</strong> {{ scraper.interval }} minutes</div>
        <div class="scraper-info"><strong>Last Run:</strong> {{ scraper.last_run|format_datetime }}</div>
        <div class="action-buttons">
            <a href="{{ url_for('view_scraper', id=scraper.id) }}" class="btn btn-view">View</a>
            <a href="{{ url_for('edit_scraper', id=scraper.id) }}" class="btn btn-edit">Edit</a>
            <a href="{{ url_for('delete_scraper', id=scraper.id) }}" onclick="return confirm('Are you sure?')" class="btn btn-delete">Delete</a>
            <button onclick="runScraper({{ scraper.id }})" class="btn btn-run">Run</button>
        </div>
    </div>
    {% endfor %}
</div>
{% endblock %}