{% extends "admin/layout.html" %}
{% let active_page = "settings" %}

{% block title %}{{ t.settings_title }}{% endblock %}

{% block content %}
<div class="page-head">
    <h1>{{ t.settings_title }}</h1>
</div>

{% if saved %}
    <div class="notification is-success is-light">{{ t.settings_saved }}</div>
{% endif %}

<div class="form-card">
    <form method="post" action="/admin/settings/save">

        <h2 class="subtitle is-5 mb-3" style="border-bottom:1px solid #eee;padding-bottom:0.5rem;">{{ t.settings_contact_info }}</h2>
        <div class="field">
            <label class="label">{{ t.settings_contact_info }}</label>
            <div class="control">
                <input class="input" type="text" name="contact_info" placeholder="+7 999 123-45-67 / info@example.com" value="{% for s in &settings %}{% if s.key == "contact_info" %}{{ s.value }}{% endif %}{% endfor %}">
            </div>
        </div>
        <div class="field">
            <label class="label">{{ t.settings_pricing_info }}</label>
            <div class="control">
                <textarea class="input" name="pricing_info" rows="3" style="min-height:70px;resize:vertical;" placeholder="от 600 рублей за визит">{% for s in &settings %}{% if s.key == "pricing_info" %}{{ s.value }}{% endif %}{% endfor %}</textarea>
            </div>
        </div>
        <div class="field">
            <label class="label">{{ t.settings_seo_keywords }}</label>
            <div class="control">
                <textarea id="seoKeywordsInput" class="textarea" name="seo_keywords" rows="3"
                    style="resize:vertical;"
                    placeholder="зооняня Хабаровск, присмотр за питомцем Хабаровск, догситтер Хабаровск">{% for s in &settings %}{% if s.key == "seo_keywords" %}{{ s.value }}{% endif %}{% endfor %}</textarea>
            </div>
            <div id="seoPreview" style="margin-top:0.5rem;padding:0.5rem 0.75rem;background:#fafafa;border:1px solid #eee;border-radius:6px;min-height:2rem;line-height:2;font-size:0.85rem;display:none;"></div>
        </div>

        <details style="margin-top:1.5rem;">
            <summary class="subtitle is-5 mb-3" style="cursor:pointer;border-bottom:1px solid #eee;padding-bottom:0.5rem;">
                {{ t.settings_section_advanced }}
            </summary>

            <div style="margin-top:1rem;">
                <h3 class="subtitle is-6 mb-2 has-text-grey">{{ t.settings_section_general }}</h3>
                <div class="field">
                    <label class="label">{{ t.settings_site_domain }}</label>
                    <div class="control">
                        <input class="input" type="text" name="site_domain" placeholder="https://example.com" value="{% for s in &settings %}{% if s.key == "site_domain" %}{{ s.value }}{% endif %}{% endfor %}">
                    </div>
                </div>
                <div class="field">
                    <label class="label">{{ t.settings_timezone }}</label>
                    <div class="control">
                        <input class="input" type="text" name="timezone" placeholder="Asia/Vladivostok" value="{% for s in &settings %}{% if s.key == "timezone" %}{{ s.value }}{% endif %}{% endfor %}">
                    </div>
                </div>

                <h3 class="subtitle is-6 mb-2 has-text-grey" style="margin-top:1.25rem;">{{ t.settings_section_notifications }}</h3>
                <div class="field">
                    <label class="label">{{ t.settings_telegram_bot_token }}</label>
                    <div class="control">
                        <input class="input" type="text" name="telegram_bot_token" value="{% for s in &settings %}{% if s.key == "telegram_bot_token" %}{{ s.value }}{% endif %}{% endfor %}">
                    </div>
                </div>

                <h3 class="subtitle is-6 mb-2 has-text-grey" style="margin-top:1.25rem;">{{ t.settings_section_captcha }}</h3>
                <div class="field">
                    <label class="label">{{ t.settings_turnstile_site_key }}</label>
                    <div class="control">
                        <input class="input" type="text" name="turnstile_site_key" value="{% for s in &settings %}{% if s.key == "turnstile_site_key" %}{{ s.value }}{% endif %}{% endfor %}">
                    </div>
                </div>
                <div class="field">
                    <label class="label">{{ t.settings_turnstile_secret_key }}</label>
                    <div class="control">
                        <input class="input" type="text" name="turnstile_secret_key" value="{% for s in &settings %}{% if s.key == "turnstile_secret_key" %}{{ s.value }}{% endif %}{% endfor %}">
                    </div>
                </div>

                <h3 class="subtitle is-6 mb-2 has-text-grey" style="margin-top:1.25rem;">{{ t.settings_section_oidc }}</h3>
                <div class="field">
                    <label class="label">{{ t.settings_oidc_issuer_url }}</label>
                    <div class="control">
                        <input class="input" type="text" name="oidc_issuer_url" placeholder="https://keycloak.example.com/realms/myrealm" value="{% for s in &settings %}{% if s.key == "oidc_issuer_url" %}{{ s.value }}{% endif %}{% endfor %}">
                    </div>
                </div>
                <div class="field">
                    <label class="label">{{ t.settings_oidc_client_id }}</label>
                    <div class="control">
                        <input class="input" type="text" name="oidc_client_id" value="{% for s in &settings %}{% if s.key == "oidc_client_id" %}{{ s.value }}{% endif %}{% endfor %}">
                    </div>
                </div>
                <div class="field">
                    <label class="label">{{ t.settings_oidc_client_secret }}</label>
                    <div class="control">
                        <input class="input" type="password" name="oidc_client_secret" value="{% for s in &settings %}{% if s.key == "oidc_client_secret" %}{{ s.value }}{% endif %}{% endfor %}">
                    </div>
                </div>
                <div class="field">
                    <label class="label">{{ t.settings_oidc_allowed_groups }}</label>
                    <div class="control">
                        <input class="input" type="text" name="oidc_allowed_groups" placeholder="admins, web-petting" value="{% for s in &settings %}{% if s.key == "oidc_allowed_groups" %}{{ s.value }}{% endif %}{% endfor %}">
                    </div>
                </div>
                <div class="field">
                    <label class="checkbox">
                        <input type="checkbox" name="auth_password_enabled" value="true"{% if auth_password_checked %} checked{% endif %}>
                        {{ t.settings_auth_password_enabled }}
                    </label>
                </div>
                <div class="field">
                    <label class="checkbox">
                        <input type="checkbox" name="auth_sso_enabled" value="true"{% if auth_sso_checked %} checked{% endif %}>
                        {{ t.settings_auth_sso_enabled }}
                    </label>
                </div>
            </div>
        </details>

        <button type="submit" class="button is-primary" style="margin-top:1.5rem;">{{ t.settings_save }}</button>
    </form>
