{% extends "base.html" %}

{% block title %}Dashboard | TrustForge{% endblock %}
{% block meta_description %}TrustForge dashboard for completed jobs, review requests, proof cards, and conversion momentum.{% 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">Dashboard</div>
        <h1 class="tf-page-title">{{ current_membership.business.name }} proof momentum</h1>
        <p class="tf-page-subtitle">This dashboard is scoped to your current workspace only. Track completed jobs, response volume, published proof, and the conversion signal your team is creating this week.</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">View public gallery</a>
        {% if current_membership.can_manage_workspace %}<a class="btn tf-btn tf-btn-secondary" href="{% url 'workspace_settings' %}">Workspace settings</a>{% endif %}
        <a class="btn tf-btn tf-btn-primary" href="{% url 'job_create' %}">Log a new completed job</a>
      </div>
    </div>

    <div class="row g-4 mb-4">
      <div class="col-md-6 col-xl-3"><div class="tf-metric-card"><span>{{ stats.completed_jobs|default:0 }}</span><p>Jobs completed</p></div></div>
      <div class="col-md-6 col-xl-3"><div class="tf-metric-card"><span>{{ stats.review_requests|default:0 }}</span><p>Review requests</p></div></div>
      <div class="col-md-6 col-xl-3"><div class="tf-metric-card"><span>{{ stats.proof_cards|default:0 }}</span><p>Proof cards created</p></div></div>
      <div class="col-md-6 col-xl-3"><div class="tf-metric-card"><span>{{ conversion_rate }}%</span><p>Positive response rate</p></div></div>
    </div>

    <div class="row g-4">
      <div class="col-lg-7">
        <div class="tf-panel h-100">
          <div class="d-flex justify-content-between align-items-center mb-3">
            <h2 class="h4 mb-0">Recent jobs</h2>
            <a href="{% url 'jobs_list' %}" class="tf-inline-link">View all</a>
          </div>
          <div class="d-grid gap-3">
            {% for job in recent_jobs %}
            <a href="{% url 'job_detail' job.id %}" class="tf-activity-link">
              <div class="tf-activity-row tf-activity-row-soft">
                <div>
                  <strong>{{ job.service_type }}</strong>
                  <div class="small text-secondary-emphasis">{{ job.customer.full_name }} · {{ job.city }}, {{ job.state }}</div>
                </div>
                <span class="tf-status-pill tf-status-{{ job.status }}">{{ job.get_status_display }}</span>
              </div>
            </a>
            {% empty %}
            <div class="tf-empty-state text-start">
              <h3 class="h5 mb-2">No jobs yet</h3>
              <p class="text-secondary-emphasis mb-0">Use the field intake form to start the first proof workflow for {{ current_membership.business.name }}.</p>
            </div>
            {% endfor %}
          </div>
        </div>
      </div>
      <div class="col-lg-5">
        <div class="tf-panel h-100">
          <div class="d-flex justify-content-between align-items-center mb-3">
            <h2 class="h4 mb-0">Recent proof cards</h2>
            <a href="{% url 'proof_cards_list' %}" class="tf-inline-link">Open gallery</a>
          </div>
          <div class="d-grid gap-3">
            {% for proof in recent_proofs %}
            <a href="{% url 'proof_card_detail' proof.id %}" class="tf-proof-mini">
              <div>
                <div class="tf-card-tag mb-2">{{ proof.job.service_type }}</div>
                <strong>{{ proof.job.city }}, {{ proof.job.state }}</strong>
                <div class="small text-secondary-emphasis">{{ proof.customer_display_name }}</div>
              </div>
              <span class="tf-status-pill tf-status-{{ proof.status }}">{{ proof.get_status_display }}</span>
            </a>
            {% empty %}
            <div class="tf-empty-state text-start">
              <h3 class="h5 mb-2">No proof cards yet</h3>
              <p class="text-secondary-emphasis mb-0">Every completed job inside this workspace instantly creates a draft proof card.</p>
            </div>
            {% endfor %}
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
{% endblock %}