{% extends "adminpanel/base.html" %}
{% load money %}
{% block title %}Projects — admin{% endblock %}
{% block heading %}Projects{% endblock %}

{% block content %}
<div class="pane">
  <form class="toolbar" method="get">
    <input type="search" name="q" value="{{ query }}" placeholder="Search projects">
    <select name="status" style="max-width:220px" onchange="this.form.submit()">
      <option value="">All statuses</option>
      {% for value, label in statuses %}
        <option value="{{ value }}" {% if active_status == value %}selected{% endif %}>{{ label }}</option>
      {% endfor %}
    </select>
    <button class="btn btn-sm">Search</button>
    <div class="right"><a href="{% url 'admin_project_new' %}" class="btn btn-sm btn-primary">New project</a></div>
  </form>

  <div class="kpis">
    <div class="kpi"><div class="lbl">Projects</div><div class="val">{{ projects|length }}</div><div class="sub">shown</div></div>
    <div class="kpi"><div class="lbl">In progress</div><div class="val">{{ in_progress }}</div><div class="sub">active work</div></div>
    <div class="kpi"><div class="lbl">Contracted value</div><div class="val">{{ total_value|naira }}</div><div class="sub">total budgets</div></div>
    <div class="kpi"><div class="lbl">Unbilled balance</div><div class="val">{{ total_balance|naira }}</div><div class="sub">still to collect</div></div>
  </div>

  <div class="panel">
    <div class="panel-h"><h2>Projects</h2></div>
    <div style="overflow:auto"><table>
      <tr><th>Project</th><th>Client</th><th>Type</th><th>Status</th><th>Progress</th><th>Budget</th><th>Balance</th><th>Deadline</th></tr>
      {% for p in projects %}
      <tr class="click">
        <td><a href="{% url 'admin_project' p.slug %}">{{ p.name }}</a><div class="mono">{{ p.reference }}</div></td>
        <td>{{ p.client }}</td><td>{{ p.project_type }}</td>
        <td><span class="status {{ p.get_status_display|status_class }}">{{ p.get_status_display }}</span></td>
        <td style="min-width:130px"><div class="bar-row"><div class="bar"><i style="width:{{ p.progress }}%"></i></div><span>{{ p.progress }}%</span></div></td>
        <td>{{ p.budget|naira }}</td><td>{{ p.balance|naira }}</td><td>{{ p.deadline|date:"j M Y"|default:"—" }}</td>
      </tr>
      {% empty %}<tr><td colspan="8" class="muted">No projects match that filter.</td></tr>{% endfor %}
    </table></div>
  </div>
</div>
{% endblock %}