{% extends "base.html" %}
{% from "_ui.html" import page_head, empty %}
{% block title %}Add Faculty{% endblock %}
{% block content %}
{{ page_head('user-plus', 'Add Faculty', 'Keep a list of faculty members that KT can be assigned to.') }}

<div class="card">
  <div class="card-head"><h3>{{ icon('user-plus') }} New faculty member</h3></div>
  <div class="card-body">
    <form method="post">
      <input type="hidden" name="csrf" value="{{ csrf_token }}">
      <div class="form-grid">
        <div class="field">
          <label for="title" class="req">Choose Title</label>
          <select name="title" id="title" required>
            {% if not f.get('title') %}<option value="">-- Select --</option>{% endif %}
            {% for t in titles %}<option value="{{ t }}" {{ 'selected' if f.get('title') == t }}>{{ t }}</option>{% endfor %}
          </select>
        </div>
        <div class="field">
          <label for="first_name" class="req">First Name</label>
          <div class="input-icon">{{ icon('user') }}<input name="first_name" id="first_name" value="{{ f.get('first_name', '') }}" required placeholder="First name"></div>
        </div>
        <div class="field">
          <label for="last_name" class="req">Last Name</label>
          <div class="input-icon">{{ icon('user') }}<input name="last_name" id="last_name" value="{{ f.get('last_name', '') }}" required placeholder="Last name"></div>
        </div>
        <div class="field">
          <label for="email" class="req">Mail ID</label>
          <div class="input-icon">{{ icon('mail') }}<input name="email" id="email" type="email" value="{{ f.get('email', '') }}" required placeholder="name@domain.com"></div>
        </div>
      </div>
      <div class="form-actions">
        <button class="btn">{{ icon('plus') }} Add Faculty</button>
      </div>
    </form>
  </div>
</div>

<div class="card">
  <div class="card-head"><h3>{{ icon('users') }} Faculty List</h3><span class="count">{{ rows|length }} total</span></div>
  <div class="card-body flush">
    <div class="table-wrap">
      <table class="grid">
        <thead>
          <tr><th class="num">S.No</th><th>Name</th><th>Mail ID</th><th style="width:18%">Added By</th><th class="act">Action</th></tr>
        </thead>
        <tbody>
          {% for r in rows %}
          <tr>
            <td class="num">{{ loop.index }}</td>
            <td><span class="cell">{{ icon('user') }}<strong>{{ r.title }} {{ r.first_name }} {{ r.last_name }}</strong></span></td>
            <td><span class="cell">{{ icon('mail') }}{{ r.email }}</span></td>
            <td>{% if r.added_by %}<span class="cell muted">{{ icon('user') }}{{ r.added_by }}</span>{% else %}<span class="muted">-</span>{% endif %}</td>
            <td class="act">
              <span class="btn-row">
                <a class="btn icon edit" href="{{ url_for('faculty_edit', fid=r.id) }}" title="Edit faculty" aria-label="Edit faculty">{{ icon('edit') }}</a>
                <form class="inline" method="post" action="{{ url_for('faculty_delete', fid=r.id) }}" onsubmit="return confirm('Delete this faculty member?')">
                  <input type="hidden" name="csrf" value="{{ csrf_token }}">
                  <button class="btn icon del" title="Delete faculty" aria-label="Delete faculty">{{ icon('trash') }}</button>
                </form>
              </span>
            </td>
          </tr>
          {% else %}
          <tr><td colspan="5" class="empty-cell">{{ empty('users', 'No faculty added yet.') }}</td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>
{% endblock %}