{% extends "layouts/base.html" %}

{% block title %}Kakebo - Settings{% endblock %}

{% block content %}
<div class="px-4 py-6 max-w-2xl mx-auto">
    <h1 class="text-2xl font-bold mb-6">Settings</h1>

    {# Categories section #}
    <h2 class="text-xl font-semibold mb-4">Categories</h2>
    <div id="categories-section">
        {% include "pages/expenses/partials/categories_section.html" %}
    </div>

    <div class="divider"></div>

    {# Fixed expenses section #}
    <h2 class="text-xl font-semibold mb-4">Fixed expenses</h2>
    <div id="fixed-expenses-section">
        {% include "pages/expenses/partials/fixed_expenses_section.html" %}
    </div>

    <div class="divider"></div>

    {# Data #}
    <h2 class="text-xl font-semibold mb-4">Data</h2>
    <div class="card bg-base-100 shadow-sm mb-6">
        <div class="card-body p-4">
            <div class="flex justify-between items-center">
                <div>
                    <p class="font-medium">Export expenses</p>
                    <p class="text-sm text-base-content/60">Download all expenses as CSV</p>
                </div>
                <a href="{% url 'expenses:export_csv' %}" class="btn btn-outline btn-sm">Export CSV</a>
            </div>
        </div>
    </div>

    <div class="divider"></div>

    {# Danger zone #}
    <h2 class="text-xl font-semibold mb-4 text-error">Danger zone</h2>
    <div class="card bg-base-100 border border-error shadow-sm mb-6">
        <div class="card-body p-4">
            <div class="flex justify-between items-center">
                <div>
                    <p class="font-medium">Logout</p>
                    <p class="text-sm text-base-content/60">End your current session</p>
                </div>
                <a href="{% url 'public:logout' %}" class="btn btn-error btn-sm">Logout</a>
            </div>
        </div>
    </div>
</div>
{% endblock %}