<div x-data="{
               current_permission: '{{ perm_data.level_verbose }}',
               permission_choices: ['None', 'View', 'Add', 'Change', 'Delete'],
               loading: false,
               error_message: '',
               show_dropdown: false,
                 async update(perm) {
                   this.show_dropdown = false
                   this.error_message = null
                   if(this.current_permission !== perm) {
                       this.loading = true
                       let response = await ajax_request(
                           'POST',
                           '{% url "django_spire:auth:group:json:group_permission_ajax" app_name=perm_data.app_name pk=group.pk %}',
                           {'perm_level': perm}
                       )
                       this.loading = false
                       let status = response.data.status
                       if (status === 200){
                           this.current_permission = perm
                       } else {
                           this.error_message = response.data.message
                       }
                   }
               }
        }">
    <div class="position-relative">
        <div @click="show_dropdown = true" class="btn btn-sm border dropdown-toggle">
            <span x-text="current_permission"></span>
        </div>
        <div @click.outside="show_dropdown = false" x-show="show_dropdown" style="width: 80px; z-index: 2"
             class="card position-absolute bg-app-layer-three mt-1">
            <template x-for="perm in permission_choices">
                <div @click="update(perm)" class="py-1 ps-2 cursor-pointer text-app-primary-hover"
                     x-bind:class="{ 'border-bottom': perm !== 'Delete' }">
                    <span class="fs--1" x-bind:class="{ 'text-app-secondary': perm === current_permission }"
                          x-text="perm"></span>
                </div>
            </template>
        </div>
    </div>
    <template x-if="error_message">
        <div x-text="error_message" class="fs--1 text-app-danger"></div>
    </template>
</div>
