{% extends "base.html" %}
{% from "_ui.html" import page_head, empty, college_badge, college_meta, logo_field %}
{% block title %}Add College{% endblock %}
{% block content %}
{{ page_head('cap', 'Add College', 'Create the colleges that KT is attached to.') }}

<div class="card">
  <div class="card-head"><h3>{{ icon('plus') }} New college</h3></div>
  <div class="card-body">
    <form method="post" enctype="multipart/form-data">
      <input type="hidden" name="csrf" value="{{ csrf_token }}">
      <div class="form-grid">
        <div class="field">
          <label for="collegeName" class="req">College Name</label>
          <div class="input-icon">{{ icon('cap') }}<input name="name" id="collegeName" value="{{ f.get('name', '') }}" required autofocus placeholder="e.g. ABC College of Engineering"></div>
        </div>
        <div class="field">
          <label for="collegeUrl" class="req">College URL</label>
          <div class="input-icon">{{ icon('link') }}<input type="url" name="url" id="collegeUrl" value="{{ f.get('url_raw', f.get('url', '')) }}" required placeholder="https://www.college.edu" inputmode="url"></div>
        </div>
        <div class="field">
          <label for="collegeCity" class="req">City</label>
          <div class="input-icon">{{ icon('map-pin') }}<input name="city" id="collegeCity" value="{{ f.get('city', '') }}" required placeholder="e.g. Austin"></div>
        </div>
        <div class="field">
          <label for="collegeState" class="req">State</label>
          <select name="state" id="collegeState" required>
            <option value="">-- Select state --</option>
            {% for st in us_states %}<option value="{{ st }}" {{ 'selected' if f.get('state') == st }}>{{ st }}</option>{% endfor %}
          </select>
        </div>
        <div class="field">
          <label for="collegeTimezone" class="req">Timezone</label>
          <select name="timezone" id="collegeTimezone" required>
            <option value="">-- Select timezone --</option>
            <option value="UTC" {{ 'selected' if f.get('timezone') == 'UTC' }}>UTC</option>
            {% for region, zones in timezone_groups %}
            <optgroup label="{{ region }}">
              {% for value, label in zones %}<option value="{{ value }}" {{ 'selected' if f.get('timezone') == value }}>{{ label }}</option>{% endfor %}
            </optgroup>
            {% endfor %}
          </select>
        </div>
        {{ logo_field() }}
      </div>
      <div class="form-actions">
        <button class="btn">{{ icon('plus') }} Add college</button>
      </div>
    </form>
  </div>
</div>

<div class="card">
  <div class="card-head"><h3>{{ icon('list') }} Existing colleges</h3><span class="count">{{ rows|length }} total</span></div>
  <div class="card-body flush">
    <div class="table-wrap">
      <table class="grid top">
        <thead>
          <tr><th class="num">S.No</th><th>College</th><th style="width:16%">Timezone</th><th style="width:16%">Added By</th><th class="act">Action</th></tr>
        </thead>
        <tbody>
          {% for c in rows %}
          <tr>
            <td class="num">{{ loop.index }}</td>
            <td>
              <div class="cell">{{ college_badge(c) }}<strong>{{ c.name }}</strong></div>
              {{ college_meta(c) }}
            </td>
            <td>{{ c.timezone or '-' }}</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">
              <span class="btn-row">
                <a class="btn small ghost" href="{{ url_for('criteria_new', college=c.id) }}">{{ icon('file-plus') }} Add KT Criteria</a>
                <a class="btn icon edit" href="{{ url_for('college_edit', cid=c.id) }}" title="Edit college" aria-label="Edit college">{{ icon('edit') }}</a>
                <form class="inline" method="post" action="{{ url_for('college_delete', cid=c.id) }}" data-confirm="Delete this college and all its KT?">
                  <input type="hidden" name="csrf" value="{{ csrf_token }}">
                  <button class="btn icon del" title="Delete college" aria-label="Delete college">{{ icon('trash') }}</button>
                </form>
              </span>
            </td>
          </tr>
          {% else %}
          <tr><td colspan="5" class="empty-cell">{{ empty('inbox', 'No colleges yet.') }}</td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>
{% endblock %}