{% extends "admin_base.html" %}
{% import "macros/admin_crud_list.html" as crud %}

{% block page_title %}DocuSign{% endblock %}

{% block admin_content %}
<main data-plugin="docusign-connect" class="mx-auto w-full max-w-7xl space-y-5 p-4 sm:p-6">
  {{ crud::shell_open(config_url="/plugins/docusign-connect/assets/admin/templates_list.json", mount_id="docusign-templates-list", custom_mount=true) }}

  <section class="space-y-3" aria-label="DocuSign connection and template actions">
    <div id="ds-consent-callout" class="rounded-xl border border-warning bg-warning/10 p-4 text-foreground" hidden
         data-integration-key="{{ plugin_settings.docusign_integration_key | default(value='') }}"
         data-auth-server="{{ plugin_settings.docusign_auth_server | default(value='account-d.docusign.com') }}"></div>
    <div class="flex flex-col gap-3 rounded-xl border border-divider bg-surface p-4 sm:flex-row sm:flex-wrap sm:items-center sm:justify-between">
      <div class="flex flex-col gap-2 sm:flex-row">
        <button type="button" class="blocks-button blocks-button-secondary w-full sm:w-auto" id="ds-test-connection">
          <i class="fas fa-plug" aria-hidden="true"></i> Test connection
        </button>
        <button type="button" class="blocks-button blocks-button-secondary w-full sm:w-auto" id="ds-sync-fields">
          <i class="fas fa-list-check" aria-hidden="true"></i> Sync profile fields
        </button>
        <button type="button" class="blocks-button blocks-button-secondary w-full sm:w-auto" id="ds-refresh-templates">
          <i class="fas fa-sync-alt" aria-hidden="true"></i> Refresh from DocuSign
        </button>
      </div>
      <div class="flex min-w-0 flex-col gap-1 text-sm" aria-live="polite">
        <span id="ds-connection-status" class="text-muted"></span>
        <span id="ds-field-sync-status" class="text-muted"></span>
        <span id="ds-template-load-status" class="text-muted"></span>
      </div>
    </div>
  </section>

  <div class="blocks-table-scroll overflow-x-auto rounded-xl border border-divider bg-surface">
    <table class="blocks-admin-table w-full min-w-[36rem]">
      <thead></thead>
      <tbody>
        <tr><td colspan="4" class="py-12 text-center text-muted">Loading templates…</td></tr>
      </tbody>
    </table>
  </div>

  {{ crud::shell_close() }}
</main>

<div id="template-modal" class="crud-modal" aria-hidden="true" role="dialog" aria-modal="true" aria-labelledby="template-modal-title">
  <div class="modal-content w-full max-w-lg">
    <div class="modal-header">
      <h2 id="template-modal-title">Add Template</h2>
      <button type="button" class="close-modal" aria-label="Close">&times;</button>
    </div>
    <div class="modal-body">
      <div id="template-form-fields"></div>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script type="application/json" id="ds-remote-templates">[]</script>
<script src="/plugins/docusign-connect/assets/js/docusign_consent.js" defer></script>
<script src="/plugins/docusign-connect/assets/js/docusign_admin.js" defer></script>
{% endblock %}