{% extends "base.html" %}
{% block page_title %}My Courses{% endblock %}
{% block content %}
<main class="mx-auto my-6 w-full max-w-6xl space-y-8 px-4 sm:px-6">
  <header class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
    <h1 class="m-0 text-2xl font-bold text-foreground">My Courses</h1>
    {% if lms_url %}
    <a href="{{ lms_url }}" target="_blank" rel="noopener noreferrer" class="blocks-button blocks-button-secondary min-h-11">Open TalentLMS</a>
    {% endif %}
  </header>

  {% if data_error %}
  <p class="rounded-xl border border-warning/30 bg-warning/10 px-4 py-3 text-sm leading-6 text-foreground" role="alert">Course data is temporarily unavailable. Please try again later or contact an administrator.</p>
  {% endif %}

  <section class="space-y-3" aria-labelledby="tlms-enrollments-heading">
    <h2 id="tlms-enrollments-heading" class="m-0 text-lg font-semibold text-foreground">My enrollments</h2>
    <div class="max-w-full overflow-x-auto rounded-xl border border-divider bg-surface">
      <table class="w-full min-w-[32rem] border-collapse text-left text-sm">
        <caption class="sr-only">Your TalentLMS course enrollment progress</caption>
        <thead class="bg-canvas text-xs font-bold uppercase tracking-wide text-muted">
          <tr>
            <th scope="col" class="border-b border-divider px-4 py-3">Course</th>
            <th scope="col" class="border-b border-divider px-4 py-3">Progress</th>
            <th scope="col" class="border-b border-divider px-4 py-3">Status</th>
          </tr>
        </thead>
        <tbody>
          {% for row in enrollments %}
          <tr>
            <td data-label="Course" class="border-b border-divider px-4 py-3 text-foreground">{{ row.course_name | default(value=row.course_id) }}</td>
            <td data-label="Progress" class="border-b border-divider px-4 py-3 text-foreground">{{ row.completion_percent | default(value=0) }}%</td>
            <td data-label="Status" class="border-b border-divider px-4 py-3 text-foreground">
              <span class="blocks-status-pill {% if row.completed %}is-success{% else %}is-warning{% endif %}">{% if row.completed %}Completed{% else %}In progress{% endif %}</span>
            </td>
          </tr>
          {% else %}
          <tr><td colspan="3" class="px-4 py-8 text-center text-muted">No enrollments yet.</td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </section>

  <section class="space-y-3" aria-labelledby="tlms-catalog-heading">
    <h2 id="tlms-catalog-heading" class="m-0 text-lg font-semibold text-foreground">Available courses</h2>
    <p id="tlms-user-status" class="m-0 text-sm text-muted" role="status" aria-live="polite"></p>
    <div id="tlms-course-catalog" class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
      {% for c in courses %}
      <article class="flex min-w-0 flex-col gap-3 rounded-2xl border border-divider bg-surface p-5 shadow-sm">
        <h3 class="m-0 break-words text-base font-semibold text-foreground">{{ c.name }}</h3>
        <p class="m-0 flex-1 text-sm leading-6 text-muted">{{ c.description | default(value='') | truncate(length=120) }}</p>
        <button type="button" class="blocks-button blocks-button-primary min-h-11 w-full sm:w-auto tlms-enroll-btn" data-course-id="{{ c.course_id }}" aria-label="Enroll in {{ c.name }}">Enroll</button>
      </article>
      {% else %}
      <p class="m-0 rounded-xl border border-divider bg-canvas p-5 text-sm leading-6 text-muted">No courses are cached yet. Ask an administrator to refresh the TalentLMS catalog.</p>
      {% endfor %}
    </div>
  </section>
</main>
{% endblock %}