{% extends "base.html" %}

{% block title %}
Rechnungswesen
{% endblock %}


{% block header_title %}
Rechnungswesen
{% endblock %}

{% block header_description %}
Angebote, Rechnungen, Mahnungen verwalten
{% endblock %}

{% block content %}

<!-- MODULE GRID -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">

    <a href="{% url 'invoices:invoices_offers_overview' %}" class="p-6 rounded-xl shadow bg-white dark:bg-slate-800 text-slate-900 dark:text-white transition-colors">
        <div class="text-2xl mb-2">📄</div>
        <h2 class="text-xl font-bold">Angebote</h2>
        <p class="text-slate-400 text-sm mt-1">Angebote erstellen und verwalten</p>
    </a>
    <a href="{% url 'invoices:invoices_invoices_overview' %}" class="p-6 rounded-xl shadow bg-white dark:bg-slate-800 text-slate-900 dark:text-white transition-colors">
        <div class="text-2xl mb-2">🧾</div>
        <h2 class="text-xl font-bold">Rechnungen</h2>
        <p class="text-slate-400 text-sm mt-1">Rechnungen erstellen und verwalten</p>
    </a>
    <a href="{% url 'invoices:invoices_reminders_overview' %}" class="p-6 rounded-xl shadow bg-white dark:bg-slate-800 text-slate-900 dark:text-white transition-colors">
        <div class="text-2xl mb-2">⚠️</div>
        <h2 class="text-xl font-bold">Mahnungen</h2>
        <p class="text-slate-400 text-sm mt-1">Offene Forderungen verfolgen</p>
    </a>
    <a href="{% url 'invoices:customers_overview' %}" class="p-6 rounded-xl shadow bg-white dark:bg-slate-800 text-slate-900 dark:text-white transition-colors">
        <div class="text-2xl mb-2">👥</div>
        <h2 class="text-xl font-bold">Kunden</h2>
        <p class="text-slate-400 text-sm mt-1">Kundenstammdaten verwalten</p>
    </a>
    <a href="{% url 'invoices:items_overview' %}" class="p-6 rounded-xl shadow bg-white dark:bg-slate-800 text-slate-900 dark:text-white transition-colors">
        <div class="text-2xl mb-2">📦</div>
        <h2 class="text-xl font-bold">Posten</h2>
        <p class="text-slate-400 text-sm mt-1">Leistungen und Artikel verwalten</p>
    </a>
</div>

<!-- OPTIONAL INFO BOX -->
<div class="p-6 rounded-xl shadow bg-white dark:bg-slate-800 text-slate-900 dark:text-white transition-colors mt-8">

    <h2 class="text-xl font-bold">
        Zusammenfassung
    </h2>

    <p class="text-slate-400 text-sm mt-1">
        folgt
    </p>

</div>

{% endblock %}