{% csrf_token %}
{% load humanize %}
<div class="card mt-4">
    <div class="card-header">
        <h2>Costs</h2>
    </div>
    <div class="card-body">
        {% if cost_permissions > 1 %}
            <div class="form-row">
                <div class="form-group col-md-8">
                    <label for="id_cost_description">Cost Description</label>
                    {{ cost_information_form.cost_description }}
                </div>
                <div class="form-group col-md-2">
                    <label for="id_cost_amount">Cost Amount</label>
                    {{ cost_information_form.cost_amount }}
                </div>
                <div class="form-group col-md-2">
                    <label for="add_cost_submit">Add Cost</label>
                    <input type="submit" name="add_cost_submit" id="add_cost_submit" value="Add Cost to Task" disabled="disabled" class="form-control btn btn-primary">
                </div>
            </div>
        {% endif %}
        {% if cost_zip_results %}
            <table class="table table-striped table-hover mt-4">
                <thead>
                    <tr class="header">
                        <td>Item</td>
                        <td>Cost</td>
                        <td>Running Total</td>
                        <td>Delete</td>
                    </tr>
                </thead>
                {% for row, running_total in cost_zip_results %}
                    <tr>
                        <td>{{ row.cost_description }}</td>
                        <td name="cost_amount">{{ row.cost_amount|intcomma }}</td>
                        <td name="running_total">{{ running_total|intcomma }}</td>
                        <td>
                            {% if cost_permissions > 1 %}
                                {% if row.project_id %}
                                    <a href="javascript:void(0)" onclick="delete_cost({{ row.cost_id }},{{ row.project_id.project_id }})">Remove Cost</a>
                                {% else %}
                                    <a href="javascript:void(0)" onclick="delete_cost({{ row.cost_id }},{{ row.task_id.task_id }})">Remove Cost</a>
                                {% endif %}
                            {% endif %}
                        </td>
                    </tr>
                {% endfor %}
                <tr class="table-success">
                    <td>GRAND TOTAL</td>
                    <td id="grand_total">{{ grand_total }}</td>
                </tr>
            </table>
        {% else %}
            <p>No cost associated with this object</p>
        {% endif %}
    </div>
</div>
