<div class="p-8">
    <h2 class="text-3xl font-semibold"> Invite User </h2>

    <div class="flex flex-wrap">

        <div class="w-1/3 pr-4">
            <div class="mb-4 -mx-4">
                @foreach($this->fields as $key => $field)
                <style >
                    #resource-field-{{ optional($field)['slug'] }}-wrapper {
                        width: {{ optional(optional($field)['style'])['width'] ?? '100' }}%;
                    }

                    @media screen and (max-width: 768px) {
                        #resource-field-{{ optional($field)['slug'] }}-wrapper {
                            width: 100%;
                        }
                    }
                </style>
                <div wire:key="resource-field-{{ $key }}"
                id="resource-field-{{ optional($field)['slug'] }}-wrapper">
                <x-dynamic-component :component="$field['field']->component" :field="$field" :form="$form" />
                </div>
                @endforeach
            </div>

            <x-aura::button size="xl" wire:click="save">
            <div wire:loading>
                <x-aura::icon.loading  />
            </div>
            Invite
        </x-aura::button>
    </div>

    <div class="w-2/3">
        <livewire:aura::table :model="app('Aura\Base\Resources\TeamInvitation')"/>
    </div>
</div>

</div>
