{% if not openai_key_set or not pexels_key_set %}
<article class="warning" id="status-banner" style="padding: 1rem; margin-bottom: 2rem; border: 3px solid #000; background-color: #ffeaa7; box-shadow: 6px 6px 0px #000;">
    <header style="margin-bottom: 0.5rem; padding: 0.5rem; background: #000; border: none; color: #fff;">
        <strong style="text-transform: uppercase;">⚠️ System Alert: Configuration Required</strong>
    </header>
    <div style="padding: 0.5rem;">
        <p style="margin-bottom: 1rem; color: #000; font-weight: bold;">
            {% if not openai_key_set and not pexels_key_set %}
                Both <span style="text-decoration: underline;">LLM</span> and <span style="text-decoration: underline;">Pexels/Unsplash</span> API keys are missing.
            {% elif not openai_key_set %}
                Your <span style="text-decoration: underline;">LLM</span> API key is missing. AI generation will not work.
            {% else %}
                Your <span style="text-decoration: underline;">Pexels/Unsplash</span> API key is missing. Card images will not be fetched.
            {% endif %}
        </p>
        <button class="outline" style="background: #fff; color: #000; border: 2px solid #000;" onclick="document.getElementById('settings-modal').showModal()">🔧 CONFIGURE API KEYS</button>
    </div>
</article>
{% else %}
<div id="status-banner" hx-swap-oob="true" style="margin-bottom: 1rem; display: flex; justify-content: flex-end;">
    <div style="display: flex; align-items: center; gap: 1rem;">
        <div id="sync-response"></div>
        <button class="outline btn-sm secondary" 
            hx-post="/sync" 
            hx-target="#sync-response" 
            hx-indicator="#sync-loading"
            style="margin: 0;">
            <span id="sync-loading" class="htmx-indicator" aria-busy="true"></span>
            Sync AnkiWeb
        </button>
    </div>
</div>
{% endif %}