{% extends '_modal.html' %}
{% load django_bootstrap5 %}
{% load i18n %}
{% block modal_title %}
    {% if client %}
        {{ client.code }}
    {% else %}
        <div class="display-4">Add Client</div>
    {% endif %}
{% endblock modal_title %}

{% block modal_body %}

    <div id="modal-body-wrapper">
        {% partialdef modal-body-partial inline %}

            <div class="card mb-5 border border-secondary">
                <form
                        {% if client %}
                            hx-post="{% url 'session_client:edit_client' client.uuid %}"
                            hx-swap="outerHTML"
                            hx-target="#modal-body-wrapper"
                        {% else %}
                            hx-post="{% url 'session_client:add_client' %}"
                            hx-swap="outerHTML"
                            hx-target="#modal-body-wrapper"

                        {% endif %}>

                    {% csrf_token %}

                    <div class="">

                        <!--- Client Code -->
                        <div class="container text-center my-1 p-1">
                            <div class="row align-items-center">
                                <div class="col">
                                    <small>{{ form.code.label }}:</small>
                                    {% bootstrap_field form.code layout="horizontal" show_label="skip" show_help=True size='sm' wrapper_class="mx-auto" %}
                                </div>
                                <div class="col">
                                    <small>{{ form.link.label }}:</small>
                                    {% bootstrap_field form.link layout="horizontal" show_label="skip" show_help=True size='sm' wrapper_class="mx-auto" %}
                                </div>
                            </div>
                        </div>

                        <!--- Client Type and tenant -->
                        <div class="container text-center border-top border-secondary my-1 p-1">
                            <div class="row align-items-center">
                                <div class="col">
                                    <small>{{ form.type.label }}:</small>
                                    {% bootstrap_field form.type layout="horizontal" show_label="skip" show_help=False wrapper_class="mx-auto" %}

                                </div>

                                <div class="col">
                                    <small>{{ form.tenant.label }}:</small>
                                    {% bootstrap_field form.tenant layout="horizontal" show_label="skip" show_help=False wrapper_class="mx-auto" %}

                                </div>
                            </div>
                        </div>

                        <div class="container text-center border-top border-secondary my-1 p-1">
                            <div class="row align-items-center">
                                <div class="col">
                                    <small>{{ form.fee.label }}:</small>
                                    {% bootstrap_field form.fee layout="horizontal" show_label="skip" show_help=False wrapper_class="mx-auto" %}
                                </div>
                                <div class="col mx-auto">
                                    <small>{{ form.active.label }}:</small>
                                    <div class="row">
                                        <div class="col"></div>
                                        <div class="form-check form-switch col">
                                            {{ form.active }}
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!--- Client Date defaults -->

                            <!--- Client Durations -->

                            <div class="container text-center border-top border-secondary my-1 p-1">
                                <div class="row align-items-center">
                                    <div class="col">
                                        <small>{{ form.duration.label }}:</small>
                                        {% bootstrap_field form.duration layout="horizontal" show_label="skip" show_help=False wrapper_class="mx-auto" %}
                                    </div>
                                </div>
                            </div>

                        </div>

                        <div class="row">
                            <div class="col">
                                {% if client %}
                                    <button
                                            class="btn btn-outline-warning start-0 m-2"
                                            hx-confirm="Confirm client archive"
                                            hx-patch="{% url 'session_client:client_toggle_active' client.uuid %}"
                                            hx-target="#{{ client.code }}"
                                            hx-swap="outerHTML"
                                    >{% translate 'Archive' %}
                                    </button>
                                {% endif %}
                            </div>
                            <div class="col">
                                {% bootstrap_form_errors form type="non_fields" %}
                            </div>
                            <div class="col">
                                <button
                                        type="submit"
                                        class="btn btn-secondary float-end m-2">{% translate 'Save' %}
                                </button>
                            </div>
                        </div>
                </form>

            </div>
        {% endpartialdef %}
    </div>


{% endblock modal_body %}
{% block modal_footer %}
{% endblock %}