{% extends "../template.html" %}
{% block content %}
{% load static %}
    <div class="card mt-4">
        <div class="card-header">
            <h2>New Product or Service</h2>
        </div>
        <div class="card-body">
            <form action="{% url 'product_and_service_new' %}" method="post" class="new_product">
                {% csrf_token %}
                <div class="form-group">
                    <label for="id_product_or_service">Product or Service</label>
                    {{ product_and_service_form.product_or_service }}
                </div>
                <div class="form-row">
                    <div class="form-group col-md-6">
                        <label for="id_product_name">Product Name</label>
                        {{ product_and_service_form.product_name }}
                    </div>
                    <div class="form-group col-md-2">
                        <label for="id_product_part_number">Product Part Number</label>
                        {{ product_and_service_form.product_part_number }}
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group col-md-3">
                        <label for="id_product_cost">Product/Service Cost</label>
                        {{ product_and_service_form.product_cost }}
                    </div>
                    <div class="form-group col-md-3">
                        <label for="id_product_price">Product/Services Price</label>
                        {{ product_and_service_form.product_price }}
                    </div>
                </div>
                <div class="form-group">
                    <label for="id_product_description">Product Description</label>
                    {{ product_and_service_form.product_description }}
                </div>
                <input type="submit" value="Save Changes and return" class="btn btn-primary"><a href="{% url 'product_and_service_search' %}" class="btn btn-danger">Cancel</a>
            </form>
        </div>
    </div>
{% endblock %}