{% extends "base.html" %}
{% from "_ui.html" import page_head, empty, college_badge, college_meta %}
{% block title %}Find College KT{% endblock %}
{% block content %}
{{ page_head('search', 'Find College 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: a grid of college cards #}
<div class="list-head">
  <h3>{{ icon('list') }} List of Colleges</h3><span class="count">{{ colleges|length }} total</span>
</div>
{% if colleges %}
<div class="college-cards">
  {% for c in colleges %}
  <a class="college-card" href="{{ url_for('college_kt_page', cid=c.id) }}" target="_blank" rel="noopener noreferrer">
    {{ college_badge(c, 56, 'lg') }}
    <div class="cc-name">{{ c.name }}</div>
    <div class="cc-sub">
      <span>{% if c.kt_count %}{{ c.kt_count }} KT loaded{% else %}No KT loaded yet{% endif %}{% if c.added_by %} &middot; Added by {{ c.added_by }}{% endif %}</span>
      <span class="cc-arrow">{{ icon('arrow-right') }}</span>
    </div>
  </a>
  {% endfor %}
</div>
{% else %}
<div class="card"><div class="card-body">{{ empty('inbox', 'No colleges added yet.') }}</div></div>
{% endif %}

{% else %}
{# result view: one table of KT Criteria per college #}
{% for c in colleges %}
<div class="card">
  <div class="card-head">
    <div class="cell">{{ college_badge(c, 32) }}<div><h3>{{ c.name }}</h3>{{ college_meta(c) }}</div></div>
    {% if user.role in ('admin', 'lead') %}<div class="tools"><a class="btn small add" href="{{ url_for('criteria_new', college=c.id) }}">{{ icon('plus') }} Add KT Criteria</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>KT Criteria</th><th style="width:15%">KT</th><th style="width:15%">Added By</th>
            {% if user.role in ('admin', 'lead') %}<th class="act">Action</th>{% endif %}
          </tr>
        </thead>
        <tbody>
          {% for cr in criteria.get(c.id, []) %}
          <tr>
            <td class="num">{{ loop.index }}</td>
            <td><a href="{{ url_for('criteria_page', crid=cr.id) }}"><strong>{{ cr.title }}</strong></a></td>
            <td>{% if cr.block_count %}{{ cr.block_count }} KT{% else %}<span class="muted">No KT yet</span>{% endif %}</td>
            <td>{% if cr.added_by %}<span class="cell muted">{{ icon('user') }}{{ cr.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('criteria_edit', crid=cr.id) }}" title="Rename" aria-label="Rename">{{ icon('edit') }}</a>
                <form class="inline" method="post" action="{{ url_for('criteria_delete', crid=cr.id) }}" onsubmit="return confirm('Delete this KT Criteria and everything inside it?')">
                  <input type="hidden" name="csrf" value="{{ csrf_token }}">
                  <button class="btn icon del" title="Delete" aria-label="Delete">{{ icon('trash') }}</button>
                </form>
              </span>
            </td>
            {% endif %}
          </tr>
          {% else %}
          <tr><td colspan="{{ 5 if user.role in ('admin', 'lead') else 4 }}" class="empty-cell">{{ empty('file-text', 'No KT Criteria 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: var(--muted); }
  .opts-view li.on { color: var(--text); font-weight: 600; }
  .opts-view .mark { display: inline-block; width: 1.4em; color: var(--primary-ink); }
  .small-note { font-size: .86rem; margin-top: 2px; }
  table.grid td .pill.tag { margin-top: 6px; }

  .list-head { display: flex; align-items: center; gap: 10px; margin: 26px 0 14px; }
  .list-head h3 { display: flex; align-items: center; gap: 9px; font-size: 1.02rem; color: var(--heading); }
  .list-head h3 .ic { color: var(--link); font-size: 1.15rem; }
  .list-head .count { margin-left: auto; color: var(--muted); font-size: .85rem; }

  .college-cards {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
    background-image: repeating-linear-gradient(45deg,
      color-mix(in srgb, var(--text) 5%, transparent) 0 1px, transparent 1px 16px);
    border-radius: 16px; padding: 4px;
  }
  @media (max-width: 900px) { .college-cards { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 600px) { .college-cards { grid-template-columns: 1fr; } }
  .college-card {
    position: relative; display: block; background: var(--surface); border: 1px solid var(--line);
    border-radius: 16px; padding: 24px; box-shadow: var(--shadow); text-decoration: none;
    transition: box-shadow .15s, border-color .15s, transform .15s;
  }
  .college-card:hover { box-shadow: var(--pop-shadow); border-color: var(--line-strong); transform: translateY(-2px); }
  .clogo.lg { border-radius: 14px; font-size: 1.7rem; }
  .cc-name {
    margin-top: 20px; font-family: Georgia, "Times New Roman", serif; font-weight: 700;
    font-size: 1.18rem; line-height: 1.3; color: var(--heading);
  }
  .cc-sub { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; color: var(--muted); font-size: .85rem; }
  .cc-arrow { color: var(--muted); transition: transform .15s, color .15s; flex: none; }
  .cc-arrow .ic { display: block; }
  .college-card:hover .cc-arrow { color: var(--link); transform: translateX(3px); }
</style>
{% endblock %}