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

{% load static %}

{% block content %}

{% if part.active == False %}
<div class='alert alert-danger alert-block'>
    This part is not active:
</div>
{% endif %}
{% if part.is_template %}
<div class='alert alert-info alert-block'>
    This part is a <i>template part</i>.<br>
    It is not a <i>real</i> part, but real parts can be based on this template.
</div>
{% endif %}
{% if part.variant_of %}
<div class='alert alert-info alert-block'>
    This part is a variant of <b><a href="{% url 'part-detail' part.variant_of.id %}">{{ part.variant_of.full_name }}</a></b>
</div>
{% endif %}

<div class="row">
<div class="col-sm-6">
    <div class="media">
      <div class="media-left">
        <div class='dropzone' id='part-thumb'>
                <img class="part-thumb"
                {% if part.image %}
                src="{{ part.image.url }}"
                {% else %}
                src="{% static 'img/blank_image.png' %}"
                {% endif %}/>
        </div>
      </div>
    <div class="media-body">
        <h4>
            {{ part.full_name }}
        </h4>   
        <p><i>{{ part.description }}</i></p>
        <p>
            <div class='btn-row'>
                <div class='btn-group'>
                    <button type='button' class='btn btn-default btn-glyph' id='toggle-starred' title='Star this part'>
                        <span id='part-star-icon' class='starred-part glyphicon {% if starred %}glyphicon-star{% else %}glyphicon-star-empty{% endif %}'/>
                    </button>
                    {% if part.is_template == False %}
                    {% include "qr_button.html" %}
                    {% if part.active %}
                    <button type='button' class='btn btn-default btn-glyph' id='price-button' title='Show pricing information'>
                        <span id='part-price-icon' class='part-price glyphicon glyphicon-usd'/>
                    </button>
                    {% if not part.virtual %}
                    <button type='button' class='btn btn-default btn-glyph' id='part-count' title='Count part stock'>
                        <span class='glyphicon glyphicon-ok-circle'/>
                    </button>
                    {% endif %}
                    {% if part.purchaseable %}
                    <button type='button' class='btn btn-default btn-glyph' id='part-order' title='Order part'>
                        <span id='part-order-icon' class='part-order glyphicon glyphicon-shopping-cart'/>
                    </button>
                    {% endif %}
                    {% endif %}
                    {% endif %}
                    <button type='button' class='btn btn-default btn-glyph' id='part-duplicate' title='Duplicate part'>
                        <span id='part-duplicate-icon' class='part-duplicate glyphicon glyphicon-duplicate'/>
                    </button>
                    <button type='button' class='btn btn-default btn-glyph' id='part-edit' title='Edit part'>
                        <span id='part-edit-icon' class='glyphicon glyphicon-edit'/>
                    </button>
                    {% if not part.active %}
                    <button type='button' class='btn btn-default btn-glyph' id='part-delete' title='Delete part'>
                        <span id='part-delete-icon' class='glyphicon glyphicon-trash'/>
                    </button>
                    {% endif %}
                </div>
            </div>
        </p>
        <table class='table table-condensed'>
            {% if part.IPN %}
            <tr>
                <td>IPN</td>
                <td>{{ part.IPN }}</td>
            </tr>
            {% endif %}
            {% if part.URL %}
            <tr>
                <td>URL</td>
                <td><a href="{{ part.URL }}">{{ part.URL }}</a></td>
            </tr>
            {% endif %}
            <tr>
            </tr>
        </table>
    </div>
    </div>
</div>
<div class="col-sm-6">
    <table class="table table-striped">
        <tr>
            <td>
                <h4>Available Stock</h4>
            </td>
            <td><h4>{{ part.available_stock }} {{ part.units }}</h4></td>
        </tr>
        <tr>
            <td>In Stock</td>
            <td>{{ part.total_stock }}</td>
        </tr>
        {% if not part.is_template %}
        {% if part.allocation_count > 0 %}
        <tr>
            <td>Allocated</td>
            <td>{{ part.allocation_count }}</td>
        </tr>
        {% endif %}
        {% if part.on_order > 0 %}
        <tr>
            <td>On Order</td>
            <td>{{ part.on_order }}</td>
        </tr>
        {% endif %}
        {% endif %}
        {% if not part.is_template %}
        {% if part.assembly %}
        <tr>
            <td colspan='2'>
                <b>Build Status</b>
            </td>
        </tr>
        <tr>
            <td>Can Build</td>
            <td>{{ part.can_build }}</td>
        </tr>
        {% if part.quantity_being_built > 0 %}
        <tr>
            <td>Underway</td>
            <td>{{ 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' 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-thumb").click(function() {
        launchModalForm(
                        "{% url 'part-image' part.id %}",
                        {
                            reload: true
                        }
                        );
    });

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

    $("#part-order").click(function() {
        launchModalForm("/order/purchase-order/order-parts/", {
            data: {
                part: {{ part.id }},
            },
        });
    });

    $("#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 %}