{% extends "dashboard/layout.html" %}
{% block title %}{{ _('Notification Preferences – OnlineConvert') }}{% endblock %}
{% set active_page = 'notifications' %}

{% block dashboard_content %}
<div class="mb-5">
    <h1 class="text-xl font-bold text-gray-900 dark:text-white"><i class="fa fa-bell mr-2 text-cyan-500"></i>{{ _('Email Notifications') }}</h1>
    <p class="text-sm text-gray-500 dark:text-gray-400 mt-0.5">{{ _('Choose which emails you want to receive from us.') }}</p>
</div>

<form method="POST" action="{{ full_url('/dashboard/notifications') }}">
    <div class="rounded-2xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 overflow-hidden mb-4">
        <div class="px-5 py-4 border-b border-gray-100 dark:border-gray-800 bg-gray-50 dark:bg-gray-800/50">
            <h2 class="text-sm font-semibold text-gray-700 dark:text-gray-300">{{ _('Notification Settings') }}</h2>
        </div>
        <div class="divide-y divide-gray-100 dark:divide-gray-800">
            {% for event, label, description in [
                ('login', _('Login Alerts'), _('Get an email each time your account is logged into')),
                ('file_uploaded', _('File Uploads'), _('Notification when a file is uploaded or converted')),
                ('blog_submitted', _('Blog Submissions'), _('Confirmation when you submit a blog post for review')),
                ('blog_reviewed', _('Blog Review Results'), _('Notification when your blog post is approved or rejected')),
                ('blog_published', _('Blog Published'), _('Notification when your blog post goes live')),
                ('plan_changed', _('Plan Changes'), _('Notification when your subscription plan changes')),
                ('payment_received', _('Payment Confirmations'), _('Receipts for payments made to your account')),
                ('referral_signup', _('Referral Signups'), _('When someone registers using your referral link')),
                ('password_changed', _('Password Changes'), _('Security alert when your password is changed')),
            ] %}
            <div class="flex items-center justify-between px-5 py-4" data-testid="notif-row-{{ event }}">
                <div>
                    <div class="text-sm font-medium text-gray-800 dark:text-gray-200">{{ label }}</div>
                    <div class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">{{ description }}</div>
                </div>
                <label class="relative inline-flex items-center cursor-pointer flex-shrink-0 ml-4">
                    <input type="checkbox" name="{{ event }}" value="1" class="sr-only peer"
                        {% if prefs.get(event, 1) %}checked{% endif %}
                        data-testid="toggle-{{ event }}">
                    <div class="w-11 h-6 bg-gray-200 dark:bg-gray-700 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-cyan-400 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-cyan-500"></div>
                </label>
            </div>
            {% endfor %}
        </div>
    </div>

    <div class="flex items-center gap-3">
        <button type="submit" class="px-6 py-2.5 rounded-xl bg-cyan-600 hover:bg-cyan-700 text-white text-sm font-semibold transition-all shadow-md shadow-cyan-500/20" data-testid="btn-save-notifications">
            <i class="fa fa-save mr-2"></i>{{ _('Save Preferences') }}
        </button>
        <p class="text-xs text-gray-400 dark:text-gray-500">{{ _('Changes take effect immediately.') }}</p>
    </div>
</form>
{% endblock %}