@can('createAnyResource')
    <form wire:submit='createGitLabApp' class="flex flex-col w-full gap-2">
        <div class="pb-2">This is required if you would like to get full integration (deployments from
            private repositories, webhooks, etc) with GitLab.</div>
        <div class="flex gap-2">
            <x-forms.input id="name" label="Name" required />
            <x-forms.input id="group_name" label="Group Name"
                helper="Optional. Comma-separated group names to filter repositories (e.g., myorg,myteam)."
                placeholder="If empty, all accessible repositories are listed." />
        </div>
        @if (!isCloud())
            <div x-data="{ showWarning: @entangle('is_system_wide') }">
                <div class="w-48">
                    <x-forms.checkbox id="is_system_wide" label="System Wide"
                        helper="If checked, this GitLab App will be available for everyone in this Coolify instance." />
                </div>
                <div x-show="showWarning" x-transition x-cloak class="w-full max-w-2xl mx-auto pt-2">
                    <x-callout type="warning" title="Not Recommended">
                        <div class="whitespace-normal break-words">
                            System-wide GitLab Apps are shared across all teams on this Coolify instance. This means any team
                            can use this GitLab App to deploy applications from your repositories. For better security and
                            isolation, it's recommended to create team-specific GitLab Apps instead.
                        </div>
                    </x-callout>
                </div>
            </div>
        @endif
        <div x-data="{
                                activeAccordion: '',
                                setActiveAccordion(id) {
                                    this.activeAccordion = (this.activeAccordion == id) ? '' : id
                                }
                            }" class="relative w-full py-2 mx-auto overflow-hidden text-sm font-normal rounded-md">
            <div x-data="{ id: $id('accordion') }" class="cursor-pointer">
                <button @click="setActiveAccordion(id)"
                    class="flex items-center justify-between w-full px-1 py-2 text-left select-none dark:hover:text-white hover:bg-white/5"
                    type="button">
                    <h4>Self-hosted GitLab</h4>
                    <svg class="w-4 h-4 duration-200 ease-out" :class="{ 'rotate-180': activeAccordion == id }"
                        viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor"
                        stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <polyline points="6 9 12 15 18 9"></polyline>
                    </svg>
                </button>
                <div x-show="activeAccordion==id" x-collapse x-cloak class="px-2">
                    <div class="flex flex-col gap-2 pt-0 opacity-70">
                        <div class="flex gap-2">
                            <x-forms.input id="html_url" label="GitLab URL" required
                                helper="For self-hosted GitLab, enter your instance URL (e.g., https://gitlab.example.com)." />
                            <x-forms.input id="api_url" label="API URL" required
                                helper="Usually your GitLab URL with /api/v4 appended." />
                        </div>
                        <div class="flex gap-2">
                            <x-forms.input id="custom_user" label="Custom Git User" required />
                            <x-forms.input id="custom_port" type="number" label="Custom Git Port" required />
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <x-forms.button class="mt-4" type="submit">
            Continue
        </x-forms.button>
    </form>
@else
    <x-callout type="danger" title="Insufficient Permissions">
        You don't have permission to create new GitLab Apps. Please contact your team administrator for access.
    </x-callout>
@endcan