{% extends "base.html" %}

{% block content %}
<div class="mb-6 flex justify-between items-center">
    <a href="/" class="text-blue-600 hover:text-blue-800 font-medium">← Back to Dependents</a>
    <a href="/dependent/{{ dep_folder }}/gallery" class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors">Gallery View</a>
</div>

<div class="bg-white rounded-lg shadow p-6">
    <h2 class="text-xl font-semibold text-gray-900 mb-6">Monthly Reports for {{ dep_name }}</h2>
    
    <!-- Year Tabs -->
    {% set years = months.values() | map(attribute='year') | unique | list | sort %}
    {% if years|length > 1 %}
    <div class="border-b border-gray-200 mb-6">
        <nav class="flex space-x-8">
            {% for year in years %}
            <button onclick="showYear({{ year }})" class="year-tab py-2 px-1 border-b-2 font-medium text-sm {{ 'border-blue-500 text-blue-600' if loop.first else 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300' }}" data-year="{{ year }}">
                {{ year }}
            </button>
            {% endfor %}
        </nav>
    </div>
    {% endif %}
    
    <!-- Year Content -->
    {% set ns = namespace(current_year=None) %}
    {% for month, data in months.items() %}
        {% if data.year != ns.current_year %}
            {% if ns.current_year is not none %}
                </div>
            </div>
            {% endif %}
            {% set ns.current_year = data.year %}
            <div class="year-content {{ 'hidden' if not loop.first else '' }}" data-year="{{ ns.current_year }}">
                <h3 class="text-lg font-medium text-gray-700 mb-4">{{ ns.current_year }}</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
        {% endif %}
        
        <a href="/dependent/{{ dep_folder }}/month/{{ month }}" class="block">
            <div class="bg-white border border-gray-200 rounded-lg overflow-hidden hover:shadow-md transition-shadow">
                {% if data.random_image %}
                <img src="/media/{{ dep_folder }}/{{ data.random_image }}"
                     class="w-full h-96 object-cover" 
                     onerror="this.style.display='none';"
                     alt="{{ data.display_name }}">
                {% else %}
                <div class="w-full h-96 bg-gradient-to-r from-green-50 to-emerald-50"></div>
                {% endif %}
                <div class="p-4">
                    <h3 class="text-lg font-semibold text-gray-900">{{ data.display_name }}</h3>
                    <p class="text-sm text-gray-600">{{ data.reports|length }} reports</p>
                </div>
            </div>
        </a>
        
        {% if loop.last %}
                </div>
            </div>
        {% endif %}
    {% endfor %}
</div>

<script>
function showYear(year) {
    // Hide all year content
    document.querySelectorAll('.year-content').forEach(content => {
        content.classList.add('hidden');
    });
    
    // Show selected year content
    document.querySelector(`.year-content[data-year="${year}"]`).classList.remove('hidden');
    
    // Update tab styles
    document.querySelectorAll('.year-tab').forEach(tab => {
        tab.classList.remove('border-blue-500', 'text-blue-600');
        tab.classList.add('border-transparent', 'text-gray-500');
    });
    
    // Highlight active tab
    document.querySelector(`.year-tab[data-year="${year}"]`).classList.remove('border-transparent', 'text-gray-500');
    document.querySelector(`.year-tab[data-year="${year}"]`).classList.add('border-blue-500', 'text-blue-600');
}
</script>
{% endblock %}