{% extends "base.html" %}
{% block title %}Pièces détachées — GMAO Collège{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-3">
    <h2 class="mb-0 h5"><i class="bi bi-box-seam"></i> Pièces</h2>
    <a href="{{ url_for('parts.create') }}" class="btn btn-primary btn-sm">
        <i class="bi bi-plus-lg"></i> <span class="d-none d-sm-inline">Nouvelle</span><span class="d-sm-none">+</span>
    </a>
</div>

<div class="btn-group mb-3" role="group" style="font-size:0.85rem;">
    <a href="{{ url_for('parts.index') }}" class="btn btn-sm btn-outline-secondary {% if not category_filter and not low_stock %}active{% endif %}">Toutes</a>
    <a href="{{ url_for('parts.index', low_stock=1) }}" class="btn btn-sm btn-outline-danger {% if low_stock %}active{% endif %}">
        <i class="bi bi-exclamation-triangle"></i> Stock bas
    </a>
</div>

{% if parts.items %}
<!-- Desktop : table -->
<div class="card border-0 shadow-sm d-none d-md-block">
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover table-sm mb-0">
                <thead><tr><th>Réf</th><th>Nom</th><th>Catégorie</th><th>Stock</th><th>Min</th><th>Emplacement</th><th>Prix</th></tr></thead>
                <tbody>
                {% for part in parts.items %}
                <tr class="{% if part.is_low_stock %}table-danger{% endif %}">
                    <td><code>{{ part.reference or '—' }}</code></td>
                    <td><a href="{{ url_for('parts.detail', id=part.id) }}">{{ part.name }}</a></td>
                    <td><span class="badge bg-secondary">{{ part.category }}</span></td>
                    <td>
                        <span class="{% if part.is_low_stock %}text-danger fw-bold{% endif %}">{{ part.quantity }}</span> {{ part.unit }}
                    </td>
                    <td>{{ part.min_quantity }}</td>
                    <td>{{ part.location or '—' }}</td>
                    <td>{{ "%.2f"|format(part.unit_price) if part.unit_price else '—' }} €</td>
                </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Mobile : cards -->
<div class="d-md-none">
    {% for part in parts.items %}
    <a href="{{ url_for('parts.detail', id=part.id) }}" class="text-decoration-none">
    <div class="card border-0 shadow-sm mb-2 {% if part.is_low_stock %}border-danger{% endif %}">
        <div class="card-body py-2 px-3">
            <div class="d-flex justify-content-between align-items-start">
                <div style="min-width:0;">
                    <strong class="text-truncate d-block">{{ part.name }}</strong>
                    <small class="text-muted">
                        <code>{{ part.reference or '—' }}</code> · {{ part.category }}
                    </small>
                </div>
                <div class="text-end flex-shrink-0 ms-2">
                    {% if part.is_low_stock %}
                    <span class="badge bg-danger" style="font-size:0.7rem;">⚠ Stock bas</span>
                    {% endif %}
                    <strong class="{% if part.is_low_stock %}text-danger{% endif %}">{{ part.quantity }}</strong> {{ part.unit }}
                </div>
            </div>
        </div>
    </div>
    </a>
    {% endfor %}
</div>

{% if parts.pages > 1 %}
<nav class="mt-2"><ul class="pagination pagination-sm justify-content-center mb-0">
    {% if parts.has_prev %}<li class="page-item"><a class="page-link" href="{{ url_for('parts.index', page=parts.prev_num) }}">&laquo;</a></li>{% endif %}
    {% for p in parts.iter_pages() %}<li class="page-item {% if p == parts.page %}active{% endif %}"><a class="page-link" href="{{ url_for('parts.index', page=p) }}">{{ p }}</a></li>{% endfor %}
    {% if parts.has_next %}<li class="page-item"><a class="page-link" href="{{ url_for('parts.index', page=parts.next_num) }}">&raquo;</a></li>{% endif %}
</ul></nav>
{% endif %}

{% else %}
<div class="text-center py-5 text-muted">
    <i class="bi bi-inbox" style="font-size:3rem;"></i>
    <p class="mt-2">Aucune pièce enregistrée</p>
</div>
{% endif %}
{% endblock %}