{% extends '@EasyAdmin/crud/detail.html.twig' %}

{# Override the main content block #}
{% block main %}
    {# Call the parent block first to maintain standard layout #}
    {{ parent() }}

    {# Custom additions after the standard form #}
    {% if entity.instance.filename is defined and entity.instance.filename %}
        <div class="content-panel">
            <div class="content-panel-body with-background">
                <h2>Produktbild Vorschau</h2>
                <div class="product-detail-image">
                    <img
                            src="{{ asset('img/products/' ~ entity.instance.filename) }}"
                            alt="{{ entity.instance.description }}"
                            class="img-fluid rounded"
                    >
                    <div class="image-overlay">
                        <div class="image-info">
                            <p><strong>Dateiname:</strong> {{ entity.instance.filename }}</p>
                            <p><strong>Design:</strong> {{ entity.instance.designer }}</p>
                        </div>
                    </div>
                </div>

                <style>
                    .product-detail-image {
                        position: relative;
                        margin: 20px 0;
                        max-width: 500px;
                        overflow: hidden;
                        border: 1px solid #ddd;
                        border-radius: 4px;
                    }

                    .product-detail-image img {
                        width: 100%;
                        display: block;
                        transition: transform 0.3s ease;
                    }

                    .image-overlay {
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        right: 0;
                        background: rgba(0, 0, 0, 0.7);
                        color: white;
                        padding: 10px;
                        transform: translateY(100%);
                        transition: transform 0.3s ease;
                    }

                    .product-detail-image:hover img {
                        transform: scale(1.05);
                    }

                    .product-detail-image:hover .image-overlay {
                        transform: translateY(0);
                    }
                </style>
            </div>
        </div>
    {% endif %}
{% endblock %}