{% extends 'base.html.twig' %}
{% block title %}Invoice Not Found{% endblock %}

{% block stylesheets %}
<style>
    body { background: #f3f4f6; }
</style>
{% endblock %}

{% block body %}
<div class="min-h-screen flex items-center justify-center py-12 px-4">
    <div class="max-w-md w-full text-center">
        <div class="mb-8">
            <a href="{{ path('website_home') }}">
                <img src="{{ asset('images/logo-color.jpg') }}" alt="Logo" class="h-16 mx-auto mb-6 hover:opacity-80 transition-opacity">
            </a>
        </div>

        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-8">
            <div class="w-16 h-16 bg-red-50 rounded-full flex items-center justify-center mx-auto mb-4">
                <i class="bi bi-file-earmark-x text-red-400 text-3xl"></i>
            </div>
            <h1 class="text-xl font-bold text-gray-800 mb-2">Invoice Not Found</h1>
            <p class="text-gray-500 text-sm mb-6">The invoice you're looking for doesn't exist or the link may have expired. Please double-check the URL or try searching for it below.</p>

            <a href="{{ path('public_invoice_search') }}" class="inline-flex items-center gap-2 px-5 py-2.5 bg-kitsco-accent text-white rounded-lg font-medium hover:bg-kitsco-dark transition-colors">
                <i class="bi bi-search"></i> Search for Invoice
            </a>
        </div>

        <div class="mt-6 space-y-2">
            <p class="text-gray-500 text-sm">
                Having trouble? <a href="{{ path('website_home') }}#contact" class="text-kitsco-accent hover:underline">Contact us</a>
            </p>
            <p>
                <a href="{{ path('website_home') }}" class="text-gray-400 text-xs hover:text-gray-600">
                    <i class="bi bi-arrow-left"></i> Back to Homepage
                </a>
            </p>
        </div>
    </div>
</div>
{% endblock %}