{% extends 'base.html' %}
{% block page_title %}Workplans — {{ project.name }}{% endblock %}
{% block content %}
<div class="mb-4">
  <a href="{{ url_for('programs_dashboard') }}" class="text-muted text-decoration-none" style="font-size:0.85rem;">
    <i class="bi bi-arrow-left me-1"></i>Programs Dashboard
  </a>
  <div class="d-flex justify-content-between align-items-center mt-2">
    <div>
      <h4 class="fw-bold mb-1">{{ project.name }}</h4>
      <p class="text-muted mb-0" style="font-size:0.85rem;">
        <i class="bi bi-clipboard2-data me-1"></i>{{ workplans|length }} workplan{{ 's' if workplans|length != 1 }}
        {% if project.donor %} · <i class="bi bi-building me-1"></i>{{ project.donor }}{% endif %}
      </p>
    </div>
    <a href="{{ url_for('programs_workplan_add', project_id=project.id) }}" class="btn btn-primary">
      <i class="bi bi-plus-lg me-2"></i>New Workplan
    </a>
  </div>
</div>

{% if workplans %}
<div class="row g-3">
  {% for w in workplans %}
  <div class="col-md-6 col-lg-4">
    <div class="card h-100" style="border-left:4px solid {% if w.status == 'active' %}#20c997{% elif w.status == 'completed' %}#6c757d{% else %}#f0a500{% endif %};">
      <div class="card-body p-3">
        <div class="d-flex justify-content-between align-items-start mb-2">
          <span class="badge {% if w.status == 'active' %}bg-success{% elif w.status == 'completed' %}bg-secondary{% else %}bg-warning text-dark{% endif %}" style="font-size:0.72rem;">
            {{ w.status.title() }}
          </span>
          <span style="font-size:0.72rem;color:#999;">{{ w.period or '' }}</span>
        </div>
        <h6 class="fw-bold mb-1" style="font-size:0.92rem;">
          <a href="{{ url_for('programs_workplan_detail', workplan_id=w.id) }}" class="text-decoration-none" style="color:#1a2332;">{{ w.title }}</a>
        </h6>
        <div style="font-size:0.75rem;color:#666;margin-bottom:10px;">
          {% if w.start_date %}<i class="bi bi-calendar3 me-1"></i>{{ w.start_date|format_date }} → {{ w.end_date|format_date if w.end_date else 'Ongoing' }}{% endif %}
        </div>
        <div class="mb-2">
          <div class="d-flex justify-content-between mb-1">
            <span style="font-size:0.73rem;color:#888;">Progress</span>
            <span style="font-size:0.73rem;font-weight:600;color:#6f42c1;">{{ w.avg_progress }}%</span>
          </div>
          <div class="progress"><div class="progress-bar" style="width:{{ w.avg_progress }}%;background:#6f42c1;"></div></div>
        </div>
        <div class="d-flex justify-content-between" style="font-size:0.75rem;color:#888;">
          <span><i class="bi bi-list-check me-1"></i>{{ w.completed_items }}/{{ w.item_count }} items</span>
          <span><i class="bi bi-cash-stack me-1"></i>{{ w.total_budget|format_currency }} MWK</span>
        </div>
      </div>
      <div class="card-footer bg-transparent border-top-0 pt-0 pb-3 px-3">
        <div class="d-flex gap-2">
          <a href="{{ url_for('programs_workplan_detail', workplan_id=w.id) }}" class="btn btn-sm btn-outline-primary flex-fill" style="font-size:0.78rem;">View Details</a>
          <a href="{{ url_for('programs_workplan_edit', workplan_id=w.id) }}" class="btn btn-sm btn-outline-secondary flex-fill" style="font-size:0.78rem;">Edit</a>
        </div>
      </div>
    </div>
  </div>
  {% endfor %}
</div>
{% else %}
<div class="card">
  <div class="card-body text-center py-5 text-muted">
    <i class="bi bi-clipboard2-data" style="font-size:3rem;opacity:0.2;display:block;"></i>
    <p class="mt-3 mb-1 fw-bold">No workplans yet for this project</p>
    <p style="font-size:0.85rem;">Create a workplan to start planning activities and tracking budgets</p>
    <a href="{{ url_for('programs_workplan_add', project_id=project.id) }}" class="btn btn-primary mt-2">
      <i class="bi bi-plus-lg me-2"></i>Create First Workplan
    </a>
  </div>
</div>
{% endif %}
{% endblock %}