<!--
  Mudabbir Dashboard - Welcome / First-Run Modal

  Created: 2026-02-11
  Shows on first load when no Anthropic API key is configured.
  Offers quick API key setup or skip option.
-->
<!-- Welcome Modal -->
<div
    class="fixed inset-0 z-[110] flex items-center justify-center bg-black/50 backdrop-blur-md p-4"
    x-show="showWelcome"
    x-transition.opacity
    @click.self="showWelcome = false; localStorage.setItem('Mudabbir_setup_dismissed', '1')"
>
<div class="w-full max-w-[460px] bg-[#1c1c1e]/95 backdrop-blur-xl border border-[var(--glass-border)] rounded-[20px] shadow-2xl animate-[modalPop_0.25s_ease-out] overflow-hidden" @click.stop>

    <!-- Header -->
    <div class="px-6 pt-6 pb-2 text-center">
        <div class="text-4xl mb-3">&#x1F43E;</div>
        <h2 class="text-[20px] font-bold text-white mb-1">Welcome to Mudabbir <span class="inline-block px-1.5 py-0.5 text-[9px] font-bold uppercase tracking-wider bg-amber-500/20 text-amber-400 border border-amber-500/30 rounded-full align-middle leading-none">Beta</span></h2>
        <p class="text-[13px] text-white/60 leading-relaxed">
            Your self-hosted AI agent. To get started, add your Anthropic API key below.
        </p>
    </div>

    <!-- API Key Input -->
    <div class="px-6 py-4">
        <div class="flex flex-col gap-1.5">
            <div class="flex justify-between items-center">
                <label class="text-[12px] font-medium text-[var(--text-secondary)] uppercase tracking-wide">Anthropic API Key</label>
                <a href="https://console.anthropic.com/api-keys" target="_blank" rel="noopener" class="api-key-help">
                    <i data-lucide="external-link" class="w-3 h-3"></i> Get Key
                </a>
            </div>
            <input
                type="password"
                x-model="apiKeys.anthropic"
                placeholder="sk-ant-..."
                class="w-full bg-black/30 border border-[var(--glass-border)] rounded-[10px] py-2.5 px-3 text-[13px] text-white focus:outline-none focus:border-[var(--accent-color)] focus:bg-black/40 transition-all placeholder-white/40"
                @keydown.enter="if (apiKeys.anthropic) { saveApiKey('anthropic'); showWelcome = false; localStorage.setItem('Mudabbir_setup_dismissed', '1'); }"
            />
        </div>
    </div>

    <!-- Actions -->
    <div class="px-6 pb-6 flex flex-col gap-2">
        <button
            class="w-full bg-[var(--accent-color)] hover:bg-[var(--accent-hover)] text-white py-2.5 rounded-[10px] text-[13px] font-semibold transition-all active:scale-[0.98]"
            :disabled="!apiKeys.anthropic"
            :class="!apiKeys.anthropic ? 'opacity-50 cursor-not-allowed' : ''"
            @click="saveApiKey('anthropic'); showWelcome = false; localStorage.setItem('Mudabbir_setup_dismissed', '1')"
        >
            Save &amp; Start
        </button>
        <button
            class="w-full text-white/50 hover:text-white/80 py-2 text-[12px] transition-colors"
            @click="showWelcome = false; localStorage.setItem('Mudabbir_setup_dismissed', '1')"
        >
            Skip for now
        </button>
    </div>

</div>
</div>
