{% extends "base.html" %}
{% from "components/ui.html" import page_header %}

{% block content %}
{% set breadcrumbs = [
    {'text': 'Inventory', 'url': url_for('inventory.list_stock_items')},
    {'text': 'Suppliers'}
] %}

{{ page_header(
    icon_class='fas fa-truck',
    title_text='Suppliers',
    subtitle_text='Manage suppliers and vendors',
    breadcrumbs=breadcrumbs,
    actions_html='<a href="' + url_for("inventory.new_supplier") + '" class="bg-primary text-white px-4 py-2 rounded-lg hover:bg-primary/90 transition-colors"><i class="fas fa-plus mr-2"></i>Create Supplier</a>' if (current_user.is_admin or has_permission('manage_suppliers')) else None
) }}

<div class="bg-card-light dark:bg-card-dark p-6 rounded-xl border border-border-light dark:border-border-dark shadow-sm mb-6">
    <form method="GET" class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div>
            <label for="suppliers-filter-search" class="form-label">{{ _('Search') }}</label>
            <input type="text" name="search" id="suppliers-filter-search" value="{{ search }}" placeholder="{{ _('Code, name, email') }}" class="form-input">
        </div>
        <div>
            <label for="active" class="form-label">{{ _('Status') }}</label>
            <select name="active" id="active" class="form-input">
                <option value="true" {% if active_only %}selected{% endif %}>{{ _('Active Only') }}</option>
                <option value="false" {% if not active_only %}selected{% endif %}>{{ _('All') }}</option>
            </select>
        </div>
        <div class="flex items-end">
            <button type="submit" class="bg-primary text-white px-4 py-2 rounded-lg hover:bg-primary/90 transition-colors w-full">{{ _('Filter') }}</button>
        </div>
    </form>
</div>

<div class="bg-card-light dark:bg-card-dark p-6 rounded-xl border border-border-light dark:border-border-dark shadow-sm overflow-x-auto">
    <table class="table table-zebra w-full text-left enhanced-table responsive-cards">
        <thead class="bg-background-light dark:bg-background-dark">
            <tr>
                <th class="px-4 py-3">{{ _('Code') }}</th>
                <th class="px-4 py-3">{{ _('Name') }}</th>
                <th class="px-4 py-3">{{ _('Contact Person') }}</th>
                <th class="px-4 py-3">{{ _('Email') }}</th>
                <th class="px-4 py-3">{{ _('Phone') }}</th>
                <th class="px-4 py-3">{{ _('Status') }}</th>
                <th class="px-4 py-3">{{ _('Actions') }}</th>
            </tr>
        </thead>
        <tbody>
            {% for supplier in suppliers %}
            <tr>
                <td class="p-4 font-mono text-sm" data-label="{{ _('Code') }}">{{ supplier.code }}</td>
                <td class="p-4 font-medium mobile-card-header" data-label="{{ _('Name') }}">
                    <a href="{{ url_for('inventory.view_supplier', supplier_id=supplier.id) }}" class="text-primary hover:underline">
                        {{ supplier.name }}
                    </a>
                </td>
                <td class="p-4" data-label="{{ _('Contact Person') }}">{{ supplier.contact_person or '—' }}</td>
                <td class="p-4" data-label="{{ _('Email') }}">
                    {% if supplier.email %}
                        <a href="mailto:{{ supplier.email }}" class="text-primary hover:underline">{{ supplier.email }}</a>
                    {% else %}
                        —
                    {% endif %}
                </td>
                <td class="p-4" data-label="{{ _('Phone') }}">
                    {% if supplier.phone %}
                        <a href="tel:{{ supplier.phone }}" class="text-primary hover:underline">{{ supplier.phone }}</a>
                    {% else %}
                        —
                    {% endif %}
                </td>
                <td class="p-4" data-label="{{ _('Status') }}">
                    {% if supplier.is_active %}
                        <span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">{{ _('Active') }}</span>
                    {% else %}
                        <span class="px-2 py-1 text-xs rounded-full bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300">{{ _('Inactive') }}</span>
                    {% endif %}
                </td>
                <td class="p-4 mobile-actions" data-label="{{ _('Actions') }}">
                    <a href="{{ url_for('inventory.view_supplier', supplier_id=supplier.id) }}" class="text-primary hover:underline mr-3">
                        <i class="fas fa-eye"></i>
                    </a>
                    {% if current_user.is_admin or has_permission('manage_suppliers') %}
                    <a href="{{ url_for('inventory.edit_supplier', supplier_id=supplier.id) }}" class="text-primary hover:underline">
                        <i class="fas fa-edit"></i>
                    </a>
                    {% endif %}
                </td>
            </tr>
            {% else %}
            <tr>
                <td colspan="7" class="p-8 text-center text-gray-500">
                    {{ _('No suppliers found.') }}
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% endblock %}