</div>

<script>
(function() {
    var COLORS = [
        'rgba(124,108,255,0.18)',
        'rgba(255,82,135,0.15)',
        'rgba(255,140,38,0.18)',
        'rgba(0,180,150,0.15)',
        'rgba(77,166,255,0.18)',
        'rgba(255,179,64,0.18)',
        'rgba(176,108,255,0.16)',
        'rgba(34,180,130,0.16)',
    ];

    var ta      = document.getElementById('seoKeywordsInput');
    var preview = document.getElementById('seoPreview');

    function esc(s) {
        return s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
    }

    function render() {
        var text = ta.value.trim();
        if (!text) { preview.style.display = 'none'; return; }

        var parts = text.split(',');
        var html = '';
        parts.forEach(function(part, i) {
            var word = part.trim();
            if (word) {
                var color = COLORS[i % COLORS.length];
                html += '<span style="background:' + color + ';border-radius:4px;padding:2px 6px;margin:2px;">' + esc(word) + '</span>';
            }
            if (i < parts.length - 1) {
                html += '<span style="color:#ccc;font-size:0.8em;margin:0 1px">,</span>';
            }
        });

        preview.innerHTML = html;
        preview.style.display = 'block';
    }

    ta.addEventListener('input', render);
    render();
})();
</script>
{% endblock %}