{% extends 'base.html' %}
{% load static %}

{% block title %}Expense Categories - Optinet Global Links{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="d-sm-flex align-items-center justify-content-between mb-4">
                <h1 class="h3 mb-0 text-gray-800">
                    <i class="bi bi-tags"></i> Expense Categories
                </h1>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{% url 'expenditure:dashboard' %}">Expenditure</a></li>
                        <li class="breadcrumb-item active">Categories</li>
                    </ol>
                </nav>
            </div>

            <div class="card shadow mb-4">
                <div class="card-header py-3 d-flex justify-content-between align-items-center">
                    <h6 class="m-0 font-weight-bold text-primary">All Categories</h6>
                    <a href="{% url 'expenditure:category_create' %}" class="btn btn-primary btn-sm">
                        <i class="bi bi-plus-circle me-1"></i> Add Category
                    </a>
                </div>
                <div class="card-body">
                    {% if categories %}
                        <div class="table-responsive">
                            <table class="table table-bordered">
                                <thead>
                                    <tr>
                                        <th>Name</th>
                                        <th>Description</th>
                                        <th>Status</th>
                                        <th>Expenses Count</th>
                                        <th>Created</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for category in categories %}
                                    <tr>
                                        <td>
                                            <strong>{{ category.name }}</strong>
                                        </td>
                                        <td>{{ category.description|truncatewords:15|default:"-" }}</td>
                                        <td>
                                            {% if category.is_active %}
                                                <span class="badge bg-success">Active</span>
                                            {% else %}
                                                <span class="badge bg-secondary">Inactive</span>
                                            {% endif %}
                                        </td>
                                        <td>
                                            <span class="badge bg-info">{{ category.expenses.count }}</span>
                                        </td>
                                        <td>{{ category.created_at|date:"M d, Y" }}</td>
                                        <td>
                                            <div class="btn-group btn-group-sm" role="group">
                                                <a href="{% url 'expenditure:category_edit' category.pk %}" 
                                                   class="btn btn-outline-primary" title="Edit">
                                                    <i class="bi bi-pencil"></i>
                                                </a>
                                                <a href="{% url 'expenditure:category_delete' category.pk %}" 
                                                   class="btn btn-outline-danger" title="Delete">
                                                    <i class="bi bi-trash"></i>
                                                </a>
                                            </div>
                                        </td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    {% else %}
                        <div class="text-center py-5">
                            <i class="bi bi-tags display-1 text-muted mb-3"></i>
                            <h5 class="text-muted">No expense categories found</h5>
                            <p class="text-muted mb-4">Create your first expense category to organize expenses.</p>
                            <a href="{% url 'expenditure:category_create' %}" class="btn btn-primary">
                                <i class="bi bi-plus-circle me-1"></i> Create Category
                            </a>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}