{% extends "base.html" %}
{% block title %}Categories{% endblock %}
{% block page_title %}Categories{% endblock %}

{% block topbar_actions %}
<a href="{{ url_for('categories.new', type='expense') }}" class="btn btn-sm btn-outline-secondary" style="font-size:12px;"><i class="bi bi-plus-lg me-1"></i>Expense</a>
<a href="{{ url_for('categories.new', type='income') }}" class="btn btn-sm btn-primary ms-1" style="font-size:12px;"><i class="bi bi-plus-lg me-1"></i>Income</a>
{% endblock %}

{% block content %}
<div class="row g-4">
    <div class="col-12 col-lg-6">
        <div class="pcard">
            <div class="pcard-title mb-3">Expense Categories</div>
            {% if expense_cats %}
            <table class="pfm-table">
                <thead><tr><th>Category</th><th>Type</th><th class="text-end">Actions</th></tr></thead>
                <tbody>
                {% for cat in expense_cats %}
                <tr>
                    <td>
                        <div class="d-flex align-items-center gap-2">
                            <div style="width:28px;height:28px;border-radius:7px;background:{{ cat.color }}22;color:{{ cat.color }};display:flex;align-items:center;justify-content:center;font-size:14px;">
                                <i class="bi {{ cat.icon }}"></i>
                            </div>
                            <span style="font-size:13px;font-weight:500;">{{ cat.name }}</span>
                            {% if cat.is_system %}<span style="font-size:10px;background:#f1f5f9;color:var(--muted);border-radius:4px;padding:1px 5px;">system</span>{% endif %}
                        </div>
                    </td>
                    <td><span style="font-size:12px;color:var(--muted);">{{ cat.category_type | title }}</span></td>
                    <td class="text-end">
                        <a href="{{ url_for('categories.edit', id=cat.id) }}" class="btn btn-sm btn-outline-secondary" style="font-size:11px;padding:2px 8px;">Edit</a>
                        {% if not cat.is_system %}
                        <form method="POST" action="{{ url_for('categories.delete', id=cat.id) }}" style="display:inline;" onsubmit="return confirm('Remove this category?')">
                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                            <button type="submit" class="btn btn-sm btn-outline-danger ms-1" style="font-size:11px;padding:2px 8px;">Del</button>
                        </form>
                        {% endif %}
                    </td>
                </tr>
                {% endfor %}
                </tbody>
            </table>
            {% else %}
            <p class="text-muted small">No expense categories.</p>
            {% endif %}
        </div>
    </div>
    <div class="col-12 col-lg-6">
        <div class="pcard">
            <div class="pcard-title mb-3">Income Categories</div>
            {% if income_cats %}
            <table class="pfm-table">
                <thead><tr><th>Category</th><th>Type</th><th class="text-end">Actions</th></tr></thead>
                <tbody>
                {% for cat in income_cats %}
                <tr>
                    <td>
                        <div class="d-flex align-items-center gap-2">
                            <div style="width:28px;height:28px;border-radius:7px;background:{{ cat.color }}22;color:{{ cat.color }};display:flex;align-items:center;justify-content:center;font-size:14px;">
                                <i class="bi {{ cat.icon }}"></i>
                            </div>
                            <span style="font-size:13px;font-weight:500;">{{ cat.name }}</span>
                            {% if cat.is_system %}<span style="font-size:10px;background:#f1f5f9;color:var(--muted);border-radius:4px;padding:1px 5px;">system</span>{% endif %}
                        </div>
                    </td>
                    <td><span style="font-size:12px;color:var(--muted);">{{ cat.category_type | title }}</span></td>
                    <td class="text-end">
                        <a href="{{ url_for('categories.edit', id=cat.id) }}" class="btn btn-sm btn-outline-secondary" style="font-size:11px;padding:2px 8px;">Edit</a>
                        {% if not cat.is_system %}
                        <form method="POST" action="{{ url_for('categories.delete', id=cat.id) }}" style="display:inline;" onsubmit="return confirm('Remove this category?')">
                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                            <button type="submit" class="btn btn-sm btn-outline-danger ms-1" style="font-size:11px;padding:2px 8px;">Del</button>
                        </form>
                        {% endif %}
                    </td>
                </tr>
                {% endfor %}
                </tbody>
            </table>
            {% else %}
            <p class="text-muted small">No income categories.</p>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}