{% extends "base.html" %}

{% block content %}
<div class="mb-6">
    <a href="/dependent/{{ dep_folder }}" class="text-blue-600 hover:text-blue-800 font-medium">← Back to {{ dep_name }}</a>
</div>

<div class="bg-white rounded-lg shadow p-6">
    <h2 class="text-xl font-semibold text-gray-900 mb-6">Reports for {{ dep_name }} - {{ month_display }}</h2>
    
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        {% for item in reports %}
        <a href="/dependent/{{ dep_folder }}/report/{{ item.report.date }}" class="block">
            <div class="bg-white border border-gray-200 rounded-lg overflow-hidden hover:shadow-md transition-shadow">
                {% if item.random_image %}
                <img src="/media/{{ dep_folder }}/{{ item.random_image }}"
                     class="w-full h-64 object-cover" 
                     onerror="this.style.display='none';"
                     alt="{{ item.display_date }}">
                {% else %}
                <div class="w-full h-64 bg-gradient-to-r from-blue-50 to-indigo-50"></div>
                {% endif %}
                <div class="p-3">
                    <h3 class="font-semibold text-gray-900">{{ item.display_date }}</h3>
                </div>
            </div>
        </a>
        {% endfor %}
    </div>
</div>
{% endblock %}