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

{% load static %}

{% block content %}

<div class="row">
    {% if part.active == False %}
    <div class='alert alert-danger' style='display: block;'>
        This part ({{ part.full_name }}) is not active:
    </div>
    {% endif %}
<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>   
        {% if part.variant %}
        <p>Variant: {{ part.variant }}</p>
        {% endif %}
        <p><i>{{ part.description }}</i></p>
        <p>
            <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>
                {% include "qr_button.html" %}
                <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>
            </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">
    <h4>Stock Status - {{ part.available_stock }}{% if part.units %} {{ part.units }} {% endif%} available</h4>
    <table class="table table-striped">
        <tr>
            <td>In Stock</td>
            <td>{{ part.total_stock }}</td>
        </tr>
        {% if part.buildable %}
        <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 %}
        {% if part.allocation_count > 0 %}
        <tr>
            <td>Allocated</td>
            <td>{{ part.allocation_count }}</td>
        </tr>
        {% endif %}
    </table>
</div>
</div>

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

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

{% endblock %}
</div>

{% include 'modals.html' %}

{% 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,
            }
        );
    });

    $("#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'
        });
    });

    $('#toggle-starred').click(function() {
    });

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

{% endblock %}