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

{% block details %}

{% include 'part/tabs.html' with tab='related-parts' %}

<h4>{% trans "Related Parts" %}</h4>
<hr>

<div id='button-bar'>
    <div class='button-toolbar container-fluid' style='float: left;'>
        {% if roles.part.change %}
        <button class='btn btn-primary' type='button' id='add-related-part' title='{% trans "Add Related" %}'>{% trans "Add Related" %}</button>
        <div class='filter-list' id='filter-list-related'>
            <!-- An empty div in which the filter list will be constructed -->
        </div>
        {% endif %}
    </div>
</div>

<table id='table-related-part' class='table table-condensed table-striped' data-toolbar='#button-toolbar'>
    <thead>
        <tr>
            <th data-field='part' data-serachable='true'>{% trans "Part" %}</th>
        </tr>
    </thead>
    <tbody>
        {% for item in part.get_related_parts %}
        {% with part_related=item.0 part=item.1 %}
            <tr>
                <td>
                    <a class='hover-icon'>
                        <img class='hover-img-thumb' src='{{ part.get_thumbnail_url }}'>
                        <img class='hover-img-large' src='{{ part.get_thumbnail_url }}'>
                    </a>
                    <a href='/part/{{ part.id }}/'>{{ part }}</a>
                    <div class='btn-group' style='float: right;'>
                        {% if roles.part.change %}
                        <button title='{% trans "Delete" %}' class='btn btn-default btn-glyph delete-related-part' url="{% url 'part-related-delete' part_related.id %}" type='button'><span class='fas fa-trash-alt icon-red'/></button>
                        {% endif %}
                    </div>
                </td>
            </tr>
        {% endwith %}
        {% endfor %}
    </tbody>
</table>


{% endblock %}

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

    $('#table-related-part').inventreeTable({
    });

    $("#add-related-part").click(function() {
        launchModalForm("{% url 'part-related-create' %}", {
            data: {
                part: {{ part.id }},
            },
            reload: true,
        });
    });

    $('.delete-related-part').click(function() {
        var button = $(this);

        launchModalForm(button.attr('url'), {
            reload: true,
        });
    });

{% endblock %}