<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Income Statement - {{ start_date|date:"Y-m-d" }} to {{ end_date|date:"Y-m-d" }}</title>
    <style>
        body { font-family: Arial, sans-serif; font-size: 12px; }
        h1 { color: #333; text-align: center; margin-bottom: 5px; }
        h2 { text-align: center; margin-top: 0; color: #666; font-size: 14px; }
        h3 { border-bottom: 1px solid #333; padding-bottom: 3px; }
        table { width: 100%; border-collapse: collapse; margin: 10px 0; }
        td { padding: 4px; vertical-align: top; }
        .text-end { text-align: right; }
        .total-row { font-weight: bold; border-top: 1px solid #333; }
        .net-income { margin-top: 15px; text-align: right; font-size: 14px; }
        .footer { margin-top: 30px; font-size: 0.8em; text-align: right; }
    </style>
</head>
<body>
    <h1>Income Statement</h1>
    <h2>For Period {{ start_date|date:"F j, Y" }} to {{ end_date|date:"F j, Y" }}</h2>
    
    <!-- Revenue Section -->
    <h3>Revenue</h3>
    <table>
        <tbody>
            {% for revenue in revenues %}
            {% if revenue.total %}
            <tr>
                <td>{{ revenue.code }} - {{ revenue.name }}</td>
                <td class="text-end">{{ revenue.total|floatformat:2 }}</td>
            </tr>
            {% endif %}
            {% endfor %}
            <tr class="total-row">
                <td>Total Revenue</td>
                <td class="text-end">{{ total_revenue|floatformat:2 }}</td>
            </tr>
        </tbody>
    </table>
    
    <!-- Expense Section -->
    <h3>Expenses</h3>
    <table>
        <tbody>
            {% for expense in expenses %}
            {% if expense.total %}
            <tr>
                <td>{{ expense.code }} - {{ expense.name }}</td>
                <td class="text-end">{{ expense.total|floatformat:2 }}</td>
            </tr>
            {% endif %}
            {% endfor %}
            <tr class="total-row">
                <td>Total Expenses</td>
                <td class="text-end">{{ total_expenses|floatformat:2 }}</td>
            </tr>
        </tbody>
    </table>
    
    <!-- Net Income -->
    <div class="net-income">
        <strong>Net Income: </strong>
        <!-- <span style="color: {% if net_income >= 0 %}#28a745{% else %}#dc3545{% endif %};">
            {{ net_income|floatformat:2 }}
        </span> -->
    </div>
    
    <div class="footer">
        Generated on {{ now|date:"F j, Y H:i" }}
    </div>
</body>
</html>