<x-layouts.tenant pageTitle="PWA">
    <x-page-header title="PWA" subtitle="Controla cómo se instala y se ve la app en móviles y escritorio." />

    <x-card title="Aplicación instalable">
        <form method="POST" action="{{ route('tenant.pwa.update') }}" class="space-y-5">
            @csrf
            @method('PUT')
            <label class="flex items-center justify-between gap-4 rounded-xl border border-ink-100 p-4">
                <span class="font-semibold text-ink-800">Permitir instalación como app</span>
                <input type="checkbox" name="pwa_enabled" value="1" @checked((bool) ($settings['pwa_enabled'] ?? true)) class="rounded border-ink-300 text-brand-600 focus:ring-brand-500">
            </label>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <label class="block">
                    <span class="text-sm font-semibold text-ink-700">Nombre corto</span>
                    <input name="pwa_short_name" maxlength="20" value="{{ $settings['pwa_short_name'] ?? 'AsignaPro' }}" class="input mt-1.5">
                </label>
                <label class="block">
                    <span class="text-sm font-semibold text-ink-700">Color de tema</span>
                    <input type="color" name="pwa_theme_color" value="{{ $settings['pwa_theme_color'] ?? '#07377f' }}" class="mt-1.5 h-11 w-24 rounded-lg border border-ink-200">
                </label>
            </div>
            <x-btn type="submit">Guardar PWA</x-btn>
        </form>
    </x-card>
</x-layouts.tenant>
