{% extends "base.html" %}
{% block title %}{{ project.project_number }}{% endblock %}
{% block page_class %}has-sticky-actions{% endblock %}
{% block content %}
  <div class="header-row">
    <div>
      <div class="title-line">
        <a class="back-link" href="/" aria-label="Back to projects">&larr;</a>
        <h1>Project for {{ project.customer_name }}</h1>
      </div>
      <p class="muted">{{ project.project_number }}</p>
    </div>
  </div>

  <section class="section" style="margin-top:25px;">
    <h2>Payment Link</h2>
    <div class="copy-field">
      <input id="share-url" value="{{ project.share_url }}" readonly aria-label="Payment link">
      <span id="copy-status" class="copy-indicator" aria-hidden="true"></span>
    </div>
  </section>

  {% include "_invoice_line_items.html" %}

  {% if project.scope_terms %}
  <section class="section">
    <h2>Terms and Scope</h2>
      <div class="prewrap">{{ project.scope_terms|star_emphasis }}</div>
  </section>
  {% endif %}

  <section class="section">
    <h2>Payments</h2>
    {% if payments %}
      <div class="project-list payment-list">
        {% for payment in payments %}
          {% set payment_reference = payment.stripe_payment_intent_id or payment.stripe_checkout_session_id or payment.webhook_id %}
          <article class="payment-card">
            <div class="project-card-main">
              <div>
                <h3>
                  <span class="status {{ payment.status }}">{{ payment.status }}</span>
                  {{ payment.created_at.strftime("%b %d, %Y") if payment.created_at else "Payment" }}
                </h3>
                {% if payment_reference %}
                  <div class="project-card-id payment-card-reference">{{ payment_reference }}</div>
                {% endif %}
              </div>
              <div class="project-card-amount">
                <span>Amount</span>
                <strong>{{ payment.amount_cents|money(payment.currency or currency) }}</strong>
              </div>
            </div>
          </article>
        {% endfor %}
      </div>
    {% else %}
      <div class="empty">No payments yet.</div>
    {% endif %}
  </section>

  <form class="full-width-form" method="post" action="/delete/{{ project.id }}" onsubmit="return confirm('Delete {{ project.project_number }}? This cannot be undone.');">
    <button class="danger" type="submit">Delete</button>
  </form>

  <div class="sticky-actions">
    <div class="sticky-actions-inner">
      <a class="button secondary" href="/edit/{{ project.id }}">Edit</a>
      <button type="button" id="share-link">Share</button>
    </div>
  </div>

  <script>
    async function copyPaymentLink() {
      const input = document.getElementById("share-url");
      const status = document.getElementById("copy-status");
      input.select();
      if (navigator.clipboard) {
        await navigator.clipboard.writeText(input.value);
      } else {
        document.execCommand("copy");
      }
      status.classList.add("copied");
      setTimeout(() => status.classList.remove("copied"), 1400);
    }

    document.getElementById("share-url").addEventListener("click", copyPaymentLink);
    document.getElementById("share-link").addEventListener("click", async () => {
      const button = document.getElementById("share-link");
      await copyPaymentLink();
      button.textContent = "Copied!";
      setTimeout(() => button.textContent = "Share", 1400);
    });
  </script>
{% endblock %}