{% extends "DI/base.html.twig" %}

{% set aPageAction = {
        reset: {
            rank: 2,
            type: 'reset',
            label: 'Reset',
            form: 'object_form'
        },
        submit: {
            rank: 3,
            type: 'submit',
            label: 'Save',
            form: 'object_form',
            primary: true
        }
    }
%}

{% if id != 0 %}

    {% set aPageAction = aPageAction|merge({
            previous: {
                rank: 0,
                type: 'link',
                disabled: id <= 1,
                href: path('object_edit',  {'class': class, 'id': id - 1}),
                icon: 'fa-solid fa-arrow-left'
            },
            next: {
                rank: 1,
                type: 'link',
                href: path('object_edit',  {'class': class, 'id': id + 1}),
                icon: 'fa-solid fa-arrow-right'
            }
        })
    %}

{% endif %}

{% block title %}
    Object Edition
{% endblock %}

{% block head %}

    <script src="{{ asset_js('DI/widget.js') }}"></script>
    <script src="{{ asset_js('DI/dynamic.js') }}"></script>
    <script src="{{ asset_js('DI/form.js') }}"></script>
    <script src="{{ asset_js('DI/collection.js') }}"></script>
    <script src="{{ asset_js('DI/widget/text_widget.js') }}"></script>

{% endblock %}

{% block toasts %}

    {# database information toast #}
    <div id="toast" role="alert" aria-live="assertive" aria-atomic="true" class="toast text-bg-primary" data-bs-autohide="true">
        <div class="toast-body">
            <h6><i class="fa-solid fa-database"></i> Database information</h6>
            <div><b>Host:</b> {{ db_host }} <b>Database name:</b> {{ db_name }}</div>
        </div>
    </div>

{% endblock %}

{% block body %}

    {# inject form #}
    <div>
        {{ form(form, {'attr': {'id' : 'object_form', 'data-object-id' : id}}) }}
    </div>

{% endblock %}

{% block modals %}

    <!-- Full screen modal -->
    <div class="modal fade" id="object_modal" tabindex="-1" aria-labelledby="object_modal" aria-hidden="true">
        <div class="modal-dialog modal-fullscreen">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-4" id="exampleModalFullscreenLabel">Create object</h1>
                    <div>
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" aria-label="Close">Cancel</button>
                        <button type="button" class="btn btn-primary" data-action="save_modal_object" aria-label="Confirm">Confirm</button>
                    </div>
                </div>
                <div class="modal-body">
                </div>
            </div>
        </div>
    </div>

{% endblock %}

{% block ready_scripts %}

    {# Widget #}
    const oWidget = new Widget();

    {# Dynamic #}
    const oDynamic = new Dynamic();

    {# Form #}
    const oForm = new Form(oWidget, oDynamic);
    oForm.handleElement(document);

    {# Collection #}
    const oCollection = new Collection(oForm, '{{ path('object_form', {'class': 'object_class', 'id' : 0, 'name': 'form_name'}) }}', '{{ path('object_save', {'class': 'object_class', 'id' : 0, 'name': 'form_name'}) }}');
    oCollection.handleElement(document);

    {# toast database information #}
    const toastLiveExample = document.getElementById('toast')
    const toastBootstrap = bootstrap.Toast.getOrCreateInstance(toastLiveExample)
    toastBootstrap.show();

{% endblock %}