{% load static %}
{% load bloomerp %}
{% load crispy_forms_tags %}

<!--Card title-->
<h5 class="card-title">{{ foreign_model_name | title }} for {{ object }}</h5>
<!--End card title-->

<!--Filter section-->
{% include "snippets/list_view_filter.html" with target="#table_section" application_fields=application_fields content_type_id=foreign_content_type_id include_actions="true" initial_query=initial_query %}
<!--End filter-->

<!--Table-->
<div
    id="table_section"
    hx-get="{% url 'components_data_table' %}?data_table_content_type_id={{ foreign_content_type_id }}&{{ foreign_model_attribute }}={{ object.pk }}&data_table_include_actions=true"
    hx-trigger="load"
    hx-target="#table_section"
    hx-swap="innerHTML"
>
    <img src="{% static 'bloomerp/img/spinner.gif' %}" alt="Loading..." class="htmx-indicator">
</div>
<!--End table-->

<!--Create-->
<div class="d-flex justify-content-center">
    <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createModal">
        Add {{ foreign_model_name_singular }} for {{ object }}
    </button>
</div>
<!--End create-->

<!--Create modal-->
<div class="modal fade" id="createModal" tabindex="-1" aria-labelledby="createModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="createModalLabel">Add {{ foreign_model_name }} for {{ object }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form 
                hx-post="{% url "components_object_model_form" %}?content_type_id={{foreign_content_type_id}}&reset_on_submit=true"
                hx-target="#createNewModalBody"
                hx-swap="innerHTML"
                hx-on::after-request="reloadTable()"
                > 
                {% csrf_token %}
                <div class="modal-body" id="createNewModalBody">
                    
                    {{ form|crispy }}
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Create</button>
                </div>
            </form>
        </div>
    </div>
</div>



