{% extends 'base.html' %}
{% load crispy_forms_tags %}

{% block title %}{{title}}{% endblock title %}

{% block body %}
<form method="POST">
    {% csrf_token %}
    {% comment %} {% crispy form %} {% endcomment %}
    {% comment %} {{form|crispy}} {% endcomment %}
    <div class='container mt-3'>
        <div class='row ms-0'>
        <div class='card col-6 mb-2'>
            <div class='row form-row ms-0 me-0'>
                <div class='form-input col-4 col-md-4 mb-0'>{{form.ItemType|as_crispy_field}}</div>
            </div>
        </div>
        <div class='col-4 col-offset-2'>
            <div class='form-input col-4 col-md-4 mb-0 mt-3 ms-5'>{{form.IsActive|as_crispy_field}}</div>
        </div>

    </div>
        <div class='card mb-2'>
            <div class='row form-row ms-0 me-0'>
                <div class='form-group col-md-4 mb-0'> {{form.Name|as_crispy_field}}</div>
                <div class='form-group col-md-4 mb-0'> {{form.Parent|as_crispy_field}}</div>
                <div class='form-group col-md-4 mb-0'> {{form.ManufacturerPartNumber|as_crispy_field}}</div>
            </div>
        </div>
        <div class='card col-6 mb-2'>
            <div class='row form-row ms-0 me-0'>
                <div class='form-input col-4 col-md-4 mb-0'>{{form.UnitOfMeasureSetRefFullName|as_crispy_field}}</div>
            </div>
        </div>

        <div class='card-group mb-2'>
                <div class='card '>
                    <div class='row form-row ms-0 me-0'>
                        <div class'form-group col-md-4 mb-0'>{{form.PurchaseDesc|as_crispy_field}}</div>
                        <div class'form-group col-md-4 mb-0'>{{form.PurchaseCost|as_crispy_field}}</div>
                        <div class'form-group col-md-4 mb-0'>{{form.COGSAccountRefFullName|as_crispy_field}}</div>
                        <div class'form-group col-md-4 mb-0'>{{form.PrefVendorRefFullName|as_crispy_field}}</div>
                    </div>
            </div>
                <div class='card'>
                    <div class='row form-row ms-0 me-0'>
                        <div class'form-group col-md-4 mb-0'>{{form.SalesDesc|as_crispy_field}}</div>
                        <div class'form-group col-md-4 mb-0'>{{form.SalesPrice|as_crispy_field}}</div>
                        <div></div>
                        <div class'form-group col-md-4 mb-0'>{{form.IncomeAccountRefFullName|as_crispy_field}}</div>

                    </div>
            </div>
        </div>
        <div class='card mb-2'>
            <div class='row form-row ms-0 me-0'>
                <div class='form-group col-md-2 mb-0'> {{form.IncomeAccountRefFullName|as_crispy_field}}</div>
                <div class='form-group col-md mb-0'> {{form.ReorderPoint|as_crispy_field}}</div>
                <div class='form-group col-md mb-0'> {{form.ReorderPoint|as_crispy_field}}</div>
                <div class='form-group col-md mb-0'> {{form.QuantityOnHand|as_crispy_field}}</div>
                <div class='form-group col-md mb-0'> {{form.AverageCost|as_crispy_field}}</div>
                <div class='form-group col-md mb-0'> {{form.QuantityOnOrder|as_crispy_field}}</div>
                <div class='form-group col-md mb-0'> {{form.QuantityOnSalesOrder|as_crispy_field}}</div>
            </div>
        </div>
        <button type="submit" class='btn btn-primary mb-3'>submit</button>

        <!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
    Launch static backdrop modal
  </button>
  
  <!-- Modal -->
  <div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div class='row'>
            <div class='col-8'>
                <div class='form-group col mb-0'> {{form.NameFromTaco|as_crispy_field}}</div>
                <div class='form-group col mb-0'> {{form.CATEGORY|as_crispy_field}}</div>
                <div class='form-group col mb-0'> {{form.Type|as_crispy_field}}</div>
            </div>
        </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Understood</button>
        </div>
      </div>
    </div>
  </div>
  
    </div>
</form>
{% endblock body %}

