{% extends "base.html" %}

{% block title %}Proof Card | TrustForge{% endblock %}
{% block meta_description %}View a TrustForge proof card and manage publishing controls for the active 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 card</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">{{ proof_card.customer_display_name }} · Scoped to {{ proof_card.job.business.name }} · Completed {{ 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 'proof_cards_list' %}">All proof cards</a>
        {% if proof_card.status == 'published' %}<a class="btn tf-btn tf-btn-secondary" href="{% url 'public_proof_detail' proof_card.job.business.slug proof_card.id %}" target="_blank" rel="noopener">Open public proof</a>{% endif %}
        {% if current_membership.can_manage_proof %}<a class="btn tf-btn tf-btn-primary" href="{% url 'proof_card_edit' proof_card.id %}">Edit 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 %}Add a testimonial or collect one through the review request page to strengthen this proof asset.{% 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 %}Pending{% endif %}</strong></div></div>
              <div class="col-md-4"><div class="tf-detail-box"><span>Featured</span><strong>{% if proof_card.is_featured %}Yes{% else %}No{% endif %}</strong></div></div>
              <div class="col-md-4"><div class="tf-detail-box"><span>Widget target</span><strong>{{ proof_card.attached_widget_label|default:'Not set' }}</strong></div></div>
            </div>
          </div>
        </article>
      </div>
      <div class="col-lg-5">
        <div class="tf-panel mb-4">
          <h2 class="h4 mb-3">Quick actions</h2>
          {% if current_membership.can_manage_proof %}
          <div class="d-grid gap-3">
            <form method="post">
              {% csrf_token %}
              <input type="hidden" name="action" value="publish">
              <button type="submit" class="btn tf-btn tf-btn-primary w-100">Publish proof card</button>
            </form>
            <form method="post">
              {% csrf_token %}
              <input type="hidden" name="action" value="hide">
              <button type="submit" class="btn tf-btn tf-btn-secondary w-100">Hide from public proof gallery</button>
            </form>
            <form method="post">
              {% csrf_token %}
              <input type="hidden" name="action" value="toggle_featured">
              <button type="submit" class="btn tf-btn tf-btn-secondary w-100">{% if proof_card.is_featured %}Remove from featured proof{% else %}Feature on landing experience{% endif %}</button>
            </form>
          </div>
          {% else %}
          <div class="tf-empty-state text-start">
            <h3 class="h5 mb-2">View-only access</h3>
            <p class="text-secondary-emphasis mb-0">Your current role can view proof assets in this workspace but cannot change publishing controls.</p>
          </div>
          {% endif %}
        </div>
        <div class="tf-panel">
          <h2 class="h4 mb-3">Placement</h2>
          <div class="tf-detail-box mb-3"><span>Attach to widgets</span><strong>{{ proof_card.attached_widget_label|default:'Homepage proof gallery' }}</strong></div>
          <div class="tf-detail-box mb-3"><span>Attach to pages</span><strong>{{ proof_card.attached_pages|default:'Homepage' }}</strong></div>
          <div class="tf-detail-box mb-3"><span>Public gallery</span><strong><a class="tf-inline-link" href="{% url 'public_proof_gallery' proof_card.job.business.slug %}" target="_blank" rel="noopener">/proof/{{ proof_card.job.business.slug }}/</a></strong></div>
          {% if proof_card.status == 'published' %}
          <div class="tf-detail-box mb-3"><span>Public proof page</span><strong><a class="tf-inline-link" href="{% url 'public_proof_detail' proof_card.job.business.slug proof_card.id %}" target="_blank" rel="noopener">/proof/{{ proof_card.job.business.slug }}/{{ proof_card.id }}/</a></strong></div>
          {% endif %}
          {% if proof_card.job.review_request %}
          <a class="btn tf-btn tf-btn-secondary w-100" href="{% url 'review_request' proof_card.job.review_request.token %}">Open review request page</a>
          {% endif %}
        </div>
      </div>
    </div>
  </div>
</section>
{% endblock %}