{% extends "base.html" %}

{% block title %}{{ proof_card.job.service_type }} in {{ proof_card.job.city }} | {{ business.name }} Proof{% endblock %}
{% block meta_description %}Published proof from {{ business.name }} for {{ proof_card.job.service_type|lower }} in {{ proof_card.job.city }}, {{ proof_card.job.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">Published proof</div>
        <h1 class="tf-page-title">{{ proof_card.job.service_type }} in {{ proof_card.job.city }}, {{ proof_card.job.state }}</h1>
        <p class="tf-page-subtitle">Completed by {{ business.name }} · {{ proof_card.customer_display_name }} · {{ proof_card.job.completed_at|date:"F j, Y" }}</p>
      </div>
      <div class="d-flex flex-wrap gap-2">
        <a class="btn tf-btn tf-btn-secondary" href="{% url 'public_proof_gallery' business.slug %}">Back to gallery</a>
        {% if business.google_review_url %}<a class="btn tf-btn tf-btn-primary" href="{{ business.google_review_url }}" target="_blank" rel="noopener">Read more reviews</a>{% elif 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_card_detail' proof_card.id %}">Manage this proof card</a>{% endif %}
      </div>
    </div>

    <div class="row g-4">
      <div class="col-lg-7">
        <article class="tf-proof-card tf-proof-card-expanded h-100">
          {% include "core/includes/proof_media_grid.html" with job=proof_card.job grid_class='tf-proof-media-grid-large' %}
          <div class="tf-proof-card-body">
            <div class="d-flex justify-content-between align-items-center mb-3 gap-3 flex-wrap">
              <span class="tf-card-tag">{{ proof_card.job.service_type }}</span>
              <span class="tf-badge-verified">{{ proof_card.verified_label }}</span>
            </div>
            <blockquote class="tf-testimonial mb-4">{% if proof_card.testimonial_quote %}“{{ proof_card.testimonial_quote }}”{% else %}This published proof card confirms a completed job by {{ business.name }}.{% endif %}</blockquote>
            <div class="row g-3">
              <div class="col-md-4"><div class="tf-detail-box"><span>Rating</span><strong>{% if proof_card.rating %}★ {{ proof_card.rating }} / 5{% else %}Verified{% endif %}</strong></div></div>
              <div class="col-md-4"><div class="tf-detail-box"><span>Completed</span><strong>{{ proof_card.job.completed_at|date:"M j, Y" }}</strong></div></div>
              <div class="col-md-4"><div class="tf-detail-box"><span>Service area</span><strong>{{ proof_card.job.city }}, {{ proof_card.job.state }}</strong></div></div>
            </div>
          </div>
        </article>
      </div>
      <div class="col-lg-5">
        <div class="tf-panel mb-4">
          <h2 class="h4 mb-3">Why this matters</h2>
          <div class="d-grid gap-3">
            <div class="tf-detail-box"><span>Business</span><strong>{{ business.name }}</strong></div>
            <div class="tf-detail-box"><span>Customer display</span><strong>{{ proof_card.customer_display_name }}</strong></div>
            <div class="tf-detail-box"><span>Proof status</span><strong>{{ proof_card.get_status_display }}</strong></div>
            <div class="tf-detail-box"><span>Placement</span><strong>{{ proof_card.attached_pages|default:'Homepage' }}</strong></div>
          </div>
        </div>

        <div class="tf-panel">
          <h2 class="h4 mb-3">More published proof</h2>
          <div class="d-grid gap-3">
            {% for related in related_proofs %}
            <a href="{% url 'public_proof_detail' business.slug related.id %}" class="tf-proof-mini">
              <div>
                <div class="tf-card-tag mb-2">{{ related.job.service_type }}</div>
                <strong>{{ related.job.city }}, {{ related.job.state }}</strong>
                <div class="small text-secondary-emphasis">{{ related.customer_display_name }}</div>
              </div>
              <span class="tf-status-pill tf-status-{{ related.status }}">{{ related.get_status_display }}</span>
            </a>
            {% empty %}
            <div class="tf-empty-state text-start">
              <h3 class="h5 mb-2">This is the first published proof card</h3>
              <p class="text-secondary-emphasis mb-0">Return to the gallery later as {{ business.name }} publishes more completed work.</p>
            </div>
            {% endfor %}
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
{% endblock %}