{% extends "base.html" %}
{% block title %}Search KT{% endblock %}
{% block content %}
<style>
  .opts-view { list-style: none; margin: 0; padding: 0; }
  .opts-view li { padding: 2px 0; color: #555; }
  .opts-view li.on { color: #111; font-weight: 600; }
  .opts-view .mark { display: inline-block; width: 1.3em; color: var(--navy); }
  .muted { color: #777; font-size: .88em; margin-top: 2px; }
  .kind-tag { display: inline-block; margin-top: 6px; padding: 1px 8px; border-radius: 10px; background: #eef2f8; color: #4a5a75; font-size: .75em; }
</style>
<h2>Search KT</h2>
<div class="card">
  <form method="get">
    <input name="q" id="q" value="{{ q }}" list="collegeNames" placeholder="Start typing a college name" autocomplete="off" style="width:60%" autofocus>
    <datalist id="collegeNames">
      {% for n in names %}<option value="{{ n }}">{% endfor %}
    </datalist>
    <button class="btn">Search</button>
    {% if searched %}<a href="{{ url_for('search') }}">Show all colleges</a>{% endif %}
  </form>
</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="college-head"><h3>List of Colleges</h3><span>{{ colleges|length }} total</span></div>
  <table class="grid">
    <thead>
      <tr><th class="num">S.No</th><th>College Name</th><th class="num" style="width:90px">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 href="{{ url_for('search', college=c.id) }}"><strong>{{ c.name }}</strong></a></td>
        <td class="count"><span class="badge {{ 'zero' if not c.kt_count }}">{{ c.kt_count }}</span></td>
        <td>{{ c.added_by or '-' }}</td>
        <td class="act"><a class="btn small" href="{{ url_for('search', college=c.id) }}">View KT</a></td>
      </tr>
      {% else %}
      <tr><td colspan="5" class="empty">No colleges added yet.</td></tr>
      {% endfor %}
    </tbody>
  </table>
</div>

{% else %}
{# result view: one table of KT per college #}
{% for c in colleges %}
<div class="card">
  <div class="college-head">
    <h3>{{ c.name }}</h3>
    {% if user.role in ('admin', 'lead') %}<a class="btn small" href="{{ url_for('kt_new', college=c.id) }}">+ Add KT</a>{% endif %}
  </div>
  <table class="grid">
    <thead>
      <tr>
        <th class="num">S.No</th><th style="width:22%">KT Title</th><th>KT Description</th><th style="width:16%">Faculty</th><th style="width:16%">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">&#9662; Options: {{ k.choices|map(attribute=0)|join(', ') }}</div>
          {% else %}
          <span style="white-space:pre-wrap">{{ k.text }}</span>
          {% endif %}
          <div class="kind-tag">{{ k.kind_label }}</div>
        </td>
        <td>{% if k.f_first %}{{ k.f_title }} {{ k.f_first }} {{ k.f_last }}{% else %}-{% endif %}</td>
        <td>{{ k.added_by or '-' }}</td>
        {% if user.role in ('admin', 'lead') %}
        <td class="act">
          <a class="btn small" href="{{ url_for('kt_edit', kid=k.id) }}">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 small danger">Delete</button>
          </form>
        </td>
        {% endif %}
      </tr>
      {% else %}
      <tr><td colspan="{{ 6 if user.role in ('admin', 'lead') else 5 }}" class="empty">No KT added yet.</td></tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% else %}
<div class="card"><p style="margin:0">No matching college found.</p></div>
{% endfor %}
{% endif %}
{% endblock %}