{% extends "base.html" %}

{% block title %}Jobs | TrustForge{% endblock %}
{% block meta_description %}Browse completed jobs in TrustForge and open each proof workflow detail.{% endblock %}

{% block content %}
<section class="py-5">
  <div class="container">
    <div class="d-flex justify-content-between align-items-start flex-wrap gap-3 mb-4">
      <div>
        <div class="tf-eyebrow">Jobs</div>
        <h1 class="tf-page-title">{{ current_membership.business.name }} completed job pipeline</h1>
        <p class="tf-page-subtitle">Every job below belongs only to this workspace and can lead to a proof card, published testimonial, and higher conversion confidence.</p>
      </div>
      <a class="btn tf-btn tf-btn-primary" href="{% url 'job_create' %}">Add completed job</a>
    </div>

    <div class="tf-panel p-0 overflow-hidden">
      {% if jobs %}
      <div class="table-responsive">
        <table class="table tf-table align-middle mb-0">
          <thead>
            <tr>
              <th>Customer</th>
              <th>Service</th>
              <th>Location</th>
              <th>Completed</th>
              <th>Status</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {% for job in jobs %}
            <tr>
              <td>
                <strong>{{ job.customer.full_name }}</strong>
                <div class="small text-secondary-emphasis">{{ job.technician_name|default:'Technician not added yet' }}</div>
              </td>
              <td>{{ job.service_type }}</td>
              <td>{{ job.city }}, {{ job.state }}</td>
              <td>{{ job.completed_at|date:"M j, Y" }}</td>
              <td><span class="tf-status-pill tf-status-{{ job.status }}">{{ job.get_status_display }}</span></td>
              <td class="text-end"><a href="{% url 'job_detail' job.id %}" class="tf-inline-link">Open</a></td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
      {% else %}
      <div class="tf-empty-state text-center m-4">
        <h2 class="h4 mb-2">No jobs completed yet</h2>
        <p class="text-secondary-emphasis mb-4">Start with one field intake and TrustForge will spin up the proof workflow automatically for this business.</p>
        <a class="btn tf-btn tf-btn-primary" href="{% url 'job_create' %}">Create first job</a>
      </div>
      {% endif %}
    </div>
  </div>
</section>
{% endblock %}