{% extends "base.html" %}

{% block title %}Logs{% endblock %}

{% block content %}
<div class="page-header">
    <h2>Sync Logs</h2>
    <div class="header-actions">
        <button onclick="location.reload()" class="btn btn-secondary">Refresh</button>
    </div>
</div>

<div class="card">
    <div class="logs-container">
        {% if logs %}
            <pre class="logs"><code>{% for line in logs %}{{ line }}
{% endfor %}</code></pre>
        {% else %}
            <div class="empty-state">
                <p>No logs available yet. Run a sync to see output here.</p>
            </div>
        {% endif %}
    </div>
</div>

<div class="card info-card">
    <h3>About Logs</h3>
    <p>This page shows the last 200 lines of sync output. Logs include:</p>
    <ul>
        <li>Download progress for each video</li>
        <li>Errors and warnings</li>
        <li>Sync start/completion times</li>
        <li>Skipped videos (already downloaded)</li>
    </ul>
    <p><strong>Tip:</strong> Use the Refresh button to see the latest log output while a sync is running.</p>
</div>
{% endblock %}

{% block scripts %}
<script>
// Auto-refresh logs every 5 seconds if sync is running
fetch('/api/sync/status')
    .then(response => response.json())
    .then(data => {
        if (data.running) {
            setInterval(() => location.reload(), 5000);
        }
    });
</script>
{% endblock %}