{% extends "base.html" %}

{% block title %}Proof Cards | TrustForge{% endblock %}
{% block meta_description %}Browse TrustForge proof cards scoped to your current workspace.{% 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">Proof cards</div>
        <h1 class="tf-page-title">{{ current_membership.business.name }} proof gallery</h1>
        <p class="tf-page-subtitle">These conversion assets are tenant-scoped to the active workspace and ready for review, publishing, or featuring.</p>
      </div>
      <div class="d-flex flex-wrap gap-2">
        <a class="btn tf-btn tf-btn-secondary" href="{% url 'public_proof_gallery' current_membership.business.slug %}" target="_blank" rel="noopener">Open public gallery</a>
        <a class="btn tf-btn tf-btn-secondary" href="{% url 'dashboard' %}">Back to dashboard</a>
      </div>
    </div>

    <div class="row g-4">
      {% for proof in proof_cards %}
      <div class="col-lg-4 col-md-6">
        <a class="tf-proof-card-link" href="{% url 'proof_card_detail' proof.id %}">
          <article class="tf-proof-card h-100">
            {% include "core/includes/proof_media_grid.html" with job=proof.job %}
            <div class="tf-proof-card-body">
              <div class="d-flex justify-content-between align-items-center mb-3 gap-3">
                <span class="tf-card-tag">{{ proof.job.service_type }}</span>
                <span class="tf-badge-verified">{{ proof.verified_label }}</span>
              </div>
              <h2 class="h5 mb-1">{{ proof.job.city }}, {{ proof.job.state }}</h2>
              <p class="small text-secondary-emphasis mb-3">{{ proof.customer_display_name }} · {{ proof.job.completed_at|date:"M j, Y" }}</p>
              <p class="mb-3">{% if proof.testimonial_quote %}“{{ proof.testimonial_quote|truncatechars:110 }}”{% else %}This job is ready to become a published proof asset for the next customer.{% endif %}</p>
              <div class="d-flex justify-content-between align-items-center small text-secondary-emphasis">
                <span class="tf-status-pill tf-status-{{ proof.status }}">{{ proof.get_status_display }}</span>
                <span>{% if proof.rating %}★ {{ proof.rating }}{% else %}No rating yet{% endif %}</span>
              </div>
              {% if proof.status == 'published' %}
              <p class="small text-secondary-emphasis mt-3 mb-0">Live at <span class="tf-inline-link">/proof/{{ current_membership.business.slug }}/{{ proof.id }}/</span></p>
              {% endif %}
            </div>
          </article>
        </a>
      </div>
      {% empty %}
      <div class="col-12">
        <div class="tf-empty-state text-center">
          <h2 class="h4 mb-2">No proof cards yet</h2>
          <p class="text-secondary-emphasis mb-4">Log a completed job to create the first proof asset in this workspace.</p>
          <a class="btn tf-btn tf-btn-primary" href="{% url 'job_create' %}">Create first job</a>
        </div>
      </div>
      {% endfor %}
    </div>
  </div>
</section>
{% endblock %}