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

{% block title %}{{ _('Saved Report Views') }} - {{ 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'}
] %}

{{ page_header(
    icon_class='fas fa-save',
    title_text='Saved Report Views',
    subtitle_text='Manage your saved report configurations',
    breadcrumbs=breadcrumbs,
    actions_html='<a href="' + url_for("custom_reports.report_builder") + '" class="bg-primary text-white px-4 py-2 rounded-lg hover:bg-primary/90 transition-colors"><i class="fas fa-plus mr-2"></i>Create New Report</a>'
) }}

<div class="bg-card-light dark:bg-card-dark p-6 rounded-xl border border-border-light dark:border-border-dark shadow-sm">
    {% if saved_views %}
    <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-6 py-3 text-left text-xs font-medium text-text-muted-light dark:text-text-muted-dark uppercase tracking-wider">{{ _('Name') }}</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-text-muted-light dark:text-text-muted-dark uppercase tracking-wider">{{ _('Scope') }}</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-text-muted-light dark:text-text-muted-dark uppercase tracking-wider">{{ _('Features') }}</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-text-muted-light dark:text-text-muted-dark uppercase tracking-wider">{{ _('Created') }}</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-text-muted-light dark:text-text-muted-dark uppercase tracking-wider">{{ _('Updated') }}</th>
                    <th class="px-6 py-3 text-right text-xs font-medium text-text-muted-light dark:text-text-muted-dark uppercase tracking-wider">{{ _('Actions') }}</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-border-light dark:divide-border-dark">
                {% for view in saved_views %}
                <tr class="hover:bg-gray-50 dark:hover:bg-gray-800">
                    <td class="px-6 py-4 whitespace-nowrap" data-label="{{ _('Name') }}">
                        <div class="font-medium">{{ view.name }}</div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap" data-label="{{ _('Scope') }}">
                        <span class="px-2 py-1 text-xs rounded bg-primary/10 text-primary">{{ view.scope|title }}</span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap" data-label="{{ _('Features') }}">
                        <div class="flex flex-wrap gap-1">
                            {% if view.iterative_report_generation %}
                            <span class="px-2 py-1 text-xs rounded bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200" title="{{ _('Iterative Report Generation') }}">
                                <i class="fas fa-sync-alt mr-1"></i>{{ _('Iterative') }}
                            </span>
                            {% endif %}
                        </div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap" data-label="{{ _('Created') }}">
                        <div class="text-sm">{% if view.created_at %}{{ view.created_at|user_datetime }}{% endif %}</div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap" data-label="{{ _('Updated') }}">
                        <div class="text-sm">{% if view.updated_at %}{{ view.updated_at|user_datetime }}{% endif %}</div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium" data-label="{{ _('Actions') }}">
                        <div class="flex justify-end gap-2">
                            <a href="{{ url_for('custom_reports.view_custom_report', view_id=view.id) }}" class="text-blue-600 hover:text-blue-800" title="{{ _('View') }}">
                                <i class="fas fa-eye"></i>
                            </a>
                            <a href="{{ url_for('custom_reports.edit_saved_view', view_id=view.id) }}" class="text-green-600 hover:text-green-800" title="{{ _('Edit') }}">
                                <i class="fas fa-edit"></i>
                            </a>
                            <form method="POST" action="{{ url_for('custom_reports.delete_saved_view', view_id=view.id) }}" class="inline" onsubmit="return confirm('{{ _('Are you sure you want to delete this report view?') }}')">
                                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                                <button type="submit" class="text-red-600 hover:text-red-800" title="{{ _('Delete') }}">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </form>
                        </div>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% else %}
    {{ empty_state(
        'fas fa-save',
        _('No Saved Report Views'),
        _('Create and save report configurations to use them in scheduled reports.'),
        actions_html='<a href="' + url_for('custom_reports.report_builder') + '" class="btn btn-primary">' + _('Create Report') + '</a>'
    ) }}
    {% endif %}
</div>
{% endblock %}