{% extends 'admin/base.html' %}

{% block title %}{{ t('review_manager.settings_title') }}{% endblock %}

{% block content %}
<form method="POST" action="{{ url_for('review_manager.settings') }}">
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">

<div class="page-header page-header--with-action">
    <div class="page-header__content">
        <h2>⚙️ {{ t('review_manager.settings_title') }}</h2>
        <p>{{ t('review_manager.settings_subtitle') }}</p>
    </div>
    <div class="btn-group">
        <button type="submit" class="btn btn-primary btn-sm">💾 {{ t('common.save') }}</button>
        <a href="{{ url_for('review_manager.list_reviews') }}" class="btn btn-secondary btn-sm">← {{ t('review_manager.nav_label') }}</a>
    </div>
</div>

    <div class="form-section">
        <h3>🌍 {{ t('review_manager.display_mode_label') }}</h3>
        <div class="form-group">
            <label class="rm-check"><input type="radio" name="display_mode" value="per_language" {% if display_mode == 'per_language' %}checked{% endif %}> {{ t('review_manager.display_per_language') }}</label>
            <label class="rm-check"><input type="radio" name="display_mode" value="all" {% if display_mode == 'all' %}checked{% endif %}> {{ t('review_manager.display_all_languages') }}</label>
            <div class="help-text">{{ t('review_manager.display_mode_help') }}</div>
            {% if not multilingual %}
            <div class="help-text">{{ t('review_manager.single_language_note') }}</div>
            {% endif %}
        </div>
    </div>

    <div class="form-section">
        <h3>✔️ {{ t('review_manager.moderation_title') }}</h3>
        <div class="form-group">
            <label class="rm-check">
                <input type="checkbox" name="auto_approve" {% if auto_approve %}checked{% endif %}>
                {{ t('review_manager.auto_approve_label') }}
            </label>
            <div class="help-text">{{ t('review_manager.auto_approve_help') }}</div>
        </div>
        <div class="form-group">
            <label class="rm-check">
                <input type="checkbox" name="form_enabled" {% if form_enabled %}checked{% endif %}>
                {{ t('review_manager.form_enabled_label') }}
            </label>
            <div class="help-text">{{ t('review_manager.form_enabled_help') }}</div>
        </div>
        <div class="form-group">
            <label for="notify_email">{{ t('review_manager.notify_email_label') }}</label>
            <input type="email" id="notify_email" name="notify_email" maxlength="200" value="{{ notify_email or '' }}">
            <div class="help-text">{{ t('review_manager.notify_email_help') }}</div>
        </div>
    </div>

    <div class="form-section">
        <h3>🔒 {{ t('review_manager.privacy_title') }}</h3>
        <div class="form-group">
            <label for="anonymize_days">{{ t('review_manager.anonymize_label') }}</label>
            <input type="number" id="anonymize_days" name="anonymize_days" min="0" max="365" value="{{ anonymize_days or '7' }}">
            <div class="help-text">{{ t('review_manager.anonymize_help') }}</div>
        </div>
    </div>

    <div class="form-section">
        <h3>🎨 {{ t('review_manager.alignment_title') }}</h3>
        {% set al = alignment or 'center' %}
        <label class="rm-check"><input type="radio" name="alignment" value="left" {% if al == 'left' %}checked{% endif %}> {{ t('review_manager.align_left') }}</label>
        <label class="rm-check"><input type="radio" name="alignment" value="center" {% if al == 'center' %}checked{% endif %}> {{ t('review_manager.align_center') }}</label>
        <label class="rm-check"><input type="radio" name="alignment" value="right" {% if al == 'right' %}checked{% endif %}> {{ t('review_manager.align_right') }}</label>
        <div class="help-text">{{ t('review_manager.alignment_help') }}</div>
    </div>

    <div class="form-section">
        <h3>📄 {{ t('review_manager.placement_title') }}</h3>
        {% set pl = placement or 'marker' %}
        <label class="rm-check"><input type="radio" name="placement" value="auto" {% if pl == 'auto' %}checked{% endif %} onchange="rmToggleTargets()"> {{ t('review_manager.placement_auto') }}</label>

        <div id="rm-targets" class="rm-targets" {% if pl != 'auto' %}hidden{% endif %}>
            <div class="filter-row">
                <input type="text" id="rm-target-filter" autocomplete="off"
                       placeholder="🔍 {{ t('review_manager.placement_filter') }}">
            </div>
            <div class="rm-targets__list">
                <label class="rm-check">
                    <input type="checkbox" name="targets" value="home" {% if 'home' in selected_targets %}checked{% endif %}>
                    🏠 {{ t('review_manager.placement_home') }}
                </label>
                {% for c in content_choices %}
                <label class="rm-check">
                    <input type="checkbox" name="targets" value="{{ c.group }}" {% if c.group in selected_targets %}checked{% endif %}>
                    {% if c.kind == 'page' %}📄 {{ t('review_manager.kind_page') }}{% else %}📝 {{ t('review_manager.kind_post') }}{% endif %}: {{ c.title }}
                </label>
                {% endfor %}
            </div>
        </div>

        <label class="rm-check mt-2"><input type="radio" name="placement" value="marker" {% if pl == 'marker' %}checked{% endif %} onchange="rmToggleTargets()"> {{ t('review_manager.placement_marker') }}</label>
        <p class="help-text">{{ t('review_manager.embed_help') }}</p>
        <p><code>[reviews]</code></p>
        <div class="help-text">{{ t('review_manager.placement_help') }}</div>
        <p class="help-text">{{ t('review_manager.embed_language_note') }}</p>
    </div>
</form>

<style>
.rm-check { display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
    cursor: pointer; font-weight: 400; }
/* .rm-check sets display:flex, which overrides the browser's built-in
   [hidden] { display: none }. Restore it so the filter can hide rows. */
.rm-check[hidden] { display: none; }
.rm-targets { margin: 8px 0 12px 26px; }
.rm-targets .filter-row { margin-bottom: 8px; }
.rm-targets__list { max-height: 260px; overflow-y: auto;
    border: 1px solid var(--adm-border-light); border-radius: var(--adm-radius);
    padding: 10px 12px; }
</style>

<script>
function rmToggleTargets() {
    var auto = document.querySelector('input[name="placement"][value="auto"]');
    document.getElementById('rm-targets').hidden = !(auto && auto.checked);
}
function rmFilterTargets(q) {
    q = (q || '').trim().toLowerCase();
    document.querySelectorAll('.rm-targets__list .rm-check').forEach(function (el) {
        var text = (el.textContent || '').toLowerCase();
        el.hidden = q !== '' && text.indexOf(q) === -1;
    });
}
(function () {
    var fi = document.getElementById('rm-target-filter');
    if (fi) { fi.addEventListener('input', function () { rmFilterTargets(fi.value); }); }
})();
</script>
{% endblock %}