{% extends "base.html" %}

{% block title %}Error {{ status_code }} - ECM Control{% endblock %}

{% block content %}
<div class="row">
    <div class="col-md-8 offset-md-2">
        <div class="card border-danger">
            <div class="card-header bg-danger text-white">
                <h4 class="mb-0">
                    <i class="fas fa-exclamation-triangle"></i>
                    Error {{ status_code or 500 }}
                </h4>
            </div>
            <div class="card-body">
                <h5 class="card-title">{{ error_message or "An unexpected error occurred" }}</h5>
                
                {% if error_detail %}
                <div class="alert alert-warning mt-3">
                    <h6>Debug Information:</h6>
                    <pre class="mb-0"><code>{{ error_detail }}</code></pre>
                </div>
                {% endif %}
                
                <div class="mt-4">
                    <a href="/" class="btn btn-primary">
                        <i class="fas fa-home"></i>
                        Return to Dashboard
                    </a>
                    <button onclick="history.back()" class="btn btn-secondary">
                        <i class="fas fa-arrow-left"></i>
                        Go Back
                    </button>
                </div>
            </div>
        </div>
        
        <div class="mt-4">
            <h6>Troubleshooting Tips:</h6>
            <ul class="list-unstyled">
                <li>• Check the server logs for more details</li>
                <li>• Verify that all required fields are filled correctly</li>
                <li>• Ensure your browser is up to date</li>
                <li>• Try refreshing the page</li>
            </ul>
        </div>
    </div>
</div>
{% endblock %}