{% extends "base.html" %}
{% from "_ui.html" import empty %}
{% block title %}{{ criteria.title }} - KT{% endblock %}
{% block content %}
<style>
  body { background: var(--bg); }
  .kt-page { max-width: 1100px; margin: 0 auto; padding: 28px 24px 60px; }
  .kt-page-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 34px; }
  .back-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--line);
              border-radius: 999px; padding: 9px 18px; font-weight: 700; color: var(--heading); text-decoration: none;
              box-shadow: var(--shadow); }
  .back-btn:hover { border-color: var(--line-strong); }
  .kt-hero { margin-bottom: 30px; }
  .kt-hero .label { display: flex; align-items: center; gap: 8px; text-transform: uppercase; letter-spacing: .08em;
                     font-size: .8rem; font-weight: 700; color: var(--muted); margin-bottom: 10px; }
  .kt-hero h1 { font-family: Georgia, "Times New Roman", serif; font-weight: 700; font-size: clamp(2rem, 5vw, 3.1rem);
                line-height: 1.08; color: var(--heading); letter-spacing: -.01em; }
  .kt-hero p { margin-top: 12px; color: var(--muted); font-size: 1.02rem; max-width: 640px; }
  .kt-hero .editor-tools { margin-top: 18px; display: flex; gap: 10px; }

  .kt-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) { .kt-cards { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 600px) { .kt-cards { grid-template-columns: 1fr; } }
  .kt-card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
             padding: 24px; box-shadow: var(--shadow); }
  .kt-card-wide { grid-column: 1 / -1; }
  .kt-card .kt-tools { display: flex; justify-content: flex-end; gap: 6px; margin: -6px -6px 8px 0; }
  .kt-card h3 { font-family: Georgia, "Times New Roman", serif; font-weight: 700; font-size: 1.14rem; line-height: 1.3; color: var(--heading); }
  .kt-card .kt-body { margin-top: 10px; color: var(--text); font-size: .93rem; white-space: pre-wrap; }
  .kt-card .kt-desc { margin-top: 6px; color: var(--muted); font-size: .85rem; line-height: 1.4; white-space: pre-wrap; }
  .kt-body ul, .kt-body ol, .kt-desc ul, .kt-desc ol { margin: 4px 0 4px 1.4em; }
  .kt-body blockquote, .kt-desc blockquote { margin: 0; border: 0; padding: 0; }
  .kt-body div, .kt-desc div { min-height: 1em; }
  .kt-card .kt-label { margin-top: 10px; font-weight: 600; font-size: .9rem; color: var(--text); }
  .kt-card .kt-question { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-2); }
  .kt-card .kt-question:first-of-type { margin-top: 10px; padding-top: 0; border-top: 0; }
  .kt-card .kt-question .pill.tag { margin-top: 8px; }
  .kt-card .kt-open { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; color: var(--link); font-weight: 700;
                       text-decoration: none; font-size: .93rem; }
  .kt-card .kt-open:hover { text-decoration: underline; }
  .kt-card .kt-foot { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-2); display: flex; align-items: center;
                       justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: .78rem; color: var(--muted); }

  .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); }
  .pill.tag { font-weight: 500; font-size: .74rem; padding: 1px 9px; }

  .kt-faculty { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
  .kt-faculty-ic { width: 42px; height: 42px; border-radius: 50%; background: var(--ph-ic-bg); color: var(--primary-ink);
                   display: grid; place-items: center; flex: none; }
  .kt-faculty a { color: var(--link); font-size: .88rem; word-break: break-all; }
  .kt-reminder { display: flex; gap: 24px; margin-top: 10px; flex-wrap: wrap; }
  .kt-reminder > div { display: flex; flex-direction: column; gap: 3px; }
  .kt-reminder .muted { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; }
  .kt-reminder strong { font-size: 1rem; color: var(--heading); }

  .kt-alert { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 10px; border: 1px solid; font-size: .92rem; margin-top: 10px; }
  .kt-alert .ic { flex: none; margin-top: 1px; }
  .kt-alert-info { background: color-mix(in srgb, var(--link) 10%, var(--surface)); border-color: color-mix(in srgb, var(--link) 35%, var(--line)); }
  .kt-alert-warning { background: color-mix(in srgb, #d97706 14%, var(--surface)); border-color: color-mix(in srgb, #d97706 45%, var(--line)); }
  .kt-alert-warning .ic { color: #d97706; }
  .kt-alert-ok { background: color-mix(in srgb, var(--ok) 12%, var(--surface)); border-color: color-mix(in srgb, var(--ok) 40%, var(--line)); }
  .kt-alert-ok .ic { color: var(--ok); }
  .kt-alert-critical { background: color-mix(in srgb, var(--danger) 12%, var(--surface)); border-color: color-mix(in srgb, var(--danger) 40%, var(--line)); }
  .kt-alert-critical .ic { color: var(--danger); }
  .kt-alert-info .ic { color: var(--link); }
  .kt-file { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
  .kt-file .ic { width: 1.6rem; height: 1.6rem; color: var(--link); flex: none; }
  .kt-embed { border-radius: 10px; overflow: hidden; border: 1px solid var(--line); aspect-ratio: 16 / 9; margin-top: 10px; background: #000; }
  .kt-embed iframe { width: 100%; height: 100%; border: 0; display: block; }
</style>

<div class="kt-page">
  <div class="kt-page-top">
    <a class="back-btn" href="{{ url_for('college_kt_page', cid=criteria.college_id) }}">{{ icon('arrow-left') }} {{ criteria.college_name }}</a>
    {{ theme_switch() }}
  </div>

  <div class="kt-hero">
    <div class="label">{{ icon('list') }}{{ criteria.college_name }} &middot; KT Criteria</div>
    <h1>{{ criteria.title }}</h1>
    <p>The KT stored inside this criteria - add as many as you need: Form, Attachment, Embedded Media, Link, Alert or Description.</p>
    {% if user.role in ('admin', 'lead') %}
    <div class="editor-tools">
      <a class="btn small add" href="{{ url_for('kt_new', criteria=criteria.id) }}">{{ icon('plus') }} Add KT</a>
      <a class="btn small ghost" href="{{ url_for('criteria_edit', crid=criteria.id) }}">{{ icon('edit') }} Rename</a>
    </div>
    {% endif %}
  </div>

  {% if blocks %}
  <div class="kt-cards">
    {% for k in blocks %}
    <div class="kt-card {{ 'kt-card-wide' if k.block_type in ('form', 'embed', 'description') }}">
      {% if user.role in ('admin', 'lead') %}
      <div class="kt-tools">
        <a class="btn icon add" href="{{ url_for('kt_new', criteria=criteria.id) }}" title="Add KT" aria-label="Add KT">{{ icon('plus') }}</a>
        <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) }}" data-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>
      </div>
      {% endif %}
      <h3>{{ k.title or '-' }}</h3>
      {% if k.block_type == 'form' and k.description %}
      <div class="kt-desc">{{ k.description|rich }}</div>
      {% endif %}
      {% if k.block_type == 'form' %}
      {% for f in k.fields %}
      <div class="kt-question">
        {% if f.label %}<div class="kt-label">{{ f.label }}</div>{% endif %}
        {% if f.kind in ('multiple_choice', 'checkboxes') and f.choices %}
        <ul class="opts-view kt-body">
          {% for o, on in f.choices %}<li class="{{ 'on' if on }}"><span class="mark">{% if f.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 f.kind == 'dropdown' and f.choices %}
        <div class="kt-body"><strong>{{ f.text }}</strong><br><span class="muted">Options: {{ f.choices|map(attribute=0)|join(', ') }}</span></div>
        {% else %}
        <div class="kt-body">{{ f.text }}</div>
        {% endif %}
        <span class="pill tag">{{ f.kind_label }}</span>
      </div>
      {% endfor %}
      {% elif k.block_type == 'alert' %}
      <div class="kt-alert kt-alert-{{ k.alert_level }}">
        {{ icon('info' if k.alert_level == 'info' else 'alert') }}
        <span>{{ k.text }}</span>
      </div>
      {% elif k.block_type == 'attachment' %}
      <div class="kt-file">
        {{ icon('paperclip') }}
        <div><strong>{{ k.file_name or 'File' }}</strong><br>
          <span class="muted">{{ (k.file_type or '')|upper }}{% if k.file_size_h %} &middot; {{ k.file_size_h }}{% endif %}</span>
        </div>
      </div>
      <a class="btn small ghost" style="margin-top:10px" href="{{ url_for('kt_file', kid=k.id) }}" target="_blank" rel="noopener noreferrer">{{ icon('download') }} Download</a>
      {% elif k.block_type == 'embed' %}
      <div class="kt-embed"><iframe src="{{ k.embed_src }}" loading="lazy" allowfullscreen sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-forms" referrerpolicy="no-referrer"></iframe></div>
      <a class="kt-open" href="{{ k.text }}" target="_blank" rel="noopener noreferrer">{{ icon('arrow-right') }} Open in a new tab</a>
      {% elif k.link %}
      <a class="kt-open" href="{{ k.link }}" target="_blank" rel="noopener noreferrer">{{ icon('arrow-right') }} Open link</a>
      {% elif k.block_type == 'reminder' %}
      <div class="kt-reminder">
        <div><span class="muted">Availability Updated</span><strong>{{ k.reminder_updated or '-' }}</strong></div>
        <div><span class="muted">Availability Due</span><strong>{{ k.reminder_due or '-' }}</strong></div>
      </div>
      {% if k.f_first %}
      <div class="kt-faculty">
        <span class="kt-faculty-ic">{{ icon('user') }}</span>
        <div><strong>{{ k.f_title }} {{ k.f_first }} {{ k.f_last }}</strong><br>
          <a href="mailto:{{ k.f_email }}">{{ k.f_email }}</a></div>
      </div>
      {% endif %}
      {% if k.reminder_message %}
      <div class="kt-alert kt-alert-{{ {'overdue': 'critical', 'due_soon': 'warning', 'upcoming': 'ok'}[k.reminder_state] }}" style="margin-top:10px">
        {{ icon('check-circle' if k.reminder_state == 'upcoming' else 'alert') }} <span>{{ k.reminder_message }}</span>
      </div>
      {% endif %}
      {% elif k.block_type == 'faculty' %}
      {% if k.f_first %}
      <div class="kt-faculty">
        <span class="kt-faculty-ic">{{ icon('user') }}</span>
        <div><strong>{{ k.f_title }} {{ k.f_first }} {{ k.f_last }}</strong><br>
          <a href="mailto:{{ k.f_email }}">{{ k.f_email }}</a></div>
      </div>
      {% else %}
      <div class="kt-alert kt-alert-warning" style="margin-top:10px">{{ icon('alert') }} <span>This faculty is no longer in the Faculty List. Edit this KT to choose another.</span></div>
      {% endif %}
      {% if k.file_path %}
      <div class="kt-file">
        {{ icon('paperclip') }}
        <div><strong>{{ k.file_name or 'File' }}</strong><br>
          <span class="muted">{{ (k.file_type or '')|upper }}{% if k.file_size_h %} &middot; {{ k.file_size_h }}{% endif %}</span>
        </div>
      </div>
      <a class="btn small ghost" style="margin-top:10px" href="{{ url_for('kt_file', kid=k.id) }}" target="_blank" rel="noopener noreferrer">{{ icon('download') }} Download</a>
      {% endif %}
      {% if k.faculty_link %}
      <a class="kt-open" href="{{ k.faculty_link }}" target="_blank" rel="noopener noreferrer">{{ icon('arrow-right') }} Open link</a>
      {% endif %}
      {% else %}
      <div class="kt-body">{{ k.text|rich }}</div>
      {% endif %}
      <div class="kt-foot">
        {% if k.block_type == 'form' %}<span class="pill tag">{{ k.fields|length }} question{{ 's' if k.fields|length != 1 }}</span>
        {% elif k.block_type == 'attachment' %}<span class="pill tag">Attachment</span>
        {% elif k.block_type == 'embed' %}<span class="pill tag">Embedded Media</span>
        {% elif k.block_type == 'link' %}<span class="pill tag">Link</span>
        {% elif k.block_type == 'alert' %}<span class="pill tag">{{ k.alert_level|capitalize }} alert</span>
        {% elif k.block_type == 'reminder' %}<span class="pill tag">Reminder</span>
        {% elif k.block_type == 'faculty' %}<span class="pill tag">Faculty Specific KT</span>
        {% else %}<span class="pill tag">Description</span>{% endif %}
        {% if k.f_first and k.block_type not in ('faculty', 'reminder') %}<span class="cell">{{ icon('user') }}{{ k.f_title }} {{ k.f_first }} {{ k.f_last }}</span>{% endif %}
      </div>
    </div>
    {% endfor %}
  </div>
  {% else %}
  <div class="kt-card" style="max-width:520px">
    {{ empty('file-text', 'No KT added yet inside this criteria.') }}
    {% if user.role in ('admin', 'lead') %}
    <div style="text-align:center"><a class="btn small add" href="{{ url_for('kt_new', criteria=criteria.id) }}">{{ icon('plus') }} Add the first KT</a></div>
    {% endif %}
  </div>
  {% endif %}
</div>
{% endblock %}