{% if valid %}
<div class="notification notification-success" data-testid="validation-success">
    Validation passed - all fields are valid.
</div>
{% if checks %}
<details class="validation-checks-summary" data-testid="validation-checks" open>
    <summary class="text-muted">{{ checks|length }} check(s) passed</summary>
    <ul class="validation-checks-list">
        {% set ns = namespace(current_field='') %}
        {% for check in checks|sort(attribute='field') %}
        {% if check.field != ns.current_field %}
        {% if ns.current_field != '' %}</ul></li>{% endif %}
        {% set ns.current_field = check.field %}
        <li class="validation-field-group">
            <strong>{{ check.field }}</strong>
            <ul class="validation-field-checks">
        {% endif %}
        <li class="validation-check-item validation-check-passed">
            <span class="check-icon check-passed" title="Passed">&#x2713;</span>
            <span class="check-name">{{ check.check }}</span>
        </li>
        {% endfor %}
        {% if ns.current_field != '' %}</ul></li>{% endif %}
    </ul>
</details>
{% elif rules %}
<details class="validation-rules-summary" data-testid="validation-rules">
    <summary class="text-muted">{{ rules|length }} rule(s) checked</summary>
    <ul class="validation-rules-list">
        {% for rule in rules %}
        <li class="validation-rule-item">
            <strong>{{ rule.name }}</strong>
            {% if rule.description %}<span class="text-muted">- {{ rule.description }}</span>{% endif %}
        </li>
        {% endfor %}
    </ul>
</details>
{% endif %}
<script>
    // Clear any previous error highlights
    document.querySelectorAll('.field-error').forEach(el => el.classList.remove('field-error'));
</script>
{% else %}
<div class="validation-errors" data-testid="validation-errors">
    <div class="notification notification-error mb-2">
        Validation failed - {{ errors|length }} error(s) found:
    </div>
    {% if checks %}
    <div class="validation-checks-detail" data-testid="validation-checks">
        <ul class="validation-checks-list">
            {% set ns = namespace(current_field='') %}
            {% for check in checks|sort(attribute='field') %}
            {% if check.field != ns.current_field %}
            {% if ns.current_field != '' %}</ul></li>{% endif %}
            {% set ns.current_field = check.field %}
            <li class="validation-field-group" {% if not check.passed %}data-testid="validation-error-{{ check.field }}"{% endif %}>
                <strong>{{ check.field }}</strong>
                <ul class="validation-field-checks">
            {% endif %}
            <li class="validation-check-item {% if check.passed %}validation-check-passed{% else %}validation-check-failed{% endif %}" {% if not check.passed %}data-testid="validation-error-{{ check.field }}"{% endif %}>
                {% if check.passed %}
                <span class="check-icon check-passed" title="Passed">&#x2713;</span>
                {% else %}
                <span class="check-icon check-failed" title="Failed">&#x2717;</span>
                {% endif %}
                <span class="check-name">{{ check.check }}</span>
                {% if check.message %}<span class="check-message text-muted">- {{ check.message }}</span>{% endif %}
            </li>
            {% endfor %}
            {% if ns.current_field != '' %}</ul></li>{% endif %}
        </ul>
    </div>
    {% else %}
    <ul class="validation-error-list">
        {% for error in errors %}
        <li class="validation-error-item" data-testid="validation-error-{{ error.field }}" data-field="{{ error.field }}">
            <strong>{{ error.field }}</strong>: {{ error.message }}
            {% if error.rule %}<span class="text-muted text-small">({{ error.rule }})</span>{% endif %}
        </li>
        {% endfor %}
    </ul>
    {% endif %}
    {% if rules %}
    <details class="validation-rules-summary mt-2" data-testid="validation-rules">
        <summary class="text-muted">{{ rules|length }} rule(s) checked</summary>
        <ul class="validation-rules-list">
            {% for rule in rules %}
            <li class="validation-rule-item">
                <strong>{{ rule.name }}</strong>
                {% if rule.description %}<span class="text-muted">- {{ rule.description }}</span>{% endif %}
            </li>
            {% endfor %}
        </ul>
    </details>
    {% endif %}
</div>
<script>
    // Clear previous highlights
    document.querySelectorAll('.field-error').forEach(el => el.classList.remove('field-error'));

    // Highlight error fields
    const errorFields = {{ errors | map(attribute='field') | list | tojson | safe }};
    errorFields.forEach(fieldName => {
        // Try different selectors to find the field
        const selectors = [
            `[name="${fieldName}"]`,
            `[name="${fieldName.toLowerCase()}"]`,
            `[data-field="${fieldName}"]`,
            `#field-${fieldName}`,
            `#field-${fieldName.toLowerCase()}`
        ];
        for (const selector of selectors) {
            const field = document.querySelector(selector);
            if (field) {
                field.classList.add('field-error');
                // Also highlight parent form-group if exists
                const formGroup = field.closest('.form-group');
                if (formGroup) formGroup.classList.add('field-error');
                break;
            }
        }
    });

    // Scroll first error into view
    const firstError = document.querySelector('.field-error');
    if (firstError) {
        firstError.scrollIntoView({ behavior: 'smooth', block: 'center' });
    }
</script>
{% endif %}