{% extends 'django_spire/card/card.html' %}

{% block card_content %}
    <form
        class="row"
        method="post"
        x-data="{
            api_access: new ModelObjectGlue('api_access'),
            async init() {
                await this.collection.get()
                this.collection.glue_fields.parent.choices = await this.collection_query_set.to_choices()
                this.collection.glue_fields.parent.label = 'Parent Collection'

                if (!this.collection.parent) {
                    this.collection.parent = {{ collection_parent_pk|default:'null' }}
                }

                this.groups.choices = await this.group_query_set.to_choices()
                this.groups.value = JSON.parse('{{ group_ids }}')
            }
        }"
    >
        {% csrf_token %}

        <div class="col-12">
            {% include 'django_glue/form/field/char_field.html' with glue_model_field='api_access.name' %}
        </div>

        <div class="col-12 mt-2">
            {% include 'django_glue/form/field/select_field.html' with glue_model_field='api_access.permission' %}
        </div>

        <div class="col-12 mt-3">
            {% include 'django_spire/contrib/form/button/form_submit_button.html' %}
        </div>
    </form>
{% endblock %}