{% extends "base.html" %}

{% block content %}
<h1>🚚 Управление поставщиками</h1>

<div style="background: #FDF5E6; padding: 1rem; margin-bottom: 2rem; border-radius: 10px;">
    <h3>➕ Добавить поставщика</h3>
    <form method="POST">
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.5rem;">
            <input type="text" name="name" placeholder="Название" required style="padding: 0.5rem;">
            <input type="text" name="contact" placeholder="Контактное лицо" style="padding: 0.5rem;">
            <input type="text" name="phone" placeholder="Телефон" style="padding: 0.5rem;">
            <button type="submit" style="background: #CD853F; color: white; padding: 0.5rem;">Добавить</button>
        </div>
        <small style="color: #666; display: block; margin-top: 0.5rem;">
            📞 Форматы телефона: +7 (999) 123-45-67, 8-999-123-45-67, 9991234567
        </small>
    </form>
</div>

<div class="suppliers-grid">
    {% for supplier in suppliers %}
    <div class="supplier-card">
        <h3>{{ supplier.name }}</h3>
        <p>📧 {{ supplier.contact }}</p>
        <p>📞 {{ supplier.phone }}</p>
        <div style="margin-top: 0.5rem; display: flex; gap: 0.5rem; justify-content: center;">
            <a href="/suppliers/edit/{{ supplier.id }}" style="background: #2196F3; color: white; padding: 0.3rem 0.8rem; text-decoration: none; border-radius: 5px;">✏️ Редактировать</a>
            <a href="/supplier/orders/{{ supplier.id }}" style="background: #4CAF50; color: white; padding: 0.3rem 0.8rem; text-decoration: none; border-radius: 5px;">📋 Заказы</a>
        </div>
    </div>
    {% endfor %}
</div>

<style>
.suppliers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-top: 1rem;
}
.supplier-card {
    background: #FDF5E6;
    padding: 1rem;
    border-radius: 10px;
    border: 1px solid #CD853F;
    text-align: center;
}
.supplier-card h3 {
    color: #CD853F;
    margin-bottom: 0.5rem;
}
</style>
{% endblock %}