{% extends "base.html" %}
{% from "_ui.html" import page_head %}
{% block title %}{{ 'Rename KT Criteria' if criteria else 'Add KT Criteria' }}{% endblock %}
{% block content %}
{{ page_head('list', 'Rename KT Criteria' if criteria else 'Add KT Criteria',
             'Update this criteria\'s title.' if criteria else 'Create a topic to add KT (Form, Attachment, Embedded Media, Link, Alert, Description) inside.') }}
<div class="card" style="max-width:640px">
  <div class="card-head"><h3>{{ icon('list') }} KT Criteria details</h3></div>
  <div class="card-body">
    <form method="post">
      <input type="hidden" name="csrf" value="{{ csrf_token }}">
      <div class="field">
        <label class="req">College</label>
        {% if criteria %}
          <div class="cell"><span class="pill" style="font-size:.9rem;padding:5px 14px">{{ icon('cap') }} {{ criteria.college }}</span></div>
        {% elif selected_college %}
          <div class="cell"><span class="pill" style="font-size:.9rem;padding:5px 14px">{{ icon('cap') }} {{ selected_college.name }}</span></div>
        {% elif colleges %}
          <select name="college" required>
            <option value="">-- Select college --</option>
            {% for c in colleges %}<option value="{{ c.id }}" {{ 'selected' if c.id == selected }}>{{ c.name }}</option>{% endfor %}
          </select>
        {% else %}
          <p class="hint">No colleges yet. <a href="{{ url_for('college_new') }}">Add a college</a> first.</p>
        {% endif %}
      </div>
      <div class="field" style="margin-top:16px">
        <label class="req">Title</label>
        <div class="input-icon">{{ icon('type') }}<input name="title" value="{{ title }}" required autofocus placeholder="e.g. Course Setup Requirements"></div>
      </div>
      <div class="form-actions">
        <button class="btn">{{ icon('save') }} Save</button>
        <a class="btn ghost" href="{{ url_for('search') }}">{{ icon('x') }} Cancel</a>
      </div>
    </form>
  </div>
</div>
{% endblock %}