{% load crispy_forms_tags %}
{% load widget_tweaks %}

<div class="table-area">
    <div class="table-header bg-white">
        <form method="post" id="personForm" data-cities-url="" novalidate>
        {% csrf_token %}
            <div class="row">
                <div class="col-md-12">
                    <div class="row">
                        <div class="row">
                            <div class="col-md-3 fw-bold">
                                {{form.agent_commision1|as_crispy_field}} 
                            </div> 
                            <div class="col-md-3 fw-bold" style="padding-top: 40px!important;">
                                {{form.agent_commision1_is_percent|as_crispy_field}}
                            </div>
                            <div class="col-md-3 fw-bold">
                                {{form.agent_commision2|as_crispy_field}}   
                            </div>
                            <div class="col-md-3 fw-bold" style="padding-top: 40px!important;">
                                {{form.agent_commision2_is_percent|as_crispy_field}}
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-3 fw-bold">
                                {{form.commercial_cost|as_crispy_field}} 
                            </div> 
                            <div class="col-md-3 fw-bold" style="padding-top: 40px!important;">
                                {{form.commercial_cost_is_percent|as_crispy_field}}
                            </div>
                            <div class="col-md-3 fw-bold">
                                {{form.profit_margin|as_crispy_field}} 
                            </div> 
                            <div class="col-md-3 fw-bold" style="padding-top: 40px!important;">
                                {{form.profit_margin_is_percent|as_crispy_field}}
                            </div> 
                        </div>
                        <div class="row">
                            <div class="col-md-3 fw-bold">
                                {{form.freight|as_crispy_field}} 
                            </div> 
                            <div class="col-md-3 fw-bold">
                                {{form.insurance|as_crispy_field}}
                            </div> 
                            <div class="col-md-3 fw-bold">
                                {{form.duty|as_crispy_field}}
                            </div> 
                            <div class="col-md-3 fw-bold" style="padding-top: 40px!important;">
                                {{form.duty_is_percent|as_crispy_field}}
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-3 fw-bold">
                                {{form.others|as_crispy_field}} 
                            </div> 
                            <div class="col-md-3 fw-bold">
                                {{form.remarks|as_crispy_field}} 
                            </div> 
                        </div>

                        <div class="col-md-12" style="margin-top: 31px; float: right; padding-right: 5%;">
                            <button type="submit" style="float: right;" class="cus-btn">Add</button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>