{% extends "layout.html" %}

{% block title %}
  {{ super() }} - Users
{% endblock %}

{% block css %}
  {{ super() }}
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0-beta3/css/bootstrap-select.min.css" integrity="sha512-g2SduJKxa4Lbn3GW+Q7rNz+pKP9AWMR++Ta8fgwsZRCUsawjPvF/BxSMkGS61VsR9yinGoEgrHPGPn2mrj8+4w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
{% endblock %}

{% block top_nav %}
  {{ super() }}
  <li class="nav-item">
    <a class="nav-link" href="{{ url_for('cases.index') }}">Institutes</a>
  </li>
  <li class="nav-item active d-flex align-items-center">
    <span class="navbar-text">Users</span>
  </li>
{% endblock %}

{% block content_main %}
<div class="container-float">
  <div class="card panel-default">
    <div class="card-body">

      {% if current_user.is_admin %}
        <div class="mb-2">
          <button class="btn btn-primary btn-sm" type="button"
                  data-bs-toggle="collapse"
                  data-bs-target="#newUserForm"
                  aria-expanded="false"
                  aria-controls="newUserForm">
            + {% if edit_user%}Edit{% else %}New{% endif %} User
          </button>
        </div>

        <div class="collapse {% if edit_user %}show{% endif %}" id="newUserForm">
          <div class="card card-body p-2">
            {% if edit_user %}
              {{ new_user_form(form, url_for('login.edit_user', email=edit_user.email), "Update User") }}
            {% else %}
              {{ new_user_form(form, url_for('login.add_user'), "Create User") }}
            {% endif %}
          </div>
        </div>
      {% endif %}

      <table class="table table-bordered table-hover mt-3">
        <thead class="table-light thead">
          <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Institutes</th>
            <th>Rank</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          {% for user in users %}
            <tr>
              <td>
                {{ user.name }}
                {% if 'admin' in user.roles %}
                  <span class="badge bg-info float-end">ADMIN</span>
                {% endif %}
              </td>
              <td>
                <a href="mailto:{{ user.email }}">{{ user.email }}</a>
              </td>
              <td>
                {% for institute in user.institutes %}
                  {{ institute.display_name }} <small>({{ institute._id }})</small><br>
                {% endfor %}
              </td>
              <td>
                <div class="float-start">
                  <strong>{{ user.events_rank|capitalize }}</strong><br>
                  <span class="text-muted">{{ user.events }} events</span>
                </div>
                <img class="rank-shield float-end" src="{{ url_for('login.static', filename=(user.events_rank + '.svg')) }}" alt="{{ user.events_rank }}">
              </td>
              <td>
                {% if current_user.is_admin %}
                <div class="float-end">
                  <a href="{{ url_for('login.edit_user', email=user.email) }}"
                     data-bs-toggle="tooltip"
                     title="Edit user"
                     class="btn btn-warning fa fa-pencil text-white ms-1">
                  </a>
                  <a href="{{ url_for('login.remove_user', email=user.email) }}"
                     data-bs-toggle="tooltip"
                     title="Delete user from database and case assignees"
                     class="btn btn-danger fa fa-trash text-white"
                     onclick="return confirm('Are you sure you want to delete user {{user._id}}?');">
                  </a>
                </div>
                {% endif %}
              </td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>
{% endblock %}

{% macro new_user_form(form, action_url, submit_label) %}
<form method="post" class="row g-2" action="{{action_url}}">
  {{ form.hidden_tag() }}

  <div class="row">
    <!-- Institute -->
    <div class="col-12">
      {{ form.institute.label(class="form-label mb-1") }}
      <select class="selectpicker w-75" name="{{ form.institute.name }}" data-style="btn-secondary" multiple required>
      {% for option in form.institute.choices %}
        <option value="{{ option[0] }}"
          {% if edit_user and option[0] in edit_user.institutes %}selected{% endif %}>
          {{ option[1] }}
        </option>
      {% endfor %}
      {% for error in form.institute.errors %}
        <div class="text-danger small">{{ error }}</div>
      {% endfor %}
      </select>
    </div>

  </div>

  <div class="row">
    <!-- Full Name -->
    <div class="col-sm-6">
      {{ form.name.label(class="form-label mb-1") }}
      {{ form.name(class="form-control form-control-sm", placeholder="John Smith", required=True, value=edit_user.name if edit_user else "") }}
      {% for error in form.name.errors %}
        <div class="text-danger small">{{ error }}</div>
      {% endfor %}
    </div>

    <!-- Email -->
    <div class="col-sm-6">
      {{ form.email.label(class="form-label mb-1") }}
      {{ form.email(
      class="form-control form-control-sm",
      placeholder="name@example.com",
      required=True,
      type="email",
      value=edit_user.email if edit_user else "",
      **({'disabled': True} if edit_user else {})
      ) }}
      {% for error in form.email.errors %}
        <div class="text-danger small">{{ error }}</div>
      {% endfor %}
    </div>
  </div>

  <div class="row">
    <!-- LDAP ID -->
    <div class="col-sm-6">
      {{ form.user_id.label(class="form-label mb-1") }}
      {{ form.user_id(
        class="form-control form-control-sm",
        placeholder="Optional",
        value=edit_user._id if edit_user else "",
        **({'disabled': True} if edit_user else {})
        ) }}
      {% for error in form.user_id.errors %}
        <div class="text-danger small">{{ error }}</div>
      {% endfor %}
    </div>

    <!-- Role -->
    <div class="col-sm-6">
      {{ form.role.label(class="form-label mb-1") }}
      <select class="selectpicker w-100" name="{{ form.role.name }}" data-style="btn-secondary" multiple>
        {% for option in form.role.choices %}
          <option value="{{ option }}"
            {% if edit_user and option in edit_user.roles %}selected{% endif %}>
            {{ option }}
          </option>
        {% endfor %}
      </select>
      {% for error in form.role.errors %}
        <div class="text-danger small">{{ error }}</div>
      {% endfor %}
    </div>
  </div>

  <div class="row">
    <!-- Submit -->
    <div class="col-12 text-center mt-2">
      <button type="submit" class="btn btn-primary btn-sm">{{submit_label}}</button>
    </div>
  </div>
</form>
{% endmacro %}

{% block scripts %}
  {{ super() }}
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0-beta3/js/bootstrap-select.min.js" integrity="sha512-yrOmjPdp8qH8hgLfWpSFhC/+R9Cj9USL8uJxYIveJZGAiedxyIxwNw4RsLDlcjNlIRR4kkHaDHSmNHAkxFTmgg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

  <script>
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
      return new bootstrap.Tooltip(tooltipTriggerEl)
    });
  </script>
{% endblock %}