{% extends "part/part_base.html" %}
{% load static %}
{% load i18n %}
{% load inventree_extras %}

{% block details %}
{% include "part/tabs.html" with tab="bom" %}
<h4>{% trans "Upload Bill of Materials" %}</h4>

<p>{% trans "Step 3 - Select Parts" %}</p>
<hr>

{% if form_errors %}
<div class='alert alert-danger alert-block' role='alert'>
    {% trans "Errors exist in the submitted data" %}
</div>
{% endif %}

<form method="post" action='' class='js-modal-form' enctype="multipart/form-data">

    <button type="submit" class="save btn btn-default">{% trans "Submit BOM" %}</button>

    {% csrf_token %}
    {% load crispy_forms_tags %}

    <input type='hidden' name='form_step' value='select_parts'/>

    <table class='table table-striped'>
        <thead>
            <tr>
                <th></th>
                <th></th>
                <th>{% trans "Row" %}</th>
                <th>{% trans "Select Part" %}</th>
                {% for col in bom_columns %}
                <th>
                    <input type='hidden' name='col_name_{{ forloop.counter0 }}' value='{{ col.name }}'/>
                    <input type='hidden' name='col_guess_{{ forloop.counter0 }}' value='{{ col.guess }}'/>
                    {% if col.guess %}
                    {{ col.guess }}
                    {% else %}
                    {{ col.name }}
                    {% endif %}
                </th>
                {% endfor %}
            </tr>
        </thead>
        <tbody>
            {% for row in bom_rows %}
            <tr {% if row.errors %} style='background: #ffeaea;'{% endif %} part-name='{{ row.part_name }}' part-description='{{ row.description }}' part-select='#select_part_{{ row.index }}'>
                <td>
                    <button class='btn btn-default btn-remove' onClick='removeRowFromBomWizard()' id='del_row_{{ forloop.counter }}' style='display: inline; float: right;' title='Remove row'>
                            <span row_id='{{ forloop.counter }}' class='fas fa-trash-alt icon-red'></span>
                    </button>
                </td>
                <td></td>
                <td>{% add row.index 1 %}</td>
                <td>
                    <button class='btn btn-default btn-create'  onClick='newPartFromBomWizard()' id='new_part_row_{{ row.index }}' title='Create new part' type='button'>
                        <span row_id='{{ row.index }}' class='fas fa-plus icon-green'/>
                    </button>
                    <select class='select bomselect' id='select_part_{{ row.index }}' name='part_{{ row.index }}'>
                        <option value=''>--- {% trans "Select Part" %} ---</option>
                        {% for part in row.part_options %}
                        <option value='{{ part.id }}' {% if part.id == row.part.id %} selected='selected' {% elif part.id == row.part_match.id %} selected='selected' {% endif %}>
                            {{ part }} - {{ part.available_stock }}
                        </option>
                        {% endfor %}
                    </select>
                    {% if row.errors.part %}
                    <p class='help-inline'>{{ row.errors.part }}</p>
                    {% endif %}
                </td>
                {% for item in row.data %}
                <td>
                    {% if item.column.guess == 'Part' %}
                    <i>{{ item.cell }}</i>
                    {% if row.errors.part %}
                    <p class='help-inline'>{{ row.errors.part }}</p>
                    {% endif %}
                    {% elif item.column.guess == 'Quantity' %}
                    <input name='quantity_{{ row.index }}' class='numberinput' type='number' min='1' step='any' value='{% decimal row.quantity %}'/>
                    {% if row.errors.quantity %}
                    <p class='help-inline'>{{ row.errors.quantity }}</p>
                    {% endif %}
                    {% elif item.column.guess == 'Reference' %}
                    <input name='reference_{{ row.index }}' value='{{ row.reference }}'/>
                    {% elif item.column.guess == 'Note' %}
                    <input name='notes_{{ row.index }}' value='{{ row.notes }}'/>
                    {% elif item.column.guess == 'Overage' %}
                    <input name='overage_{{ row.index }}' value='{{ row.overage }}'/>
                    {% else %}
                    {{ item.cell }}
                    {% endif %}
                    <input type='hidden' name='row_{{ row.index }}_col_{{ forloop.counter0 }}' value='{{ item.cell }}'/>
                </td>
                {% endfor %}
            </tr>
            {% endfor %}
        </tbody>
    </table>

</form>

{% endblock %}

{% block js_ready %}
{{ block.super }}

$('.bomselect').select2({
    dropdownAutoWidth: true,
    matcher: partialMatcher,
});

{% endblock %}