{% extends "base.html" %}
{% from "components/ui.html" import page_header %}

{% block title %}{{ saved_view.name }} - {{ _('Iterative Report') }} - {{ app_name }}{% endblock %}

{% block content %}
{% set breadcrumbs = [
    {'text': 'Reports', 'url': url_for('reports.reports')},
    {'text': 'Report Builder', 'url': url_for('custom_reports.report_builder')},
    {'text': 'Saved Views', 'url': url_for('custom_reports.list_saved_views')},
    {'text': saved_view.name}
] %}

{{ page_header(
    icon_class='fas fa-sync-alt',
    title_text=saved_view.name,
    subtitle_text=_('Iterative Report - One report per %(field_name)s value', field_name=custom_field_name),
    breadcrumbs=breadcrumbs,
    actions_html='<a href="' + url_for("custom_reports.report_builder", view_id=saved_view.id) + '" class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 px-4 py-2 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors"><i class="fas fa-edit mr-2"></i>' + _('Edit') + '</a>'
) }}

<div class="space-y-6">
    {% if iterative_reports %}
        {% for field_value, report_data in iterative_reports.items() %}
        <div class="bg-card-light dark:bg-card-dark p-6 rounded-xl border border-border-light dark:border-border-dark shadow-sm">
                <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-2 mb-4 pb-4 border-b border-border-light dark:border-border-dark">
                <h3 class="text-lg font-semibold">
                    <i class="fas fa-tag text-primary mr-2"></i>
                    {{ custom_field_name|replace('_', ' ')|title }}: <span class="text-primary">{{ field_value }}</span>
                </h3>
                <div class="text-sm text-text-muted-light dark:text-text-muted-dark">
                    {{ report_data.summary.get('total_entries', 0) }} {{ _('entries') }} • 
                    {{ report_data.summary.get('total_hours', 0) }} {{ _('hours') }}
                </div>
            </div>
            
            {% if report_data.data and report_data.data|length > 0 %}
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-border-light dark:divide-border-dark responsive-cards">
                    <thead>
                        <tr>
                            <th class="px-4 py-3 text-left text-xs font-medium text-text-muted-light dark:text-text-muted-dark uppercase">{{ _('Date') }}</th>
                            <th class="px-4 py-3 text-left text-xs font-medium text-text-muted-light dark:text-text-muted-dark uppercase">{{ _('Client') }}</th>
                            <th class="px-4 py-3 text-left text-xs font-medium text-text-muted-light dark:text-text-muted-dark uppercase">{{ _('Project') }}</th>
                            <th class="px-4 py-3 text-left text-xs font-medium text-text-muted-light dark:text-text-muted-dark uppercase">{{ _('User') }}</th>
                            <th class="px-4 py-3 text-right text-xs font-medium text-text-muted-light dark:text-text-muted-dark uppercase">{{ _('Hours') }}</th>
                            <th class="px-4 py-3 text-left text-xs font-medium text-text-muted-light dark:text-text-muted-dark uppercase">{{ _('Notes') }}</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-border-light dark:divide-border-dark">
                        {% for entry in report_data.data %}
                        <tr class="hover:bg-gray-50 dark:hover:bg-gray-800">
                            <td class="px-4 py-3 whitespace-nowrap text-sm" data-label="{{ _('Date') }}">{{ entry.get('date', '') }}</td>
                            <td class="px-4 py-3 whitespace-nowrap text-sm" data-label="{{ _('Client') }}">{{ entry.get('client', '') }}</td>
                            <td class="px-4 py-3 whitespace-nowrap text-sm" data-label="{{ _('Project') }}">{{ entry.get('project', '') }}</td>
                            <td class="px-4 py-3 whitespace-nowrap text-sm" data-label="{{ _('User') }}">{{ entry.get('user', '') }}</td>
                            <td class="px-4 py-3 whitespace-nowrap text-sm text-right" data-label="{{ _('Hours') }}">{{ "%.2f"|format(entry.get('duration', 0) or 0) }}</td>
                            <td class="px-4 py-3 text-sm text-text-muted-light dark:text-text-muted-dark" data-label="{{ _('Notes') }}">{{ (entry.get('notes', '') or '')[:50] }}{% if (entry.get('notes', '') or '')|length > 50 %}...{% endif %}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                    <tfoot>
                        <tr class="bg-gray-50 dark:bg-gray-800 font-semibold">
                            <td colspan="4" class="px-4 py-3 text-right">{{ _('Total') }}:</td>
                            <td class="px-4 py-3 text-right">{{ "%.2f"|format(report_data.summary.get('total_hours', 0) or 0) }} {{ _('hours') }}</td>
                            <td></td>
                        </tr>
                    </tfoot>
                </table>
            </div>
            
            {% if report_data.summary.get('by_client') %}
            <div class="mt-6 pt-6 border-t border-border-light dark:border-border-dark">
                <h4 class="text-sm font-semibold mb-3">{{ _('Summary by Client') }}</h4>
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                    {% for client_name, client_data in report_data.summary.get('by_client', {}).items() %}
                    <div class="bg-gray-50 dark:bg-gray-800 p-3 rounded">
                        <div class="font-medium">{{ client_name }}</div>
                        <div class="text-sm text-text-muted-light dark:text-text-muted-dark">
                            {{ "%.2f"|format(client_data.get('hours', 0) or 0) }} {{ _('hours') }}
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
            {% endif %}
            {% else %}
            <div class="text-center py-8 text-text-muted-light dark:text-text-muted-dark">
                <i class="fas fa-inbox text-3xl mb-2"></i>
                <p>{{ _('No data found for this %(field_name)s value', field_name=custom_field_name) }}</p>
            </div>
            {% endif %}
        </div>
        {% endfor %}
    {% else %}
    <div class="bg-card-light dark:bg-card-dark p-6 rounded-xl border border-border-light dark:border-border-dark shadow-sm text-center">
        <i class="fas fa-exclamation-triangle text-3xl text-yellow-500 mb-4"></i>
        <p class="text-text-muted-light dark:text-text-muted-dark">
            {{ _('No unique values found for custom field "%(field_name)s"', field_name=custom_field_name) }}
        </p>
    </div>
    {% endif %}
</div>
{% endblock %}