{# To include this widget, make sure to pass: `parts`, `order_by`, `part`, `part_revision`, `profile` variables  - TODO Could remove part if we pass part revision #}
{% load staticfiles %}
<div class="row" style="padding-top: 16px;">
    <div class="col s6">
        {% if order_by == 'indented' %}
            <button href="#" class="waves-effect waves-green grey lighten-4 btn-flat"
                    onclick="jQuery('#indented-bom').treetable('expandAll'); return false;">Expand
            </button>{% endif %}
        {% if order_by == 'indented' %}
            <button href="#" class="waves-effect waves-green grey lighten-4 btn-flat"
                    onclick="jQuery('#indented-bom').treetable('collapseAll'); return false;">Collapse
            </button>{% endif %}
    </div>
    <div class="col s6 right-align">
        {% if manage and profile.role == 'A' %}
            <a class="waves-effect waves-green grey lighten-4 btn-flat red-text"
               href="{% url 'bom:part-remove-all-subparts' part_id=part.id part_revision_id=part_revision_id %}"
               onclick="return confirm('Are you sure you want to remove ALL subparts from {{ part.full_part_number }}?')">Remove All Subparts
            </a>
        {% else %}
            <!-- Dropdown Trigger -->
            <button class="dropdown-trigger waves-effect waves-green grey lighten-4 btn-flat" href='#' data-target='manage-bom-{{ part.id }}'>
                <i class="material-icons right">arrow_drop_down</i>Manage
            </button>
            <!-- Dropdown Structure -->
            <ul id='manage-bom-{{ part.id }}' class='dropdown-content'>
                {% if profile.role == 'A' and part_revision.configuration == 'W' %}
                    <li><a class="green-text text-lighten-1" href="{% url 'bom:part-manage-bom' part_id=part.id part_revision_id=part_revision.id %}">
                        <i class="material-icons green-text text-lighten-1">edit</i>Edit BOM</a>
                    </li>
                {% endif %}
                {% if part_revision %}
                    <li><a class="green-text text-lighten-1" href="{% url 'bom:part-revision-export-bom' part_revision_id=part_revision.id %}">
                        <i class="material-icons green-text text-lighten-1">cloud_download</i>Download CSV (indented)</a>
                    </li>
                    <li><a class="green-text text-lighten-1" href="{% url 'bom:part-revision-export-bom-flat' part_revision_id=part_revision.id %}">
                        <i class="material-icons green-text text-lighten-1">cloud_download</i>Download CSV (flat)</a>
                    </li>
                {% else %}
                    <li><a class="green-text text-lighten-1 disabled" href=""><i class="material-icons green-text text-lighten-1">cloud_download</i>Download CSV</a></li>
                {% endif %}
            </ul>
        {% endif %}
    </div>
</div>
<div class="responsive-table-wrapper">
    <table id="indented-bom" class="highlight part-list tight single-line">
        <thead>
        <tr>
            <th class="text-normal"><a href="?order_by=indented">Level</a></th>
            <th class="text-normal">Part No.</th>
            <th class="text-normal">Qty</th>
            <th class="text-normal">Reference</th>
            <th class="text-normal">do_not_load</th>
            <th class="text-normal">Synopsis</th>
            <th class="text-normal">Rev</th>
            <th class="text-normal">Manufacturer</th>
            <th class="text-normal">MPN</th>
            <!-- <th class="text-normal"><i>Ext. Qty</i></th> -->
            <!-- <th class="text-normal"><i>Order Qty</i></th> -->
            <th class="text-normal">Seller</th>
            <th class="text-normal"><a href="?order_by=seller_price">Price</a></th>
            <!-- <th class="text-normal"><i>Ext Cost</i></th> -->
            <th class="text-normal"><a href="?order_by=seller_nre">NRE</a></th>
            {% if profile.role == 'A' and manage %}
                <th>Manage</th>
            {% endif %}
        </tr>
        </thead>
        {% for subpart in parts %}
            <tr data-tt-id="{{ subpart.id }}"
                {% if subpart.parent_id %}data-tt-parent-id="{{ subpart.parent_id }}"{% endif %}>
                <td class="text-normal">{{ subpart.indent_level }}</td>
                <td class="text-normal"><a href="{% url 'bom:part-info' part_id=subpart.part.id %}">{{ subpart.part.full_part_number }}</a></td>
                <td class="text-normal">{{ subpart.quantity }}</td>
                <td class="text-normal">{{ subpart.reference | default:"-" }}</td>
                <td class="text-normal">{{ subpart.do_not_load | default:"-" }}</td>
                <td class="text-normal">{{ subpart.part_revision.synopsis }}</td>
                <td class="text-normal">{{ subpart.part_revision.revision }}</td>
                <td class="text-normal">{{ subpart.part.primary_manufacturer_part.manufacturer.name }}
                    {% if subpart.part.manufacturer_parts.count > 1 %}
                        <i>(+{{ subpart.part.manufacturer_parts.count }})</i>{% endif %}</td>
                <td class="text-normal">{{ subpart.part.primary_manufacturer_part.manufacturer_part_number }}</td>
                <!-- <td class="text-normal">{{ subpart.extended_quantity }}</td> -->
                <!-- <td class="text-normal">{{ subpart.order_quantity }}</td> -->
                <td class="text-normal">{% if subpart.seller_part.data_source == 'octopart' %}
                    <img title="Seller via Octopart." style="width: 16px; vertical-align: middle;"
                         src="{% static 'bom/img/octopart_blue.svg' %}">{% endif %}{{ subpart.seller_part.seller.name | default:"-" }}</td>
                <td class="text-normal">{{ subpart.seller_price | default:"-" }}</td>
                <!-- <td class="text-normal">{{ subpart.extended_cost | default:"-" }}</td> -->
                <td class="text-normal">{{ subpart.seller_nre | default:"-" }}</td>
                {% if subpart.indent_level == 1 and subpart.subpart is not None and manage %}
                    <td>
                        <a class='dropdown-trigger' href='#'
                           data-target='dropdown{{ subpart.subpart.id }}'><i class="material-icons left green-text">more_horiz</i></a>
                        <!-- Dropdown Structure -->
                        <ul id='dropdown{{ subpart.subpart.id }}' class='dropdown-content'>
                            <li><a class="green-text text-lighten-1"
                                   href="{% url 'bom:part-edit-subpart' part_id=part.id part_revision_id=part_revision_id subpart_id=subpart.subpart.id %}"><i
                                    class="material-icons green-text text-lighten-1">edit</i>Edit or Change
                                Rev</a>
                            <li class="divider" tabindex="-1"></li>
                            <li><a class="red-text text-lighten-1"
                                   href="{% url 'bom:part-remove-subpart' part_id=part.id part_revision_id=part_revision.id subpart_id=subpart.subpart.id %}"
                                   onclick="return confirm('Are you sure you want to remove {{ subpart.part.full_part_number }}?')"><i
                                    class="material-icons red-text text-lighten-1">delete_forever</i>Remove</a>
                            </li>
                        </ul>
                    </td>
                {% else %}
                    <td></td>
                {% endif %}
            </tr>
        {% empty %}
            <tr>
                <td colspan="99" style="text-align: center; height: 20vh;"><i>This part does not contain any other parts.</i></td>
            </tr>
        {% endfor %}
    </table>
</div>

{% if order_by == 'indented' %}
    <!-- Tree Table -->
    <script src="{% static 'bom/js/jquery.treetable.js' %}"></script>
    <script>
        $("#indented-bom").treetable({
            expandable: true,
            indent: 2,
            initialState: 'collapsed',
            onInitialized: function () {
                $("#indented-bom").treetable("reveal", {{ part_revision.id }});
            }
        });
    </script>
{% endif %}