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

{% block content %}
{% set breadcrumbs = [
    {'text': 'Expense Categories'}
] %}

{{ page_header(
    icon_class='fas fa-tags',
    title_text='Expense Categories',
    subtitle_text='Manage expense categories and budgets',
    breadcrumbs=breadcrumbs,
    actions_html='<a href="' + url_for("expense_categories.create_category") + '" 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>New Category</a>'
) }}

<!-- Summary Stats -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
    <div class="bg-card-light dark:bg-card-dark p-6 rounded-lg shadow">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-sm text-gray-600 dark:text-gray-400">Total Categories</p>
                <p class="text-2xl font-bold">{{ categories|length }}</p>
            </div>
            <div class="text-primary text-3xl">
                <i class="fas fa-tags"></i>
            </div>
        </div>
    </div>
    
    <div class="bg-card-light dark:bg-card-dark p-6 rounded-lg shadow">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-sm text-gray-600 dark:text-gray-400">Active Categories</p>
                <p class="text-2xl font-bold">{{ categories|selectattr('is_active')|list|length }}</p>
            </div>
            <div class="text-green-500 text-3xl">
                <i class="fas fa-check-circle"></i>
            </div>
        </div>
    </div>
    
    <div class="bg-card-light dark:bg-card-dark p-6 rounded-lg shadow">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-sm text-gray-600 dark:text-gray-400">With Budgets</p>
                <p class="text-2xl font-bold">{{ categories|selectattr('monthly_budget')|list|length }}</p>
            </div>
            <div class="text-blue-500 text-3xl">
                <i class="fas fa-chart-pie"></i>
            </div>
        </div>
    </div>
</div>

<!-- Categories Table -->
<div class="bg-card-light dark:bg-card-dark rounded-lg shadow overflow-hidden">
    <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
            <thead class="bg-gray-50 dark:bg-gray-800">
                <tr>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Category</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Code</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Monthly Budget</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Utilization</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Status</th>
                    <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Actions</th>
                </tr>
            </thead>
            <tbody class="bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-700">
                {% if categories %}
                    {% for category in categories %}
                    <tr class="hover:bg-gray-50 dark:hover:bg-gray-800">
                        <td class="px-6 py-4">
                            <div class="flex items-center">
                                {% if category.icon %}
                                <div class="flex-shrink-0 h-10 w-10 flex items-center justify-center rounded-full" style="{% if category.color %}background-color: {{ category.color }}20;{% else %}background-color: #f3f4f6;{% endif %}">
                                    <i class="{{ category.icon }} {% if category.color %}text-[{{ category.color }}]{% else %}text-gray-600{% endif %}"></i>
                                </div>
                                {% endif %}
                                <div class="ml-4">
                                    <a href="{{ url_for('expense_categories.view_category', category_id=category.id) }}" class="text-primary hover:underline font-medium">
                                        {{ category.name }}
                                    </a>
                                    {% if category.description %}
                                    <div class="text-xs text-gray-500">{{ category.description[:50] }}{% if category.description|length > 50 %}...{% endif %}</div>
                                    {% endif %}
                                </div>
                            </div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm">
                            {% if category.code %}
                            <span class="px-2 py-1 text-xs rounded-full bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200">
                                {{ category.code }}
                            </span>
                            {% else %}
                            <span class="text-gray-400">-</span>
                            {% endif %}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm">
                            {% if category.monthly_budget %}
                            €{{ '%.2f'|format(category.monthly_budget) }}
                            {% else %}
                            <span class="text-gray-400">No budget</span>
                            {% endif %}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm">
                            {% set util = category.monthly_utilization if category.monthly_utilization is not none else None %}
                            {% if util is not none %}
                                <div class="flex items-center">
                                    <div class="w-24 bg-gray-200 dark:bg-gray-700 rounded-full h-2 mr-2">
                                        <div class="{% if util >= (category.budget_threshold_percent or 80) %}bg-red-500{% elif util >= (category.budget_threshold_percent or 80) * 0.8 %}bg-yellow-500{% else %}bg-green-500{% endif %} h-2 rounded-full" style="width: {{ [util, 100]|min }}%"></div>
                                    </div>
                                    <span class="{% if util >= (category.budget_threshold_percent or 80) %}text-red-600{% elif util >= (category.budget_threshold_percent or 80) * 0.8 %}text-yellow-600{% else %}text-green-600{% endif %}">{{ util }}%</span>
                                </div>
                            {% else %}
                                <span class="text-gray-400">-</span>
                            {% endif %}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm">
                            {% if category.is_active %}
                            <span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
                                Active
                            </span>
                            {% else %}
                            <span class="px-2 py-1 text-xs rounded-full bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200">
                                Inactive
                            </span>
                            {% endif %}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                            <div class="flex items-center justify-end gap-2">
                                <a href="{{ url_for('expense_categories.view_category', category_id=category.id) }}" class="text-primary hover:text-primary/80" title="View">
                                    <i class="fas fa-eye"></i>
                                </a>
                                <a href="{{ url_for('expense_categories.edit_category', category_id=category.id) }}" class="text-blue-600 hover:text-blue-800" title="Edit">
                                    <i class="fas fa-edit"></i>
                                </a>
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                {% else %}
                    <tr>
                        <td colspan="6" class="px-6 py-8 text-center text-gray-500">
                            <i class="fas fa-tags text-4xl mb-2 opacity-50"></i>
                            <p>No expense categories found</p>
                            <a href="{{ url_for('expense_categories.create_category') }}" class="text-primary hover:underline mt-2 inline-block">
                                Create your first category
                            </a>
                        </td>
                    </tr>
                {% endif %}
            </tbody>
        </table>
    </div>
</div>

{% endblock %}