{% extends "base.html" %}
{% block page_title %}Sign agreements{% endblock %}
{% block content %}
<main data-plugin="docusign-connect" data-context-plugin="{{ context_plugin }}" data-context-ref="{{ context_ref }}" class="mx-auto w-full max-w-7xl space-y-6 p-4 sm:p-6">
  <header class="space-y-2">
    <h1 class="text-2xl font-bold tracking-tight text-foreground sm:text-3xl">Agreements</h1>
    <p class="max-w-3xl text-muted">Review, sign, and manage your agreements securely below.</p>
  </header>

  <section class="grid grid-cols-1 items-stretch gap-4 md:grid-cols-2 xl:grid-cols-3" aria-label="Your agreements">
    {% for a in agreements %}
    <article class="flex min-w-0 flex-col overflow-hidden rounded-xl border border-divider bg-surface shadow-sm" data-key="{{ a.template_key }}">
      <div class="flex items-start justify-between gap-3 border-b border-divider p-4 sm:p-5">
        <span class="flex h-11 w-11 shrink-0 items-center justify-center rounded-lg bg-brand/10 text-brand" aria-hidden="true">
          <i class="fas fa-file-signature text-lg"></i>
        </span>
        {% if a.status == "completed" or a.status == "signed" %}
        <span class="blocks-status-pill is-success"><i class="fas fa-check-circle" aria-hidden="true"></i> Signed</span>
        {% elif a.status == "sent" or a.status == "delivered" %}
        <span class="blocks-status-pill is-warning"><i class="fas fa-clock" aria-hidden="true"></i> Pending signature</span>
        {% else %}
        <span class="blocks-status-pill is-neutral"><i class="fas fa-file-alt" aria-hidden="true"></i> Ready to sign</span>
        {% endif %}
      </div>

      <div class="flex flex-1 flex-col gap-4 p-4 sm:p-5">
        <div>
          <h2 class="text-lg font-semibold text-foreground">{{ a.label | default(value=a.template_key) }}</h2>
          {% if a.status == "completed" or a.status == "signed" %}
          <p class="mt-2 text-sm leading-6 text-muted">This agreement has been successfully completed and electronically signed.</p>
          {% if a.signed_at %}
          <dl class="mt-4 flex flex-wrap items-baseline justify-between gap-2 rounded-lg border border-divider bg-canvas p-3 text-sm">
            <dt class="text-muted">Signed on</dt><dd class="font-medium text-foreground">{{ a.signed_at | date_in_tz(timezone=settings.timezone) }}</dd>
          </dl>
          {% endif %}
          {% elif a.status == "sent" or a.status == "delivered" %}
          <p class="mt-2 text-sm leading-6 text-muted">A signature request has been generated. Complete the signing process to finish this agreement.</p>
          {% if a.envelope_id %}
          <dl class="mt-4 flex flex-wrap items-baseline justify-between gap-2 rounded-lg border border-divider bg-canvas p-3 text-sm">
            <dt class="text-muted">Envelope ID</dt><dd class="max-w-full break-all font-mono text-xs text-foreground">{{ a.envelope_id | truncate(length=14) }}…</dd>
          </dl>
          {% endif %}
          {% else %}
          <p class="mt-2 text-sm leading-6 text-muted">Create this agreement and sign it securely through DocuSign.</p>
          {% endif %}
        </div>
        <div class="mt-auto" aria-hidden="true"></div>
      </div>

      <footer class="flex flex-col gap-2 border-t border-divider bg-surface p-4 sm:p-5">
        {% if a.status == "completed" or a.status == "signed" %}
        <div class="flex min-h-11 items-center justify-center gap-2 rounded-lg bg-success/10 px-3 py-2 text-sm font-semibold text-success" role="status">
          <i class="fas fa-check" aria-hidden="true"></i> Agreement finalized
        </div>
        {% elif a.status == "sent" or a.status == "delivered" %}
        <div class="flex flex-col gap-2 sm:flex-row">
          {% if a.signing_url %}
          <button type="button" class="blocks-button blocks-button-primary w-full sm:flex-1 ds-sign-btn" data-envelope-id="{{ a.envelope_id }}">
            <i class="fas fa-signature" aria-hidden="true"></i> Sign now
          </button>
          {% endif %}
          <button type="button" class="blocks-button blocks-button-secondary w-full sm:flex-1 ds-sync-btn" data-envelope-id="{{ a.envelope_id }}">
            <i class="fas fa-sync-alt" data-spinner aria-hidden="true"></i> Check status
          </button>
        </div>
        {% else %}
        <button type="button" class="blocks-button blocks-button-primary w-full ds-start-signing" data-key="{{ a.template_key }}">
          <i class="fas fa-plus" aria-hidden="true"></i> Create &amp; sign
        </button>
        {% endif %}
      </footer>
    </article>
    {% else %}
    <div class="col-span-full rounded-xl border border-dashed border-divider bg-surface p-8 text-center sm:p-12">
      <i class="fas fa-folder-open text-3xl text-muted" aria-hidden="true"></i>
      <h2 class="mt-4 text-lg font-semibold text-foreground">No agreements available</h2>
      <p class="mx-auto mt-2 max-w-xl text-sm leading-6 text-muted">There are no agreements configured or assigned to your profile at this time.</p>
    </div>
    {% endfor %}
  </section>
</main>
{% endblock %}