{% extends "vault/base.html" %}
{% load i18n %}
{% load static %}

{% block title %}{% trans 'Manage Users and Teams' %}{% endblock %}
{% block content_title %}{% trans 'Manage Users and Teams' %}{% endblock %}

{% block breadcrumb %}{% endblock %}

{% block css %}
  <link rel="stylesheet" type="text/css" href="{% static 'vault/css/user_teams.css' %}" />
{% endblock %}

{% block content %}
  <section class="team-manager">
  {% for group in groups %}
    <div class="team">

      <div class="team-top">
        <span class="team-name">{{ group.name }}</span>
        <a class="btn btn-primary btn-sm btn-add-user"
           href="#add_user_modal" data-bs-target="#add_user_modal" data-bs-toggle="modal"
           data-group-id="{{ group.id }}" data-group-name="{{ group.name }}">
          {% trans 'Add new user to' %} {{ group.name }}
        </a>
      </div>

      <div class="box">
        <table id="container-list" class="items-list table">
          <thead>
            <tr>
              <th>Name</th>
              <th>username</th>
              <th>email</th>
              <th>&nbsp;</th>
            </tr>
          </thead>
          <tbody>
          {% for user in group.users %}
            <tr>
              <td>{{ user.get_full_name }}</td>
              <td>{{ user.username }}</td>
              <td>{{ user.email }}</td>
              <td>
                <a href="#" class="btn btn-danger btn-sm btn-remove-user"
                   data-group-id="{{ group.id }}" data-user-id="{{ user.id }}">
                  <i class="fa fa-times"></i>
                </a>
              </td>
            </tr>
          {% endfor %}
          </tbody>
        </table>

      </div>
    </div>
  {% endfor %}
  </section>

  {% include "vault/team_manager/add_user_modal.html" %}
{% endblock %}

{% block js_bottom %}
{{ block.super }}
<script src="{% static 'vault/js/team_manager.js' %}"></script>
<script>
TeamManager.init({
  'addUrl': '{% url "team_add_user" %}',
  'deleteUrl': '{% url "team_delete_user" %}',
  'outsideUserstUrl': '{% url "outside_users" %}'
});
</script>
{% endblock %}
