{% extends "base.html" %}
{% from "_ui.html" import page_head, empty %}
{% block title %}Search KT{% endblock %}
{% block content %}
{{ page_head('search', 'Search KT', 'Find a college to see its stored KT.') }}

<div class="card">
  <div class="card-body">
    <form method="get" class="searchbar">
      <div class="input-icon">
        {{ icon('search') }}
        <input name="q" id="q" value="{{ q }}" list="collegeNames" placeholder="Start typing a college name" autocomplete="off" autofocus>
        <datalist id="collegeNames">
          {% for n in names %}<option value="{{ n }}">{% endfor %}
        </datalist>
      </div>
      <button class="btn">{{ icon('search') }} Search</button>
      {% if searched %}<a class="btn ghost" href="{{ url_for('search') }}">{{ icon('list') }} Show all colleges</a>{% endif %}
    </form>
  </div>
</div>

<script>
  // picking a suggestion from the list searches straight away
  document.getElementById('q').addEventListener('input', function (e) {
    if (!e.inputType || e.inputType === 'insertReplacementText') this.form.submit();
  });
</script>

{% if not searched %}
{# default view: table of colleges #}
<div class="card">
  <div class="card-head"><h3>{{ icon('list') }} List of Colleges</h3><span class="count">{{ colleges|length }} total</span></div>
  <div class="card-body flush">
    <div class="table-wrap">
      <table class="grid">
        <thead>
          <tr><th class="num">S.No</th><th>College Name</th><th class="ctr" style="width:110px">No. of KT</th><th style="width:20%">Added By</th><th class="act">Action</th></tr>
        </thead>
        <tbody>
          {% for c in colleges %}
          <tr>
            <td class="num">{{ loop.index }}</td>
            <td><a class="cell" href="{{ url_for('search', college=c.id) }}">{{ icon('cap') }}<strong>{{ c.name }}</strong></a></td>
            <td class="ctr"><span class="pill {{ 'zero' if not c.kt_count }}">{{ c.kt_count }}</span></td>
            <td>{% if c.added_by %}<span class="cell muted">{{ icon('user') }}{{ c.added_by }}</span>{% else %}<span class="muted">-</span>{% endif %}</td>
            <td class="act"><a class="btn small" href="{{ url_for('search', college=c.id) }}">{{ icon('eye') }} View KT</a></td>
          </tr>
          {% else %}
          <tr><td colspan="5" class="empty-cell">{{ empty('inbox', 'No colleges added yet.') }}</td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>

{% else %}
{# result view: one table of KT per college #}
{% for c in colleges %}
<div class="card">
  <div class="card-head">
    <h3>{{ icon('cap') }} {{ c.name }}</h3>
    {% if user.role in ('admin', 'lead') %}<div class="tools"><a class="btn small add" href="{{ url_for('kt_new', college=c.id) }}">{{ icon('plus') }} Add KT</a></div>{% endif %}
  </div>
  <div class="card-body flush">
    <div class="table-wrap">
      <table class="grid top">
        <thead>
          <tr>
            <th class="num">S.No</th><th style="width:22%">KT Title</th><th>KT Description</th><th style="width:15%">Faculty</th><th style="width:15%">Added By</th>
            {% if user.role in ('admin', 'lead') %}<th class="act">Action</th>{% endif %}
          </tr>
        </thead>
        <tbody>
          {% for k in kts.get(c.id, []) %}
          <tr>
            <td class="num">{{ loop.index }}</td>
            <td><strong>{{ k.title or '-' }}</strong></td>
            <td>
              {% if k.kind in ('multiple_choice', 'checkboxes') and k.choices %}
              <ul class="opts-view">
                {% for o, on in k.choices %}<li class="{{ 'on' if on }}"><span class="mark">{% if k.kind == 'multiple_choice' %}{{ '&#9673;'|safe if on else '&#9675;'|safe }}{% else %}{{ '&#9745;'|safe if on else '&#9744;'|safe }}{% endif %}</span> {{ o }}</li>{% endfor %}
              </ul>
              {% elif k.kind == 'dropdown' and k.choices %}
              <strong>{{ k.text }}</strong>
              <div class="muted small-note">&#9662; Options: {{ k.choices|map(attribute=0)|join(', ') }}</div>
              {% else %}
              <span style="white-space:pre-wrap">{{ k.text }}</span>
              {% endif %}
              <div><span class="pill tag">{{ k.kind_label }}</span></div>
            </td>
            <td>{% if k.f_first %}<span class="cell">{{ icon('user') }}{{ k.f_title }} {{ k.f_first }} {{ k.f_last }}</span>{% else %}<span class="muted">-</span>{% endif %}</td>
            <td>{% if k.added_by %}<span class="cell muted">{{ icon('user') }}{{ k.added_by }}</span>{% else %}<span class="muted">-</span>{% endif %}</td>
            {% if user.role in ('admin', 'lead') %}
            <td class="act">
              <span class="btn-row">
                <a class="btn icon edit" href="{{ url_for('kt_edit', kid=k.id) }}" title="Edit KT" aria-label="Edit KT">{{ icon('edit') }}</a>
                <form class="inline" method="post" action="{{ url_for('kt_delete', kid=k.id) }}" onsubmit="return confirm('Delete this KT?')">
                  <input type="hidden" name="csrf" value="{{ csrf_token }}">
                  <button class="btn icon del" title="Delete KT" aria-label="Delete KT">{{ icon('trash') }}</button>
                </form>
              </span>
            </td>
            {% endif %}
          </tr>
          {% else %}
          <tr><td colspan="{{ 6 if user.role in ('admin', 'lead') else 5 }}" class="empty-cell">{{ empty('file-text', 'No KT added yet.') }}</td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>
{% else %}
<div class="card"><div class="card-body">{{ empty('search', 'No matching college found.') }}</div></div>
{% endfor %}
{% endif %}
<style>
  .opts-view { list-style: none; margin: 0; padding: 0; }
  .opts-view li { padding: 2px 0; color: #5b6472; }
  .opts-view li.on { color: #111827; font-weight: 600; }
  .opts-view .mark { display: inline-block; width: 1.4em; color: var(--navy); }
  .small-note { font-size: .86rem; margin-top: 2px; }
  table.grid td .pill.tag { margin-top: 6px; }
</style>
{% endblock %}