{% extends "ui/templates/base/layout.html" %}
{% block content %}
<div class="space-y-6">
  {% include "modules/employees/templates/employees/_my_workspace_tabs.html" %}
  <div class="flex flex-wrap items-start justify-between gap-3">
    <div>
      <h2 class="text-xl font-semibold text-slate-900">{{ board.label }}</h2>
      <p class="mt-1 text-sm text-slate-500">
        {{ board.client.client_name if board.client else 'Unlinked Client' }}
        {% if board.client and board.client.client_code %} · {{ board.client.client_code }}{% endif %}
      </p>
    </div>
    <div class="flex flex-wrap gap-2">
      <a href="/employee/work" class="rounded-xl border border-slate-300 px-4 py-2 text-sm font-semibold text-slate-700 hover:bg-slate-50">My Work Board</a>
      <a href="/documents/engagements/{{ board.engagement_id }}" class="rounded-xl border border-slate-300 px-4 py-2 text-sm font-semibold text-slate-700 hover:bg-slate-50">Full Documents</a>
    </div>
  </div>

  <div class="grid gap-4 md:grid-cols-6">
    <div class="rounded-2xl border border-slate-200 bg-white p-4 shadow-soft"><div class="text-xs font-semibold uppercase text-slate-500">Total Tasks</div><div class="mt-1 text-2xl font-semibold">{{ board.summary.total }}</div></div>
    <div class="rounded-2xl border border-slate-200 bg-white p-4 shadow-soft"><div class="text-xs font-semibold uppercase text-slate-500">Open</div><div class="mt-1 text-2xl font-semibold">{{ board.summary.open }}</div></div>
    <div class="rounded-2xl border border-slate-200 bg-white p-4 shadow-soft"><div class="text-xs font-semibold uppercase text-slate-500">In Progress</div><div class="mt-1 text-2xl font-semibold">{{ board.summary.in_progress }}</div></div>
    <div class="rounded-2xl border border-rose-200 bg-rose-50 p-4 shadow-soft"><div class="text-xs font-semibold uppercase text-rose-600">Blocked</div><div class="mt-1 text-2xl font-semibold text-rose-700">{{ board.summary.blocked }}</div></div>
    <div class="rounded-2xl border border-red-200 bg-red-50 p-4 shadow-soft"><div class="text-xs font-semibold uppercase text-red-600">Overdue</div><div class="mt-1 text-2xl font-semibold text-red-700">{{ board.summary.overdue }}</div></div>
    <div class="rounded-2xl border border-emerald-200 bg-emerald-50 p-4 shadow-soft"><div class="text-xs font-semibold uppercase text-emerald-600">Completed</div><div class="mt-1 text-2xl font-semibold text-emerald-700">{{ board.summary.completed }}</div></div>
  </div>

  <div class="grid gap-6 xl:grid-cols-[minmax(0,1fr)_360px]">
    <div class="grid gap-4 lg:grid-cols-2 2xl:grid-cols-4">
      {% for column in board.columns %}
      <section class="rounded-2xl border border-slate-200 bg-slate-50 p-3 shadow-soft">
        <div class="mb-3 flex items-center justify-between px-1">
          <h3 class="text-sm font-semibold text-slate-900">{{ column.label }}</h3>
          <span class="rounded-full bg-white px-2.5 py-1 text-xs font-semibold text-slate-600">{{ column.tasks|length }}</span>
        </div>
        <div class="space-y-3">
          {% for task in column.tasks %}
          <article class="rounded-2xl border border-slate-200 bg-white p-4 shadow-sm {% if task.is_overdue %}border-red-200 bg-red-50{% elif task.is_due_today %}border-amber-200 bg-amber-50{% endif %}">
            <div class="flex items-start justify-between gap-3">
              <div>
                <h4 class="text-sm font-semibold text-slate-900">{{ task.task_name }}</h4>
                {% if task.description %}<p class="mt-1 line-clamp-3 text-xs text-slate-500">{{ task.description }}</p>{% endif %}
              </div>
              <span class="rounded-full bg-white px-2 py-1 text-[11px] font-semibold text-slate-600">#{{ task.sequence_no }}</span>
            </div>
            <div class="mt-3 flex flex-wrap gap-2 text-[11px] font-semibold">
              <span class="rounded-full bg-slate-100 px-2 py-1 text-slate-700">{{ task.priority_label }}</span>
              <span class="rounded-full bg-slate-100 px-2 py-1 text-slate-700">{{ task.date_bucket }}</span>
              <span class="rounded-full bg-slate-100 px-2 py-1 text-slate-700">Target {{ task.internal_target_date or '-' }}</span>
            </div>
            {% if task.latest_comment %}<p class="mt-3 truncate text-xs text-slate-500">Latest: {{ task.latest_comment.message }}</p>{% endif %}
            <form method="post" action="/employee/work/tasks/{{ task.id }}/status" class="mt-4 space-y-2">
              <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
              <input type="hidden" name="return_url" value="/employee/work/engagements/{{ board.engagement_id }}">
              <select name="status" class="w-full rounded-lg border border-slate-300 px-2 py-1.5 text-xs">
                <option value="pending" {% if task.status == 'pending' %}selected{% endif %}>Pending</option>
                <option value="in_progress" {% if task.status == 'in_progress' %}selected{% endif %}>In Progress</option>
                <option value="blocked" {% if task.status == 'blocked' %}selected{% endif %}>Blocked</option>
                <option value="completed" {% if task.status == 'completed' %}selected{% endif %}>Completed</option>
              </select>
              <input type="text" name="remarks" value="" placeholder="Remark / reason" class="w-full rounded-lg border border-slate-300 px-2 py-1.5 text-xs">
              <div class="flex gap-2">
                <button type="submit" class="flex-1 rounded-lg bg-brand-600 px-2.5 py-1.5 text-xs font-semibold text-white hover:bg-brand-700">Save</button>
                <a href="/employee/work/tasks/{{ task.id }}/communication" class="rounded-lg border border-slate-300 px-2.5 py-1.5 text-xs font-semibold text-slate-700 hover:bg-slate-50">Timeline{% if task.comment_count %} · {{ task.comment_count }}{% endif %}</a>
              </div>
            </form>
          </article>
          {% else %}
          <div class="rounded-2xl border border-dashed border-slate-300 bg-white p-6 text-center text-sm text-slate-500">No tasks.</div>
          {% endfor %}
        </div>
      </section>
      {% endfor %}
    </div>

    <aside class="space-y-4">
      <div class="rounded-2xl border border-slate-200 bg-white p-5 shadow-soft">
        <div class="flex items-center justify-between gap-3">
          <div>
            <h3 class="font-semibold text-slate-900">Engagement Documents</h3>
            <p class="mt-1 text-sm text-slate-500">Quick access while performing tasks.</p>
          </div>
          <a href="/documents/engagements/{{ board.engagement_id }}" class="text-sm font-semibold text-brand-700 hover:text-brand-800">Open</a>
        </div>
        <div class="mt-4 divide-y divide-slate-100">
          {% for doc in board.documents %}
          <div class="py-3">
            <div class="flex items-start justify-between gap-3">
              <div>
                <div class="text-sm font-semibold text-slate-900">{{ doc.title }}</div>
                <div class="mt-1 text-xs text-slate-500">{{ doc.document_type }} · v{{ doc.current_version_no }} · {{ doc.status }}</div>
              </div>
              {% if doc.current_version_no and doc.versions %}
              <a href="/documents/{{ doc.id }}/download" class="rounded-lg border border-slate-300 px-2.5 py-1 text-xs font-semibold text-slate-700 hover:bg-slate-50">Download</a>
              {% endif %}
            </div>
            {% if doc.description %}<p class="mt-2 text-xs text-slate-500">{{ doc.description }}</p>{% endif %}
          </div>
          {% else %}
          <div class="rounded-xl border border-dashed border-slate-300 p-5 text-center text-sm text-slate-500">No engagement document uploaded yet.</div>
          {% endfor %}
        </div>
      </div>

      <div class="rounded-2xl border border-slate-200 bg-white p-5 shadow-soft">
        <h3 class="font-semibold text-slate-900">Engagement Summary</h3>
        <dl class="mt-4 space-y-3 text-sm">
          <div class="flex justify-between gap-4"><dt class="text-slate-500">Status</dt><dd class="font-medium text-slate-900">{{ board.subscription.status if board.subscription else '-' }}</dd></div>
          <div class="flex justify-between gap-4"><dt class="text-slate-500">FY</dt><dd class="font-medium text-slate-900">{{ board.subscription.financial_year if board.subscription else '-' }}</dd></div>
          <div class="flex justify-between gap-4"><dt class="text-slate-500">Due Date</dt><dd class="font-medium text-slate-900">{{ board.subscription.current_due_date if board.subscription else '-' }}</dd></div>
          <div class="flex justify-between gap-4"><dt class="text-slate-500">Review Partner</dt><dd class="font-medium text-slate-900">{{ board.subscription.review_partner.full_name if board.subscription and board.subscription.review_partner else '-' }}</dd></div>
        </dl>
      </div>
    </aside>
  </div>
</div>
{% endblock %}