{% extends "base.html" %}
{% load static %}
{% block body %}

<div class="card bg-light">
  <div class="card-header">VPN</div>
  <div class="card-body">
    <p class="card-text">
    <div class="table-responsive">
      <table class="table">
        <thead>
          <tr>
            <th scope="col">Username</th>
            <th scope="col">Full name</th>
            <th scope="col">Email</th>
            <th scope="col">Status</th>
            <th scope="col">VPN IP</th>
            <th scope="col">Remote IP</th>
            <th scope="col">Groups</th>
            <th scope="col"></th>
            <th scope="col"></th>
          </tr>
        </thead>
        <tbody>
          {% for user in users %}
          <tr>
            <td>{{user.username}}</td>
            <td>{{user.name}}</td>
            <td>{{user.email}}</td>
            <td>{% if user.vpn %}Connected since {{user.vpn.connected}}{% else %}Disconnected{% endif %}</td>
            <td>{% if user.vpn %}{{user.vpn.virtual}}{% endif %}</td>
            <td>{% if user.vpn %}{{user.vpn.ip}}{% endif %}</td>
            <td>
              {{ user.groups|join:", " }}
              &nbsp;
              <a href="{% url "user_groups" user_id=user.id %}" class="btn btn-sm btn-info">Edit</a>
            </td>
            <td>
              {% if user.active %}
              <a href="{% url "user_disable" user_id=user.id %}"  class="btn btn-sm btn-danger">Disable</a>
              {% else %}
              <a href="{% url "user_enable" user_id=user.id %}" class="btn btn-sm btn-success">Enable</a>
              {% endif %}
            </td>
            <td>
              <a href="{% url "user_delete" user_id=user.id %}" onclick="return window.confirm('Are you sure you want to delete {{user.name}}?');" class="btn btn-sm btn-danger"><i class="fas fa-trash"></i></a>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    </p>
  </div>
</div>

{% endblock %}
