{% extends "part/part_app_base.html" %}

{% load static %}
{% load i18n %}
{% load inventree_extras %}

{% block content %}

{% if part.virtual %}
<div class='alert alert-info alert-block'>
    {% trans "This part is a virtual part" %}
</div>
{% endif %}
{% if part.is_template %}
<div class='alert alert-info alert-block'>
    {% trans "This part is a template part." %}
</div>
{% endif %}
{% if part.variant_of %}
<div class='alert alert-info alert-block'>
    {% trans "This part is a variant of" %} <b><a href="{% url 'part-variants' part.variant_of.id %}">{{ part.variant_of.full_name }}</a></b>
</div>
{% endif %}

<div class="row">
<div class="col-sm-6">
    {% include "part/part_thumb.html" %}
    <div class="media-body">
        <h3>
            {{ part.full_name }}
            {% if user.is_staff %}
            <a  href="{% url 'admin:part_part_change' part.pk %}"><span title="{% trans 'Admin view' %}" class='fas fa-user-shield'></span></a>
            {% endif %}
            {% if not part.active %}
            <div class='label label-large label-large-red'>
                {% trans 'Inactive' %}
            </div>
            {% endif %}
        </h3>   
        <p><i>{{ part.description }}</i></p>

        <div class='btn-group action-buttons' role='group'>
            <button type='button' class='btn btn-default' id='toggle-starred' title='{% trans "Star this part" %}'>
                <span id='part-star-icon' class='fas fa-star {% if starred %}icon-yellow{% endif %}'/>
            </button>

            <!-- Barcode actions menu -->
            <div class='btn-group'>
                <button id='barcode-options' title='{% trans "Barcode actions" %}' class='btn btn-default dropdown-toggle' type='button' data-toggle='dropdown'><span class='fas fa-qrcode'></span> <span class='caret'></span></button>
                <ul class='dropdown-menu'>
                    <li><a href='#' id='show-qr-code'><span class='fas fa-qrcode'></span> {% trans "Show QR Code" %}</a></li>
                    <li><a href='#' id='print-label'><span class='fas fa-tag'></span> {% trans "Print Label" %}</a></li>
                </ul>
            </div>
            {% if part.active %}
            <button type='button' class='btn btn-default' id='price-button' title='{% trans "Show pricing information" %}'>
                <span id='part-price-icon' class='fas fa-dollar-sign'/>
            </button>
            <button type='button' class='btn btn-default' id='part-count' title='Count part stock'>
                <span class='fas fa-clipboard-list'/>
            </button>
            {% if part.purchaseable %}
            <button type='button' class='btn btn-default' id='part-order' title='Order part'>
                <span id='part-order-icon' class='fas fa-shopping-cart'/>
            </button>
            {% endif %}
            {% endif %}
            <!-- Part actions -->
            <div class='btn-group'>
                <button id='part-actions' title='{% trans "Part actions" %}' class='btn btn-default dropdown-toggle' type='button' data-toggle='dropdown'> <span class='fas fa-shapes'></span> <span class='caret'></span></button>
                <ul class='dropdown-menu'>
                    <li><a href='#' id='part-duplicate'><span class='fas fa-copy'></span> {% trans "Duplicate part" %}</a></li>
                    <li><a href='#' id='part-edit'><span class='fas fa-edit icon-blue'></span> {% trans "Edit part" %}</a></li>
                    {% if not part.active %}
                    <li><a href='#' id='part-delete'><span class='fas fa-trash-alt icon-red'></span> {% trans "Delete part" %}</a></li>
                    {% endif %}
                </ul>
            </div>
        </div>
        <table class='table table-condensed'>
            <col width='25'>
            {% if part.IPN %}
            <tr>
                <td></td>
                <td>{% trans "IPN" %}</td>
                <td>{{ part.IPN }}</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>
            </tr>
        </table>
    </div>
    </div>
