{% extends "base.html" %}

{% block title %}{{ business.name }} Proof Gallery | TrustForge{% endblock %}
{% block meta_description %}Browse published proof cards for {{ business.name }} in {{ business.primary_city }}, {{ business.primary_state }}.{% 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">Public proof gallery</div>
        <h1 class="tf-page-title">{{ business.name }} completed work</h1>
        <p class="tf-page-subtitle">Published proof cards from real completed jobs in {{ business.primary_city }}, {{ business.primary_state }}. Use this gallery to validate the quality, consistency, and trust signal behind the brand.</p>
      </div>
      <div class="d-flex flex-wrap gap-2">
        {% if business.google_review_url %}<a class="btn tf-btn tf-btn-secondary" href="{{ business.google_review_url }}" target="_blank" rel="noopener">Read Google reviews</a>{% endif %}
        {% if request.user.is_authenticated and current_membership and current_membership.business_id == business.id %}<a class="btn tf-btn tf-btn-primary" href="{% url 'proof_cards_list' %}">Manage proof cards</a>{% else %}<a class="btn tf-btn tf-btn-primary" href="{% url 'signup' %}">Create your own gallery</a>{% endif %}
      </div>
    </div>

    {% if featured_proofs %}
    <div class="tf-panel mb-4">
      <div class="d-flex justify-content-between align-items-center flex-wrap gap-3 mb-3">
        <div>
          <div class="tf-eyebrow">Featured proof</div>
          <h2 class="h3 mb-0">Standout published jobs</h2>
        </div>
        <div class="small text-secondary-emphasis">{{ proof_cards|length }} published proof card{{ proof_cards|length|pluralize }}</div>
      </div>
      <div class="row g-4">
        {% for proof in featured_proofs %}
        <div class="col-lg-4">
          <a class="tf-proof-card-link" href="{% url 'public_proof_detail' business.slug 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 %}Published proof from a real completed job by {{ business.name }}.{% 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 %}Verified{% endif %}</span>
                </div>
              </div>
            </article>
          </a>
        </div>
        {% endfor %}
      </div>
    </div>
    {% endif %}

    <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 'public_proof_detail' business.slug proof.id %}">
          <article class="tf-proof-card h-100">
            <div class="tf-proof-media-grid">
              <div class="tf-photo-slot">Before</div>
              <div class="tf-photo-slot tf-photo-slot-after">After</div>
            </div>
            <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:120 }}”{% else %}Published proof asset ready for customers comparing local providers.{% 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 %}Verified{% endif %}</span>
              </div>
            </div>
          </article>
        </a>
      </div>
      {% empty %}
      <div class="col-12">
        <div class="tf-empty-state text-center">
          <h2 class="h4 mb-2">No public proof cards yet</h2>
          <p class="text-secondary-emphasis mb-4">{{ business.name }} has not published any proof cards yet. Check back soon for verified completed work.</p>
          <a class="btn tf-btn tf-btn-primary" href="{% url 'signup' %}">Build a proof gallery like this</a>
        </div>
      </div>
      {% endfor %}
    </div>
  </div>
</section>
{% endblock %}