{% extends "store/errors/base.html" %}

{% block icon %}📋{% endblock %}

{% block title %}422 - Validation Error{% endblock %}

{% block content %}
<div class="error-icon">📋</div>
<div class="status-code">422</div>
<div class="status-name">Validation Error</div>
<div class="error-message">
    The data you submitted contains errors. Please review and correct the highlighted fields.
</div>
<div class="error-code">Error Code: {{ error_code }}</div>

{% if details and details.validation_errors %}
<div class="validation-errors" style="margin: 2rem 0; text-align: left;">
    <h3 style="color: #dc2626; font-size: 1rem; margin-bottom: 1rem;">Validation Errors:</h3>
    <ul style="list-style: none; padding: 0;">
    {% for error in details.validation_errors %}
        <li style="padding: 0.5rem; margin-bottom: 0.5rem; background: #fef2f2; border-left: 3px solid #dc2626; border-radius: 0.25rem;">
            <strong style="color: #991b1b;">{{ error.loc | join(' → ') }}:</strong>
            <span style="color: #7f1d1d;">{{ error.msg }}</span>
        </li>
    {% endfor %}
    </ul>
</div>
{% endif %}

<div class="action-buttons">
    <a href="javascript:history.back()" class="btn btn-primary">Go Back</a>
    <a href="/store/{{ store_code }}/dashboard" class="btn btn-secondary">Dashboard</a>
</div>

{% if show_debug %}
<div class="debug-info">
    <h3>🔧 Debug Information</h3>
    <div class="debug-item">
        <span class="debug-label">Path:</span>
        <span class="debug-value">{{ path }}</span>
    </div>
    <div class="debug-item">
        <span class="debug-label">Error Code:</span>
        <span class="debug-value">{{ error_code }}</span>
    </div>
    {% if details %}
    <div class="debug-item">
        <span class="debug-label">Details:</span>
        <pre>{{ details | tojson(indent=2) }}</pre>
    </div>
    {% endif %}
</div>
{% endif %}

<div class="support-link">
    Still having issues? <a href="/store/{{ store_code }}/support">Contact Support</a>
</div>
{% endblock %}