{% extends "base.html" %}

{% block title %}Comparer les prix — TicketTracker{% endblock %}

{% block content %}
<h1>Comparaison Picnic vs Leclerc</h1>

{% if empty %}
<article>
    <p>
        Aucun produit commun trouvé entre Picnic et Leclerc.
    </p>
    <p>
        Pour voir une comparaison, vous devez :
    </p>
    <ol>
        <li>Importer des tickets des deux enseignes</li>
        <li>Normaliser les noms d'articles avec la CLI</li>
    </ol>
    <pre><code>python -m tickettracker.cli normalize</code></pre>
</article>
{% else %}

<p>Produits présents chez les deux enseignes, triés par écart de prix décroissant.</p>

<div class="overflow-auto">
    <table>
        <thead>
            <tr>
                <th>Produit</th>
                <th>Picnic moy.</th>
                <th>Leclerc moy.</th>
                <th>Écart €</th>
                <th>Écart %</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            {% for p in products %}
            <tr>
                <td>
                    {{ p.name_display }}
                    {% if p.match_type == 'fuzzy' %}
                    <span class="badge-fuzzy" title="Correspondance fuzzy validée">~</span>
                    {% endif %}
                </td>
                <td>{{ "%.2f"|format(p.price_picnic) }} €</td>
                <td>{{ "%.2f"|format(p.price_leclerc) }} €</td>
                <td class="{% if p.diff > 0 %}diff-positive{% elif p.diff < 0 %}diff-negative{% endif %}">
                    {{ "%+.2f"|format(p.diff) }} €
                </td>
                <td class="{% if p.diff > 0 %}diff-positive{% elif p.diff < 0 %}diff-negative{% endif %}">
                    {{ "%+.1f"|format(p.diff_pct) }} %
                </td>
                <td>
                    <a href="/product/{{ p.name | urlquote }}">Historique</a>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

<p>
    <small>Positif = Leclerc plus cher, négatif = Picnic plus cher.</small><br>
    <small><span class="badge-fuzzy">~</span> = correspondance fuzzy validée (noms différents, même produit)</small>
</p>

<p><a href="/matches">Gérer les correspondances fuzzy →</a></p>

{% endif %}
{% endblock %}