<div
    x-data="{
        async init() {
            toggle_loading_overlay()
            await this.get_glue()
            toggle_loading_overlay()
            console.log(this.recipe)
        },
        recipe: new GlueModelObject('recipe'),
        async get_glue() {
            await this.recipe.get()
        }
    }"
>
    {% include 'core/element/divider_element.html' with divider_title='Details' %}
    <div class="row g-3 mb-3">
        <div class="col-8">
            {% include 'django_glue/form/glue_field/char_field.html' with glue_model_field='recipe.name' %}
        </div>
        <div class="col-4">
            {% include 'django_glue/form/glue_field/select_field.html' with glue_model_field='recipe.course' %}
        </div>
        <div class="col-12">
            {% include 'django_glue/form/glue_field/text_field.html' with glue_model_field='recipe.description' %}
        </div>
        <div class="col-4">
            {% include 'django_glue/form/glue_field/number_field.html' with glue_model_field='recipe.prep_time' %}
        </div>
        <div class="col-4">
            {% include 'django_glue/form/glue_field/number_field.html' with glue_model_field='recipe.cook_time' %}
        </div>
        <div class="col-4">
            {% include 'django_glue/form/glue_field/number_field.html' with glue_model_field='recipe.servings' %}
        </div>
    </div>
</div>

{% include 'core/form/button/form_submit_button.html' %}