{% extends 'base.html.twig' %}

{% block title %}Materialien{% endblock %}

{% block body %}
<div class="page-wrapper">
    {% include 'shared/_page_header.html.twig' with {
        title: 'Materialien',
        icon: 'fa-boxes',
        subtitle: 'Verwalten Sie Ihr Materiallager',
        primary_url: path('material_new'),
        primary_label: 'Neues Material'
    } %}

    <div class="table-container">
        <table class="data-table">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Name</th>
                    <th>Komponente</th>
                    <th>Einheit</th>
                    <th>Aktionen</th>
                </tr>
            </thead>
            <tbody>
                {% for material in materialien %}
                    <tr>
                        <td class="table-id">#{{ material.id }}</td>
                        <td class="table-title">{{ material.name }}</td>
                        <td>
                            {% if material.komponente %}
                                <span class="komponente-badge">{{ material.komponente }}</span>
                            {% else %}
                                -
                            {% endif %}
                        </td>
                        <td>{{ material.einheit|default('-') }}</td>
                        <td class="table-actions">
                            <a href="{{ path('material_edit', {id: material.id}) }}" class="btn-icon" title="Bearbeiten">
                                <i class="fas fa-edit"></i>
                            </a>
                            <form method="post" action="{{ path('material_delete', {id: material.id}) }}" class="form-delete-inline">
                                <input type="hidden" name="_token" value="{{ csrf_token('delete' ~ material.id) }}">
                                <button type="submit" class="btn-icon" title="Löschen" data-action="confirm-delete" data-message="Möchten Sie dieses Material wirklich löschen?">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </form>
                        </td>
                    </tr>
                {% else %}
                    <tr>
                        <td colspan="5" class="table-empty">
                            <i class="fas fa-box-open"></i>
                            <p>Keine Materialien gefunden</p>
                        </td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}