{% extends "AdminPages/EntityAdminBase.html.twig" %}

{% block card_title %}
    <i class="fas fa-archive fa-fw"></i> {% trans %}device.caption{% endtrans %}
{% endblock %}

{% block edit_title %}
    {% trans %}device.edit{% endtrans %}: {{ entity.name }}
{% endblock %}

{% block new_title %}
    {% trans %}device.new{% endtrans %}
{% endblock %}

{% block additional_pills %}
    <li class="nav-item"><a data-bs-toggle="tab" class="nav-link link-anchor" href="#bom">BOM</a></li>
{% endblock %}

{% block additional_controls %}
    {{ form_row(form.description) }}
{% endblock %}

{% block additional_panes %}
    <div class="tab-pane" id="bom">
        {% form_theme form.bom_entries with ['Form/collection_types_layout.html.twig'] %}

        {% import 'components/collection_type.macro.html.twig' as collection %}
        <div {{ collection.controller(form.bom_entries, 'project.bom.delete.confirm') }}>
            <table class="table table-striped table-bordered table-sm" {{ collection.target() }}>
                <thead>
                    <tr>
                        <th></th> {#  expand button #}
                        <th>{% trans %}project.bom.quantity{% endtrans %}</th>
                        <th>{% trans %}project.bom.part{% endtrans %}</th>
                        <th>{% trans %}project.bom.name{% endtrans %}</th>
                        <th></th> {# Remove button #}
                    </tr>
                </thead>

                <tbody>
                {% for entry in form.bom_entries %}
                    {{ form_widget(entry) }}
                {% endfor %}
                </tbody>
            </table>

            <button type="button" class="btn btn-success mb-2" {{ collection.create_btn() }}>
                <i class="fas fa-plus-square fa-fw"></i>
                {% trans %}project.bom.add_entry{% endtrans %}
            </button>
        </div>
    </div>
{% endblock %}