</div>
<div class="col-sm-6">
    <table class="table table-striped">
        <col width='25'>
        <tr>
            <td><span class='fas fa-boxes'></span></td>
            <td>
                <h4>{% trans "Available Stock" %}</h4>
            </td>
            <td><h4>{% decimal part.available_stock %} {{ part.units }}</h4></td>
        </tr>
        <tr>
            <td><span class='fas fa-map-marker-alt'></span></td>
            <td>{% trans "In Stock" %}</td>
            <td>{% include "part/stock_count.html" %}</td>
        </tr>
        {% if not part.is_template %}
        {% if part.build_order_allocation_count > 0 %}
        <tr>
            <td><span class='fas fa-dolly'></span></td>
            <td>{% trans "Allocated to Build Orders" %}</td>
            <td>{% decimal part.build_order_allocation_count %}</td>
        </tr>
        {% endif %}
        {% if part.sales_order_allocation_count > 0 %}
        <tr>
            <td><span class='fas fa-dolly'></span></td>
            <td>{% trans "Allocated to Sales Orders" %}</td>
            <td>{% decimal part.sales_order_allocation_count %}</td>
        </tr>
        {% endif %}
        {% if part.on_order > 0 %}
        <tr>
            <td><span class='fas fa-shopping-cart'></span></td>
            <td>{% trans "On Order" %}</td>
            <td>{% decimal part.on_order %}</td>
        </tr>
        {% endif %}
        {% endif %}
        {% if not part.is_template %}
        {% if part.assembly %}
        <tr>
            <td><span class='fas fa-tools'></span></td>
            <td colspan='2'>
                <b>{% trans "Build Status" %}</b>
            </td>
        </tr>
        <tr>
            <td></td>
            <td>{% trans "Can Build" %}</td>
            <td>{% decimal part.can_build %}</td>
        </tr>
        {% if part.quantity_being_built > 0 %}
        <tr>
            <td></td>
            <td>{% trans "Underway" %}</td>
            <td>{% decimal part.quantity_being_built %}</td>
        </tr>
        {% endif %}
        {% endif %}
    {% endif %}
    </table>
</div>
</div>

<hr>
<div class='container-fluid'>
{% block details %}

<!-- Specific part details go here... -->

{% endblock %}
</div>

{% endblock %}

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

    enableDragAndDrop(
        '#part-thumb',
        "{% url 'part-image-upload' part.id %}",
        {
            label: 'image',
            success: function(data, status, xhr) {
                location.reload();
            }
        }
    );

    $("#show-qr-code").click(function() {
        launchModalForm(
            "{% url 'part-qr' part.id %}",
            {
                no_post: true,
            }
        );
    });

    $("#part-count").click(function() {
        launchModalForm("/stock/adjust/", {
            data: {
                action: "count",
                part: {{ part.id }},
            },
            reload: true,
        });
    });

    $("#price-button").click(function() {
        launchModalForm(
            "{% url 'part-pricing' part.id %}",
            {
                submit_text: 'Calculate',
            }
        );
    });

    $("#toggle-starred").click(function() {
        toggleStar({
            part: {{ part.id }},
            user: {{ user.id }},
            button: '#part-star-icon'
        });
    });

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


    function onSelectImage(response) {
        // Callback when the image-selection modal form is displayed
        // Populate the form with image data (requested via AJAX)
        
        $("#modal-form").find("#image-select-table").bootstrapTable({
            pagination: true,
            pageSize: 25,
            url: "{% url 'api-part-thumbs' %}",
            showHeader: false,
            clickToSelect: true,
            singleSelect: true,
            columns: [
                {
                    checkbox: true,
                },
                {
                    field: 'image',
                    title: 'Image',
                    formatter: function(value, row, index, field) {
                        return "<img src='/media/" + value + "' class='grid-image'/>"
                    }
                }
            ],
            onCheck: function(row, element) {

                // Update the selected image in the form
                var ipt = $("#modal-form").find("#image-input");
                ipt.val(row.image);

            }
        });
    }

    $("#part-image-select").click(function() {
        launchModalForm("{% url 'part-image-select' part.id %}",
                        {
                            reload: true,
                            after_render: onSelectImage
                        });
    });

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

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

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

    {% if not part.active %}
    $("#part-delete").click(function() {
        launchModalForm(
            "{% url 'part-delete' part.id %}",
            {
                redirect: {% if part.category %}"{% url 'category-detail' part.category.id %}"{% else %}"{% url 'part-index' %}"{% endif %}
            }
        );
    });
    {% endif %}

{% endblock %}