{% extends "layouts/base.html" %}
{% load i18n %}

{% block title %}QI Projects - PX360{% endblock %}

{% block content %}
<div class="container-fluid">
    <h2 class="mb-4"><i class="bi bi-kanban me-2"></i>Quality Improvement Projects</h2>
    
    <div class="row mb-4">
        <div class="col-md-4">
            <div class="card border-left-primary">
                <div class="card-body">
                    <h6 class="text-muted mb-1">Total Projects</h6>
                    <h3 class="mb-0">{{ stats.total }}</h3>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card border-left-info">
                <div class="card-body">
                    <h6 class="text-muted mb-1">Active</h6>
                    <h3 class="mb-0">{{ stats.active }}</h3>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card border-left-success">
                <div class="card-body">
                    <h6 class="text-muted mb-1">Completed</h6>
                    <h3 class="mb-0">{{ stats.completed }}</h3>
                </div>
            </div>
        </div>
    </div>
    
    <div class="card">
        <div class="card-body p-0">
            <table class="table table-hover mb-0">
                <thead class="table-light">
                    <tr>
                        <th>Name</th>
                        <th>Hospital</th>
                        <th>Project Lead</th>
                        <th>Status</th>
                        <th>Start Date</th>
                        <th>Target Date</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for project in projects %}
                    <tr onclick="window.location='{% url 'projects:project_detail' project.id %}'" style="cursor: pointer;">
                        <td><strong>{{ project.name }}</strong></td>
                        <td><small>{{ project.hospital.name }}</small></td>
                        <td>
                            {% if project.project_lead %}
                            <small>{{ project.project_lead.get_full_name }}</small>
                            {% else %}
                            <span class="text-muted">-</span>
                            {% endif %}
                        </td>
                        <td><span class="badge bg-{{ project.status }}">{{ project.get_status_display }}</span></td>
                        <td>
                            {% if project.start_date %}
                            <small>{{ project.start_date|date:"M d, Y" }}</small>
                            {% else %}
                            <span class="text-muted">-</span>
                            {% endif %}
                        </td>
                        <td>
                            {% if project.target_completion_date %}
                            <small>{{ project.target_completion_date|date:"M d, Y" }}</small>
                            {% else %}
                            <span class="text-muted">-</span>
                            {% endif %}
                        </td>
                        <td onclick="event.stopPropagation();">
                            <a href="{% url 'projects:project_detail' project.id %}" class="btn btn-sm btn-outline-primary">
                                <i class="bi bi-eye"></i>
                            </a>
                        </td>
                    </tr>
                    {% empty %}
                    <tr>
                        <td colspan="7" class="text-center py-5">No projects found</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}