<flux:modal variant="flyout" position="left" name="app-info" class="md:w-96">
    @if (empty($app))
    <flux:text>I'm not sure how you got here, but no app is loaded</flux:text>
    @else
    <div class="space-y-6 pt-4">
        <div x-data="{edit: false}">
            <div x-show="!edit"
                class="flex items-center gap-4 border dark:border-zinc-600 border-stone-300 rounded-sm p-2">
                <img src="{{$app->getIconUrl()}}" alt="" class="size-24">
                <flux:heading size="xl">{{$app->name}}</flux:heading>
            </div>
            <div class="flex justify-end" x-show="!edit">
                <flux:button x-on:click="edit = true" variant="subtle" icon="pencil">Edit</flux:button>
            </div>
            <form x-show="edit" wire:submit="save" class="flex flex-col gap-4">
                <div>
                    <img src="{{$icon}}" alt="" class="size-24 mx-auto">
                    <flux:input wire:model.live="query" label="Icon" />
                </div>
                <flux:input wire:model="name" />
                <flux:input wire:model="redirect_uri" label="Redirect URI" />
                <div class="flex gap-4">
                    <flux:button class="flex-1" variant="primary" type="submit" x-on:click="edit = false">Save
                    </flux:button>
                    <flux:button class="flex-1" variant="subtle" color="red" x-on:click.prevent="edit = false">Cancel
                    </flux:button>
                </div>
            </form>
        </div>
        <flux:separator text="Connection Information" />
        <div x-data="{dockerView: false}">
            <div class="mb-4">
                <flux:button x-on:click="dockerView = !dockerView" variant="subtle" size="sm">
                    <span x-show="!dockerView">Env View</span>
                    <span x-show="dockerView">Standard View</span>
                </flux:button>
            </div>
            <div x-show="!dockerView" class="space-y-4">
                <flux:input label="Client ID" disabled value="{{$app->client_id}}" copyable />
                <flux:input label="Client Secret" disabled value="{{$app->client_secret}}" copyable />
                <flux:input label="Redirect URI" disabled value="{{$app->redirect_uri}}" copyable />
                <flux:input label="Authorization Endpoint" disabled value="{{route('auth.authorize')}}" copyable />
                <flux:input label="Token Endpoint" disabled value="{{route('auth.token')}}" copyable />
                <flux:input label="User Endpoint" disabled value="{{route('auth.userinfo')}}" copyable />
                <flux:input label="Scopes" disabled value="openid email profile" copyable />
                <flux:input label="Identifier" disabled value="email" copyable />
            </div>

            <div x-show="dockerView" class="space-y-4">
                <pre class="overflow-auto max-h-72 p-4 rounded text-sm font-mono">
                <code>
OIDC_CLIENT_ID={{$app->client_id}}
OIDC_CLIENT_SECRET={{$app->client_secret}}
OIDC_REDIRECT_URI={{$app->redirect_uri}}
OIDC_AUTHORIZATION_ENDPOINT={{route('auth.authorize')}}
OIDC_TOKEN_ENDPOINT={{route('auth.token')}}
OIDC_USERINFO_ENDPOINT={{route('auth.userinfo')}}
OIDC_SCOPES=openid email profile
OIDC_IDENTIFIER=email
                </code>
                </pre>
            </div>
        </div>
    </div>
    @endif
</flux:modal>