{% extends "base.html" %}
{% block page_title %}BTM Consultant — {{ role_name }}{% endblock %}
{% block content %}
<main class="mx-auto w-full max-w-6xl px-4 py-6 text-foreground sm:px-6 lg:py-10" data-plugin="btm-custom" data-portal="consultant">
  <header class="mb-8 flex flex-col gap-4 border-b border-divider pb-6 sm:flex-row sm:items-center sm:justify-between">
    <div>
      <h1 class="text-2xl font-bold tracking-tight sm:text-3xl">{{ role_name }} portal</h1>
      <p class="mt-2 text-sm text-muted">Qualification: <span class="font-semibold text-foreground">{{ enrollment.status | default(value='pending') | capitalize }}</span><span aria-hidden="true"> · </span>Wallet: <span class="font-semibold text-foreground">{{ currency_symbol | default(value='₹') }} {{ wallet_balance | default(value=0) | price }}</span></p>
    </div>
    <nav class="flex flex-wrap gap-3" aria-label="Consultant shortcuts">
      <a href="/plugins/wallet/index" class="blocks-button blocks-button-primary">Recharge wallet</a>
      <a href="/plugins/talentlms-connect/index" class="blocks-button blocks-button-secondary">Courses and enrollment</a>
    </nav>
  </header>

  {% if not agreements_signed %}
  <aside class="mb-8 rounded-xl border border-warning bg-warning/10 p-4 text-sm text-foreground" role="status">
    <a class="font-semibold text-brand underline underline-offset-2" href="/plugins/docusign-connect/index">Sign your required agreements</a> to unlock full access.
  </aside>
  {% endif %}

  <section class="mb-8 rounded-2xl border border-divider bg-surface p-5 shadow-sm sm:p-7">
    <div class="mb-5">
      <h2 class="text-lg font-semibold">My enrollments</h2>
      <p class="mt-1 text-sm text-muted">Review your current course progress and completion status.</p>
    </div>
    <div class="blocks-table-scroll">
      <table class="blocks-admin-table responsive-table min-w-[34rem]">
        <thead><tr><th>Course</th><th>Progress</th><th>Status</th></tr></thead>
        <tbody>
          {% for row in my_enrollments %}
          <tr>
            <td data-label="Course">{{ row.course_name | default(value=row.course_id) }}</td>
            <td data-label="Progress">{{ row.completion_percent | default(value=0) }}%</td>
            <td data-label="Status">{% if row.completed %}<span class="blocks-status-pill is-success">Completed</span>{% else %}<span class="blocks-status-pill is-info">In progress</span>{% endif %}</td>
          </tr>
          {% else %}
          <tr><td colspan="3" class="p-6 text-center text-sm text-muted">No course enrollments yet. <a class="font-semibold text-brand underline underline-offset-2" href="/plugins/talentlms-connect/index">Browse courses</a> to get started.</td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </section>

  <section class="rounded-2xl border border-divider bg-surface p-5 shadow-sm sm:p-7">
    <div class="mb-5">
      <h2 class="text-lg font-semibold">Available courses</h2>
      <p class="mt-1 text-sm text-muted">Continue learning through your connected TalentLMS workspace.</p>
    </div>
    <ul class="divide-y divide-divider rounded-xl border border-divider">
      {% for c in courses %}
      <li class="flex flex-col gap-3 p-4 sm:flex-row sm:items-center sm:justify-between">
        <span class="font-medium">{{ c.name }}</span>
        <a href="/plugins/talentlms-connect/index" class="blocks-button blocks-button-secondary">Enroll</a>
      </li>
      {% else %}
      <li class="p-5 text-sm text-muted">No courses are available right now.</li>
      {% endfor %}
    </ul>
  </section>
</main>
{% endblock %}