{% extends "admin_base.html" %}
{% block page_title %}TalentLMS{% endblock %}
{% block admin_content %}
<main class="mx-auto my-6 w-full max-w-5xl space-y-6 px-4 sm:px-6">
  <header class="space-y-2">
    <h1 class="m-0 text-2xl font-bold text-foreground">TalentLMS integration</h1>
    <p class="m-0 max-w-3xl text-sm leading-6 text-muted">Manage the TalentLMS connection and keep the course catalog up to date.</p>
  </header>

  <section class="rounded-2xl border border-divider bg-surface p-4 shadow-sm sm:p-6" aria-labelledby="tlms-actions-heading">
    <h2 id="tlms-actions-heading" class="mb-4 text-lg font-semibold text-foreground">Connection and catalog</h2>
    {% if data_error %}
    <p class="mb-4 rounded-xl border border-warning/30 bg-warning/10 px-4 py-3 text-sm leading-6 text-foreground" role="alert">Tenant data is unavailable. Ask an administrator to re-enable TalentLMS or review this tenant's plugin setup.</p>
    {% endif %}
    {% if configured %}
    <p class="mb-4 rounded-xl border border-success/30 bg-success/10 px-4 py-3 text-sm text-foreground" role="status">Credentials are configured. Test the connection to verify access, then refresh the catalog when courses change.</p>
    {% else %}
    <p class="mb-4 rounded-xl border border-warning/30 bg-warning/10 px-4 py-3 text-sm text-foreground" role="status">Setup needed: add the TalentLMS domain and API key in Plugin Settings before testing the connection.</p>
    {% endif %}
    <div class="flex flex-col gap-3 sm:flex-row sm:flex-wrap">
      <button type="button" class="blocks-button blocks-button-secondary min-h-11" id="tlms-test-btn">Test connection</button>
      <button type="button" class="blocks-button blocks-button-primary min-h-11" id="tlms-refresh-btn">Refresh courses</button>
    </div>
    <p id="tlms-admin-status" class="mt-4 mb-0 text-sm text-muted" role="status" aria-live="polite"></p>
    <p class="mt-4 mb-0 text-sm text-muted">Courses cached: <strong class="text-foreground">{{ course_count | default(value=0) }}</strong></p>
  </section>
</main>
{% endblock %}