{% extends "page.html" %}

{% block main %}

<div class="container">
  <table class="table table-striped">
    <thead>
      <tr>
        <th colspan="4">Users</th>
      </tr>
    </thead>
    <tbody>
  {% for u in users %}
    <tr class="user-row" data-user="{{u.name}}" data-admin="{{u.admin}}">
      <td class="name-col col-sm-4">{{u.name}}</td>
      <td class="admin-col col-sm-4">{% if u.admin %}admin{% endif %}</td>
      <td class="server-col col-sm-2 text-center">
      {% if u.server %}
        <span class="stop-server btn btn-xs btn-danger">stop server</span>
      {% else %}
        <span class="start-server btn btn-xs btn-success">start server</span>
      {% endif %}
      </td>
      <td class="edit-col col-sm-2">
        <span class="edit-user btn btn-xs btn-primary">edit</span>
        {% if u.name != user.name %}
        <span class="delete-user btn btn-xs btn-danger">delete</span>
        {% endif %}
      </td>
    </tr>
  {% endfor %}
    <tr class="user-row add-user-row">
      <td colspan="4">
        <a id="add-user" class="col-xs-12 btn btn-primary">Add User</a>
      </td>
    </tr>
  </tbody>
  </table>
</div>

{% call modal('Delete User', btn_class='btn-danger delete-button') %}
  Are you sure you want to delete user <span class="delete-username">USER</span>?
  This operation cannot be undone.
{% endcall %}

{% macro user_modal(name) %}
{% call modal(name, btn_class='btn-primary save-button') %}
<div class="form-group">
  <input type="text" class="form-control username-input" placeholder="username">
</div>
<div class="checkbox">
  <label>
    <input type="checkbox" class="admin-checkbox">Admin
  </label>
</div>
{% endcall %}
{% endmacro %}

{{ user_modal('Edit User') }}

{{ user_modal('Add User') }}

{% endblock %}

{% block script %}
<script type="text/javascript">
require(["admin"]);
</script>
{% endblock %}