{% extends "base.html" %}
{% block title %}Ads — Willhaben Tracker{% endblock %}
{% block title_in_topbar %}Recent Ads{% endblock %}

{% block content %}
{% if not error and ads %}
<div class="table-container">
    <table>
        <thead>
            <tr>
                <th>Ad</th>
                <th>Location</th>
                <th>First Tracked</th>
                <th>Link</th>
            </tr>
        </thead>
        <tbody>
            {% for ad in ads %}
            <tr>
                <td style="max-width: 400px; white-space: normal;">
                    <div style="font-weight: 500; margin-bottom: 4px; line-height: 1.4;">
                        {{ ad.title }}
                    </div>
                    <div style="display: flex; gap: 12px; font-size: 13px;">
                        <span style="font-weight: 600; color: var(--success-text);">{{ format_price(ad.price) }}</span>
                        {% if ad.published_at %}
                        <span style="color: var(--text-muted);">
                            <i class="ph ph-calendar-blank" style="vertical-align: middle;"></i> 
                            Pub: {{ ad.published_at.strftime('%m/%d %H:%M') }}
                        </span>
                        {% endif %}
                    </div>
                </td>
                <td>
                    <div style="display: flex; align-items: center; gap: 4px;">
                        <i class="ph ph-map-pin" style="color: var(--text-muted);"></i>
                        {% if ad.postcode %}{{ ad.postcode }} • {% endif %}
                        {{ ad.location or '—' }}
                    </div>
                </td>
                <td>
                    <div style="color: var(--text-secondary);">
                        {{ ad.first_seen_at.strftime('%Y-%m-%d') }}
                    </div>
                    <div style="font-size: 12px; color: var(--text-muted); margin-top: 2px;">
                        {{ ad.first_seen_at.strftime('%H:%M:%S') }}
                    </div>
                </td>
                <td>
                    <a href="{{ ad.url }}" target="_blank" style="display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; background: var(--bg-surface-active); border-radius: var(--radius-md); font-size: 13px; font-weight: 500;">
                        Open <i class="ph-bold ph-arrow-up-right"></i>
                    </a>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% elif not error %}
<div class="empty-state">
    <i class="ph ph-shopping-bag"></i>
    <p>No ads tracked yet.</p>
</div>
{% endif %}
{% endblock %}