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

{% block content %}

<div class='row'>
    <div class='col-sm-6'>
        {% if category %}
        <h3>{{ category.name }}</h3>
        <p>{{ category.description }}</p>
        {% if category.default_location %}
        <p>Default Location: <a href="{% url 'stock-location-detail' category.default-location.id }%">{{ category.default_location }}</a></p>
        {% endif %}
        {% else %}
        <h3>Part Categories</h3>
        <p>All parts</p>
        {% endif %}
        <p>
            <div class='btn-group'>
                <button class='btn btn-default btn-glyph' id='cat-create' title='Create new part category'>
                    <span class='glyphicon glyphicon-plus'/>
                </button>
                {% if category %}
                <button class='btn btn-default btn-glyph' id='cat-edit' title='Edit part category'>
                    <span class='glyphicon glyphicon-edit'/>
                </button>
                <button class='btn btn-default btn-glyph' id='cat-delete' title='Delete part category'>
                    <span class='glyphicon glyphicon-trash'/>
                </button>
                {% endif %}
            </div>
        </p>
    </div>
    <div class='col-sm-6'>
    </div>
</div>

{% if category and category.children.all|length > 0 %}
{% include "part/subcategories.html" with children=category.children.all collapse_id="children"%}
{% elif children|length > 0 %}
{% include "part/subcategories.html" with children=children %}
{% endif %}
<hr>

<div id='button-toolbar'>
    <div class='button-toolbar container-fluid' style="float: right;">
        <button class='btn btn-success' id='part-create'>New Part</button>
        <div class='dropdown' style='float: right;'>
            <button id='part-options' class='btn btn-primary dropdown-toggle' type='button' data-toggle="dropdown">Options<span class='caret'></span></button>
            <ul class='dropdown-menu'>
                <li><a href='#' id='multi-part-order' title='Order parts'>Order Parts</a></li>
                <li><a href='#' id='multi-part-export' title='Export'>Export Data</a></li>
            </ul>
        </div>
    </div>
</div>

<table class='table table-striped table-condensed' data-toolbar='#button-toolbar' id='part-table'>
</table>

{% endblock %}
{% block js_load %}
{{ block.super }}
{% endblock %}
{% block js_ready %}
{{ block.super }}

    $("#cat-create").click(function() {
        launchModalForm(
                        "{% url 'category-create' %}",
                        {
                            follow: true,
                            {% if category %}
                            data: {
                                category: {{ category.id }}
                            },
                            {% endif %}
                            secondary: [
                                {
                                    field: 'default_location',
                                    label: 'New Location',
                                    title: 'Create new location',
                                    url: "{% url 'stock-location-create' %}",
                                },
                                {
                                    field: 'parent',
                                    label: 'New Category',
                                    title: 'Create new category',
                                    url: "{% url 'category-create' %}",
                                },
                            ]
                        });
    })

    $("#part-create").click(function() {
        launchModalForm(
            "{% url 'part-create' %}",
            {
                follow: true,
                data: {
                {% if category %}
                    category: {{ category.id }}
                {% endif %}
                },
                secondary: [
                    {
                        field: 'category',
                        label: 'New Category',
                        title: 'Create new Part Category',
                        url: "{% url 'category-create' %}",
                    },
                    {
                        field: 'default_location',
                        label: 'New Location',
                        title: 'Create new Stock Location',
                        url: "{% url 'stock-location-create' %}",
                    }
                ]   
            }
        );
    });

    {% if category %}
    $("#cat-edit").click(function () {
        launchModalForm(
                        "{% url 'category-edit' category.id %}",
                        {
                            reload: true
                        },
                       );
        return false;
    });

    {% if category.parent %}
    var redirect = "{% url 'category-detail' category.parent.id %}";
    {% else %}
    var redirect = "{% url 'part-index' %}";
    {% endif %}

    $('#cat-delete').click(function() {
        launchModalForm("{% url 'category-delete' category.id %}",
                         {
                             redirect: redirect
                         });
    });

    {% endif %}

    loadPartTable(
        "#part-table",
        "{% url 'api-part-list' %}",
        {
            query: {
                {% if category %}
                category: {{ category.id }},
                {% endif %}
            },
            buttons: ['#part-options'],
            checkbox: true,
        },
    );

{% endblock %}