{% extends 'bom/bom-base.html' %}

{% load static %}
{% load djmoney %}

{% block head-title %}{{ part.full_part_number }}{% if part_revision %} {{ part_revision.synopsis }}{% endif %}{% endblock %}

{% block head %}
    <link rel="stylesheet" type="text/css" href="{% static 'bom/css/part-info.css' %}"/>
{% endblock %}

{% block content %}
    <div class="container-app">
        <div class="row" style="margin-bottom: 5px;">
            <div class="col m8 hide-on-small-and-down">
                <div class="header-title-row">
                    <h3 class="light">Vendor / {{ seller.name }}</h3>
                    <span class="chip
                        {% if seller.approval_status == 'A' %}teal darken-2 white-text
                        {% elif seller.approval_status == 'R' %}red darken-1 white-text
                        {% else %}grey lighten-2 grey-text text-darken-2
                        {% endif %}">
                        {{ seller.get_approval_status_display|default:'Probation / Unassessed' }}
                    </span>
                </div>
                <a href="{% url 'bom:sellers' %}">Back to Vendors</a>
            </div>
        </div>
        <div class="col {% if seller %}m3 s1{% else %}m3 s12{% endif %}">
            {% if profile.role == 'A' and seller %}
                <div style="margin-top: 1.5rem;">
                    <!-- Dropdown Trigger -->
                    <button class='dropdown-trigger hide-on-small-and-down waves-effect waves-light btn-flat'
                            href='#' data-target='dropdown-revision'><i class="material-icons right">arrow_drop_down</i>Manage
                    </button>
                    <a class='dropdown-trigger hide-on-med-and-up' href='#' data-target='dropdown-revision'><i
                            class="material-icons green-text text-lighten-1">more_vert</i></a>
                    <!-- Dropdown Structure -->
                    <ul id='dropdown-revision' class='dropdown-content'>
                        <li>
                            <a class="green-text text-lighten-1"
                               href="{% url 'bom:seller-edit' seller_id=seller.id %}">
                                <i class="material-icons green-text text-lighten-1">edit</i>Edit</a>
                        </li>
                        <li class="divider" tabindex="-1"></li>
                        <li>
                            <a class="red-text text-lighten-1" onclick="deleteSeller()">
                                <i class="material-icons red-text text-lighten-1">delete</i>Delete</a>
                        </li>
                    </ul>
                </div>
            {% endif %}
        </div>

        {% include 'bom/components/seller-part-list.html' with seller_parts=seller_parts profile=profile %}
    </div>
{% endblock %}

{% block bom-script %}
<script>
    function deleteSeller() {
        {% if seller is not None %}
            let url = "{% url 'bom:seller-delete' seller_id=seller.id %}";
            if (confirm("Warning! Are you sure you want to delete this Vendor?\n\n{{ seller_parts.count }} of its Vendor parts will also be permanently deleted.")) {
                window.location.href = url;
            }
        {% else %}
            confirm("No Vendor to delete!");
        {% endif %}
    }
</script>

    <!-- Handle if there's an anchor, select tab -->
<script type='text/javascript'>
    // For dropdown menu
    $(document).ready(function () {
        $('.dropdown-trigger').dropdown({
                inDuration: 300,
                outDuration: 225,
                constrainWidth: false, // Does not change width of dropdown to that of the activator
                hover: false, // Activate on hover
                gutter: 0, // Spacing from edge
                alignment: 'left', // Displays dropdown with edge aligned to the left of button
                stopPropagation: false, // Stops event propagation
                coverTrigger: false
            }
        );
    });
</script>
{% endblock %}