{% extends "base.html" %}
{% load static %}

{% block title %}Client Reports - AI ML Operations{% endblock %}

{% block content %}
<div class="section">
    <div class="container">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem;">
            <h1 class="section-title" style="margin-bottom: 0;">Client Reports</h1>
            <a href="{% url 'financial_index' %}" class="btn" style="padding: 0.5rem 1.5rem; font-size: 0.9rem;">Back to
                Dashboard</a>
        </div>

        <div class="table-responsive">
            {% if contracts %}
            <table class="table">
                <thead>
                    <tr>
                        <th>Contract Name</th>
                        <th>Total Budget (Hours)</th>
                        <th>Total Logged (Hours)</th>
                        <th>Remaining Budget (Hours)</th>
                    </tr>
                </thead>
                <tbody>
                    {% for c in contracts %}
                    <tr>
                        <td>{{ c.name }}</td>
                        <td>{{ c.budget_hours }}</td>
                        <td>{{ c.total_logged }}</td>
                        <td style="{% if c.remaining_budget < 0 %}color: #ff4444; font-weight: bold;{% endif %}">{{
                            c.remaining_budget }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
            {% else %}
            <p style="color: var(--text-muted); text-align: center; padding: 2rem;">No data available to report.</p>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}