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

{% block content %}
<div class="row g-3">
    <!-- Nav cards -->
    <div class="col-12 col-sm-6 col-lg-3">
        <a href="{{ url_for('settings.profile') }}" class="text-decoration-none">
            <div class="pcard text-center py-4" style="transition:all .15s;" onmouseover="this.style.borderColor='#3b82f6'" onmouseout="this.style.borderColor='var(--border)'">
                <i class="bi bi-person-circle" style="font-size:2rem;color:#3b82f6;"></i>
                <div style="font-size:14px;font-weight:600;margin-top:10px;">Profile</div>
                <div style="font-size:12px;color:var(--muted);margin-top:4px;">Name, currency, timezone, AI model</div>
            </div>
        </a>
    </div>
    <div class="col-12 col-sm-6 col-lg-3">
        <a href="{{ url_for('settings.recurring') }}" class="text-decoration-none">
            <div class="pcard text-center py-4" style="transition:all .15s;" onmouseover="this.style.borderColor='#10b981'" onmouseout="this.style.borderColor='var(--border)'">
                <i class="bi bi-repeat" style="font-size:2rem;color:#10b981;"></i>
                <div style="font-size:14px;font-weight:600;margin-top:10px;">Recurring</div>
                <div style="font-size:12px;color:var(--muted);margin-top:4px;">Automate recurring income & expenses</div>
            </div>
        </a>
    </div>
    <div class="col-12 col-sm-6 col-lg-3">
        <a href="{{ url_for('settings.import_csv') }}" class="text-decoration-none">
            <div class="pcard text-center py-4" style="transition:all .15s;" onmouseover="this.style.borderColor='#f59e0b'" onmouseout="this.style.borderColor='var(--border)'">
                <i class="bi bi-upload" style="font-size:2rem;color:#f59e0b;"></i>
                <div style="font-size:14px;font-weight:600;margin-top:10px;">Import</div>
                <div style="font-size:12px;color:var(--muted);margin-top:4px;">Bulk import from CSV file</div>
            </div>
        </a>
    </div>
    <div class="col-12 col-sm-6 col-lg-3">
        <a href="{{ url_for('settings.password') }}" class="text-decoration-none">
            <div class="pcard text-center py-4" style="transition:all .15s;" onmouseover="this.style.borderColor='#8b5cf6'" onmouseout="this.style.borderColor='var(--border)'">
                <i class="bi bi-shield-lock" style="font-size:2rem;color:#8b5cf6;"></i>
                <div style="font-size:14px;font-weight:600;margin-top:10px;">Security</div>
                <div style="font-size:12px;color:var(--muted);margin-top:4px;">Change password</div>
            </div>
        </a>
    </div>
</div>

<!-- Upcoming recurring -->
{% if upcoming %}
<div class="pcard mt-4">
    <div class="pcard-title mb-3">Upcoming Recurring (next 30 days)</div>
    <table class="pfm-table">
        <thead><tr><th>Date</th><th>Description</th><th>Type</th><th class="text-end">Amount</th></tr></thead>
        <tbody>
        {% for item in upcoming[:10] %}
        <tr>
            <td style="font-size:12px;color:var(--muted);white-space:nowrap;">{{ item.date.strftime('%b %d') }}</td>
            <td style="font-size:13px;">{{ item.description }}</td>
            <td><span class="badge {% if item.type == 'income' %}badge-income{% else %}badge-expense{% endif %}" style="font-size:11px;">{{ item.type | title }}</span></td>
            <td class="text-end mono {% if item.type == 'income' %}text-income{% else %}text-expense{% endif %}" style="font-size:13px;">{{ item.amount | currency }}</td>
        </tr>
        {% endfor %}
        </tbody>
    </table>
</div>
{% endif %}
{% endblock %}