{% extends "base.html" %}
{% block title %}Beállítások — Recept Importáló{% endblock %}

{% block content %}
<div class="card">
    <h2>Mealie kapcsolat</h2>
    <form method="POST" action="/settings">
        <label for="mealie_url">Mealie URL</label>
        <input type="url" id="mealie_url" name="mealie_url"
               value="{{ cfg.mealie_url }}"
               placeholder="https://mealie.example.com">

        <label for="mealie_api_key">API kulcs</label>
        <input type="password" id="mealie_api_key" name="mealie_api_key"
               value="{{ cfg.mealie_api_key }}"
               placeholder="Mealie API token">
        <p class="text-dim mb-2" style="font-size:0.85rem;">
            Az API kulcsot a Mealie felhasználói profilod alatt hozhatod létre:
            <em>Profil → API Tokenek</em>
        </p>

        <div class="flex">
            <button type="submit" class="btn btn-primary">Mentés</button>
            <button type="button" class="btn btn-secondary" id="testBtn" onclick="testConnection()">
                Kapcsolat tesztelése
            </button>
            <span id="testResult"></span>
        </div>
    </form>
</div>
{% endblock %}

{% block scripts %}
<script>
async function testConnection() {
    const btn = document.getElementById('testBtn');
    const result = document.getElementById('testResult');
    btn.disabled = true;
    result.innerHTML = '<span class="spinner"></span>';

    try {
        const form = new FormData(document.querySelector('form'));
        const resp = await fetch('/settings/test', { method: 'POST', body: form });
        const data = await resp.json();
        if (data.ok) {
            const v = data.data.version || '?';
            result.innerHTML = '<span class="text-success">✓ Kapcsolódva (Mealie v' + v + ')</span>';
        } else {
            result.innerHTML = '<span class="text-danger">✗ ' + data.error + '</span>';
        }
    } catch (e) {
        result.innerHTML = '<span class="text-danger">✗ Hálózati hiba</span>';
    }
    btn.disabled = false;
}
</script>
{% endblock %}