{% extends "client/base.html" %}
{% load money %}
{% block title %}{{ project.name }} — client portal{% endblock %}
{% block heading %}{{ project.name }}{% endblock %}

{% block content %}
<div class="pane">
  <a class="back" href="{% url 'client_projects' %}">&larr; All projects</a>
  <div class="split">
    <div>
      <div class="panel">
        <div class="panel-h"><h2>Overview</h2>
          <span class="status {{ project.get_status_display|status_class }} act">{{ project.get_status_display }}</span></div>
        <div class="panel-b">
          <div class="bar-row" style="margin-bottom:18px"><div class="bar"><i style="width:{{ project.progress }}%"></i></div><span>{{ project.progress }}%</span></div>
          <dl class="dl">
            <dt>Reference</dt><dd class="mono">{{ project.reference }}</dd>
            <dt>Type</dt><dd>{{ project.project_type }}</dd>
            <dt>Started</dt><dd>{{ project.start_date|date:"j M Y"|default:"—" }}</dd>
            <dt>Expected</dt><dd>{{ project.deadline|date:"j M Y"|default:"—" }}</dd>
            <dt>Developer</dt><dd>{{ project.developer|default:"Teniola Ayodele" }}</dd>
            <dt>Project cost</dt><dd>{{ project.budget|naira }}</dd>
            <dt>Paid</dt><dd>{{ project.amount_paid|naira }}
              <span class="status {{ project.payment_status|status_class }}">{{ project.payment_status }}</span></dd>
          </dl>
        </div>
      </div>

      <div class="panel">
        <div class="panel-h"><h2>Milestones</h2></div>
        <div class="panel-b"><ul class="mile">
          {% for m in milestones %}
          <li class="{% if m.status == 'done' %}done{% elif m.status == 'in_progress' %}now{% endif %}">
            <div class="mk">{% if m.status == 'done' %}&#10003;{% endif %}</div>
            <div><div class="mt">{{ m.title }}</div>
              <div class="md">{{ m.detail|default:m.get_status_display }}</div></div>
          </li>
          {% empty %}<p class="muted" style="margin:0">Milestones appear once the plan is agreed.</p>{% endfor %}
        </ul></div>
      </div>

      <div class="panel">
        <div class="panel-h"><h2>Updates</h2></div>
        <div class="panel-b"><ul class="feed">
          {% for u in updates %}
          <li><div class="ft">{{ u.created_at|date:"j M Y" }}</div><p><b>{{ u.title }}.</b> {{ u.body }}</p></li>
          {% empty %}<p class="muted" style="margin:0">No updates yet.</p>{% endfor %}
        </ul></div>
      </div>
    </div>

    <div>
      <div class="panel">
        <div class="panel-h"><h2>Payment</h2></div>
        <div class="panel-b">
          <div style="font-family:var(--display);font-size:26px;font-weight:700;letter-spacing:-.03em">{{ project.balance|naira }}</div>
          <div class="mono" style="margin:6px 0 14px">outstanding balance</div>
          {% if project.balance > 0 %}
            <a href="{% url 'client_payments' %}" class="btn btn-primary btn-block">Pay balance</a>
          {% else %}<div class="status s-paid">Fully paid</div>{% endif %}
        </div>
      </div>
      <div class="panel">
        <div class="panel-h"><h2>Files</h2></div>
        <div class="panel-b">
          {% for f in files %}
          <div style="display:flex;gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line-soft)">
            <div style="min-width:0">
              <div style="font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">{{ f.name }}</div>
              <div class="mono">{{ f.get_folder_display }} · {{ f.uploaded_at|date:"j M Y" }}</div></div>
            <a href="{{ f.file.url }}" class="btn btn-sm" style="margin-left:auto">Get</a>
          </div>
          {% empty %}<p class="muted" style="margin:0;font-size:15px">No files shared yet.</p>{% endfor %}
        </div>
      </div>
      <div class="panel">
        <div class="panel-h"><h2>Need something?</h2></div>
        <div class="panel-b">
          <a href="{% url 'client_messages' %}" class="btn btn-block" style="margin-bottom:10px">Message Teniola</a>
          <a href="{% url 'client_support' %}" class="btn btn-block">Raise a ticket</a>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}