{# app/templates/storefront/errors/422.html #}
{# 422 Unprocessable Entity error page - validation errors #}
{% extends "storefront/errors/base.html" %}

{% block icon %}📝{% endblock %}

{% block title %}422 - Invalid Information{% endblock %}

{% block extra_content %}
{% if details and details.validation_errors %}
<div class="my-8 mx-auto max-w-md text-left bg-red-50 p-6 rounded-xl border-l-4 border-theme-primary">
    <h3 class="text-gray-700 text-sm mb-3 font-semibold">Please correct:</h3>
    <ul class="list-none p-0 m-0">
    {% for error in details.validation_errors %}
        <li class="mb-2 text-red-800 text-sm">• {{ error.msg }}</li>
    {% endfor %}
    </ul>
</div>
{% endif %}
{% endblock %}

{% block action_buttons %}
<a href="javascript:history.back()"
   class="inline-flex items-center px-8 py-4 rounded-xl font-semibold text-white bg-theme-primary hover:opacity-90 hover:-translate-y-0.5 transition-all shadow-lg">
    Go Back and Fix
</a>
<a href="{{ base_url }}"
   class="inline-flex items-center px-8 py-4 rounded-xl font-semibold text-theme-primary border-2 border-theme-primary hover:bg-theme-primary hover:text-white hover:-translate-y-0.5 transition-all">
    Go to Home
</a>
{% endblock %}

{% block support_link %}
Having trouble? <a href="{{ base_url }}contact" class="text-theme-primary font-semibold hover:underline">We're here to help</a>
{% endblock %}