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

{% load static %}
{% load materializecss %}

{% block head-title %}{{ title }}{% endblock %}

{% block main %}
    {{ add_subpart_form.media }}
{% endblock %}

{% block bom-menu %}
{% endblock %}

{% block content %}
    <div class="container-app">
        {% if profile.role == 'A' %}
            <div class="upload-bom">
                <p>Click here to download <a href="{% static 'bom/doc/test_bom_5_intelligent.csv' %}">a sample CSV file for uploading intelligent
                parts</a> and here is <a href="{% static 'bom/doc/test_bom.csv' %}">a sample CSV file for uploading semi-intelligent parts</a>. Uploading uses
                an append or create strategy, for example, if a part, part revision, or part class already exists, it will be overwritten; and
                    if a part, part revision, or part class <b>does not</b> exist, it will be created.</p>
                <p>For details on CSV file requirements, see the help docs <a href="{% url 'bom:help' %}#uploading-parts" target="_blank">here   <i class="material-icons" style="font-size: 1em;">open_in_new</i></a>.</p>

                <form action="{% url 'bom:upload-bom' %}" method="post" enctype="multipart/form-data">
                    {% csrf_token %}
                    <div class="row">
                        <div class="col s9 file-field input-field">
                            <div class="green lighten-1 btn">
                                <span>File</span>
                                {{ bom_csv_form.file }}
                            </div>
                            <div class="file-path-wrapper">
                                <input class="file-path validate" type="text" placeholder="Upload a file.">
                                {{ bom_csv_form.file.errors }}
                            </div>
                        </div>
                        <div class="col s1 input-field">
                            <input class="green lighten-1 btn" type="submit" value="Upload"/>
                        </div>
                    </div>
{#                    <div class="row">#}
{#                        {{ upload_bom_form.create_part_classes|materializecss:'m3 s12' }}#}
{#                        <div class="col m6 s12">#}
{#                            If a part is uploaded with a part class that doesn't exist, the upload will fail. Check this box to instead, try to create the part class.#}
{#                        </div>#}
{#                    </div>#}
                    <div class="row">
                        {{ upload_bom_form.parent_part_number|materializecss:'m3 s12' }}
                        <div class="col m6 s12 input-field">
                            <b>{{upload_bom_form.parent_part_number.label}}</b> <i>Optional.</i> Upload this BOM to a parent assembly by specifying the parent part number. Level 1 will upload as the first child of this part.
                            {% if parent_part %}
                                <br><h6><a href="{% url 'bom:part-info' part_id=parent_part.id %}">Go to {{ parent_part_number }}</a></h6>
                            {% endif %}
                        </div>
                    </div>
                </form>
                <div class="row">
                    <div class="col s6">
                        <a href="{% url 'bom:upload-bom' %}" class="waves-effect waves-light btn-flat grey-text lighten-1" style="margin-left: -16px;">Cancel</a>
                    </div>
                </div>
                <br>
            </div>
        {% else %}
            {% include 'bom/nothing-to-see.html' with required_privilege='Admin' %}
        {% endif %}
    </div>
{% endblock %}

{% block bom-script %}
    <!-- 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>

    <!-- Floating Horizontal Scrollbar -->
    <script type="text/javascript" src="{% static 'bom/js/jquery.ba-floatingscrollbar.min.js' %}"></script>
    <script>
        $(function () {
            $('.responsive-table-wrapper').floatingScrollbar();
        });
    </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
                    belowOrigin: false, // Displays dropdown below the button
                    alignment: 'left', // Displays dropdown with edge aligned to the left of button
                    stopPropagation: false // Stops event propagation
                }
            );

        });
    </script>
{% endblock %}