{% extends "two_column.html" %}
{% load static %}
{% load i18n %}

{% block page_title %}
InvenTree | {% trans "Supplier Part" %}
{% endblock %}

{% block thumbnail %}
<img class='part-thumb'
{% if part.part.image %}
src='{{ part.part.image.url }}'
{% else %}
src="{% static 'img/blank_image.png' %}"
{% endif %}/>
{% endblock %}

{% block page_data %}
<h3>{% trans "Supplier Part" %}</h3>
<p>{{ part.supplier.name }} - {{ part.SKU }}</p>

{% if roles.purchase_order.change %}
<div class='btn-row'>
    <div class='btn-group action-buttons' role='group'>
        {% if roles.purchase_order.add %}
        <button type='button' class='btn btn-default btn-glyph' id='order-part' title='{% trans "Order part" %}'>
            <span class='fas fa-shopping-cart'></span>
        </button>
        {% endif %}
        <button type='button' class='btn btn-default btn-glyph' id='edit-part' title='{% trans "Edit supplier part" %}'>
            <span class='fas fa-edit icon-green'/>
        </button>
        {% if roles.purchase_order.delete %}
        <button type='button' class='btn btn-default btn-glyph' id='delete-part' title='{% trans "Delete supplier part" %}'>
            <span class='fas fa-trash-alt icon-red'/>
        </button>
        {% endif %}
    </div>
</div>
{% endif %}

{% endblock %}

{% block page_details %}

<h4>{% trans "Supplier Part Details" %}</h4>
<table class="table table-striped table-condensed">
    <col width='25'>
        <tr>
            <td><span class='fas fa-shapes'></span></td>
            <td>{% trans "Internal Part" %}</td>
            <td>
                {% if part.part %}
                <a href="{% url 'part-suppliers' part.part.id %}">{{ part.part.full_name }}</a>
                {% endif %}
            </td>
        </tr>
        {% if part.description %}
        <tr>
            <td></td>
            <td>{% trans "Description" %}</td>
            <td>{{ part.description }}</td>
        </tr>
        {% endif %}
        {% if part.link %}
        <tr>
            <td><span class='fas fa-link'></span></td>
            <td>{% trans "External Link" %}</td>
            <td><a href="{{ part.link }}">{{ part.link }}</a></td>
        </tr>
        {% endif %}
        <tr>
            <td><span class='fas fa-building'></span></td>
            <td>{% trans "Supplier" %}</td>
            <td><a href="{% url 'company-detail-parts' part.supplier.id %}">{{ part.supplier.name }}</a></td></tr>
        <tr>
            <td><span class='fas fa-hashtag'></span></td>
            <td>{% trans "SKU" %}</td>
            <td>{{ part.SKU }}</tr>
        </tr>
        {% if part.manufacturer %}
        <tr>
            <td><span class='fas fa-industry'></span></td>
            <td>{% trans "Manufacturer" %}</td>
            <td><a href="{% url 'company-detail-parts' part.manufacturer.id %}">{{ part.manufacturer.name }}</a></td></tr>
        <tr>
            <td><span class='fas fa-hashtag'></span></td>
            <td>{% trans "MPN" %}</td>
            <td>{{ part.MPN }}</td>
        </tr>
        {% endif %}
        {% if part.note %}
        <tr>
            <td><span class='fas fa-sticky-note'></span></td>
            <td>{% trans "Note" %}</td>
            <td>{{ part.note }}</td>
        </tr>
        {% endif %}
</table>
{% endblock %}

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

$('#order-part, #order-part2').click(function() {
    launchModalForm(
        "{% url 'order-parts' %}",
        {
            data: {
                part: {{ part.part.id }},
            },
            reload: true,
        },
    );
});

$('#edit-part').click(function () {
    launchModalForm(
                    "{% url 'supplier-part-edit' part.id %}",
                    {
                        reload: true
                    }
    );
});

$('#delete-part').click(function() {
    launchModalForm(
        "{% url 'supplier-part-delete' %}?part={{ part.id }}",
        {
            redirect: "{% url 'company-detail-parts' part.supplier.id %}"
        }
    );
});

{% endblock %}