{% extends 'base.html' %}

{% block title %}{{ category.name }} | {{ site_settings.site_name }}{% endblock %}

{% block content %}
<div class="w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-8 pb-16 md:pt-10 md:pb-24 flex flex-col items-center justify-center min-h-[60vh]">
    {% if category.image %}
    <div class="w-full rounded-2xl overflow-hidden shadow-xl max-w-[850px] border border-gray-100 mb-8 mt-4" data-aos="zoom-in" data-aos-duration="1000" data-aos-easing="ease-out-cubic">
        <img src="{{ category.image.url }}" alt="{{ category.name }}" class="w-full h-auto object-cover hover:scale-105 transition-transform duration-500">
    </div>
    {% else %}
    <div class="w-full max-w-4xl rounded-2xl overflow-hidden shadow-md bg-gradient-to-r from-gray-50 to-gray-100 flex flex-col items-center justify-center min-h-[400px] border border-gray-200">
        <svg class="w-16 h-16 text-gray-300 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
        <span class="text-gray-500 text-lg font-medium">Image for {{ category.name }} is coming soon</span>
    </div>
    {% endif %}
</div>
{% endblock %}