{% extends "base.html" %}

{% block title %}Home - Invoice Generation Service{% endblock %}

{% block content %}
<div class="card">
    <h2>Welcome to the Invoice Generation Service</h2>
    <p>This application allows you to create, manage, and track invoices. Use the navigation menu above to access different features.</p>
    
    <div class="features">
        <div class="feature">
            <h3>Create Invoices</h3>
            <p>Generate new invoices with customer information, due dates, and line items.</p>
            <a href="{{ url_for('create_invoice_page') }}" class="btn">Create Invoice</a>
        </div>
        
        <div class="feature">
            <h3>Find Invoices</h3>
            <p>Look up existing invoices by their unique invoice number.</p>
            <a href="{{ url_for('search_invoice_page') }}" class="btn">Find Invoice</a>
        </div>
    </div>
</div>

{% if invoices %}
<div class="card">
    <h2>Recent Invoices</h2>
    <table>
        <thead>
            <tr>
                <th>Invoice Number</th>
                <th>Customer</th>
                <th>Date Created</th>
                <th>Due Date</th>
                <th>Total Amount</th>
                <th>Status</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            {% for invoice in invoices %}
            <tr>
                <td>{{ invoice.invoice_number }}</td>
                <td>{{ invoice.customer_name }}</td>
                <td>{{ invoice.date_created.strftime('%Y-%m-%d') }}</td>
                <td>{{ invoice.due_date.strftime('%Y-%m-%d') }}</td>
                <td>${{ "%.2f"|format(invoice.total_amount) }}</td>
                <td>
                    <span class="invoice-status status-{{ invoice.status.lower() }}">
                        {{ invoice.status }}
                    </span>
                </td>
                <td>
                    <a href="{{ url_for('invoice_details', invoice_id=invoice.id) }}" class="btn">View</a>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% endif %}
{% endblock %}

{% block extra_css %}
<style>
    .features {
        display: flex;
        gap: 2rem;
        margin-top: 2rem;
    }
    
    .feature {
        flex: 1;
        padding: 1.5rem;
        background-color: #f9f9f9;
        border-radius: 8px;
        text-align: center;
    }
    
    .feature h3 {
        margin-bottom: 0.5rem;
        color: #2c3e50;
    }
    
    .feature p {
        margin-bottom: 1.5rem;
        color: #7f8c8d;
    }
    
    @media (max-width: 768px) {
        .features {
            flex-direction: column;
        }
    }
</style>
{% endblock %}