{% extends "layouts/base.html" %}
{% from "components/ui/card.html" import card, card_header, card_title, card_description, card_content, card_footer %}
{% from "components/ui/button.html" import button %}
{% from "components/ui/alert.html" import alert, alert_title, alert_description %}
{% from "components/ui/input.html" import input, label, form_group %}

{% block title %}Settings - DMARQ{% endblock %}

{% block page_title %}Settings{% endblock %}

{% block content %}
<div class="grid gap-4 md:gap-8 py-4">

    <!-- Mail Sources info card (replaces the old IMAP configuration form) -->
    {% call card() %}
        {% call card_header() %}
            {% call card_title() %}Mail Sources{% endcall %}
            {% call card_description() %}
                IMAP and other inbox credentials are now managed on the dedicated
                <strong>Mail Sources</strong> page. Multiple accounts and methods
                (IMAP, POP3, Gmail API) can be configured there.
            {% endcall %}
        {% endcall %}
        {% call card_content() %}
            <a href="/mail-sources" class="btn btn-default btn-md">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-2">
                    <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
                    <polyline points="22,6 12,13 2,6"></polyline>
                </svg>
                Manage Mail Sources
            </a>
        {% endcall %}
    {% endcall %}

    <!-- DMARC Policy Management -->
    {% call card() %}
        {% call card_header() %}
            {% call card_title() %}DMARC Policy Management{% endcall %}
            {% call card_description() %}
                Configure default DMARC policy settings for newly added domains
            {% endcall %}
        {% endcall %}
        {% call card_content() %}
            <form id="dmarc-policy-form" class="space-y-6" x-data="{isUpdating: false, updateResult: ''}">
                <div class="space-y-4">
                    {% call form_group() %}
                        {% call label(for="default_policy") %}Default DMARC Policy{% endcall %}
                        <select id="default_policy" name="default_policy" class="input w-full">
                            <option value="none">None (monitoring only)</option>
                            <option value="quarantine">Quarantine (send to spam)</option>
                            <option value="reject">Reject (block delivery)</option>
                        </select>
                        <p class="text-xs text-muted-foreground mt-1">Policy applied to new domains when no specific policy is set</p>
                    {% endcall %}

                    {% call form_group() %}
                        {% call label(for="percent") %}Percentage{% endcall %}
                        <div class="flex items-center">
                            <input type="range" id="percent" name="percent" min="0" max="100" value="100" class="w-full h-2 bg-muted rounded-lg appearance-none cursor-pointer" />
                            <span class="ml-2 text-sm font-medium w-10" id="percent-display">100%</span>
                        </div>
                        <p class="text-xs text-muted-foreground mt-1">Percentage of messages to which the DMARC policy is applied</p>
                    {% endcall %}
                </div>

                <div class="flex justify-end">
                    <button type="submit" class="btn btn-default btn-md">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-2"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"></path><polyline points="17 21 17 13 7 13 7 21"></polyline><polyline points="7 3 7 8 15 8"></polyline></svg>
                        Save Policy Settings
                    </button>
                </div>
            </form>
        {% endcall %}
    {% endcall %}
</div>
{% endblock %}

{% block scripts %}
<script>
// Initialize any scripts after DOM load
document.addEventListener('DOMContentLoaded', function() {
    // Percent display for DMARC policy form
    const percentInput = document.getElementById('percent');
    const percentDisplay = document.getElementById('percent-display');
    if (percentInput && percentDisplay) {
        percentInput.addEventListener('input', function() {
            percentDisplay.textContent = this.value + '%';
        });
    }

    // DMARC policy form handling
    const policyForm = document.getElementById('dmarc-policy-form');
    if (policyForm) {
        policyForm.addEventListener('submit', function(e) {
            e.preventDefault();
            // In a real app, you would save the policy settings here
            alert('DMARC policy settings saved');
        });
    }
});
</script>
{% endblock %}