{% extends "administration/base.html" %}

{% load i18n %}
{% load static %}
{% load utils %}

{% block head %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'css/bootstrap-treeview.min.css'%}">
{% endblock %}

{% block scripts %}
{{ block.super }}
<script src="{% static 'js/bootstrap-treeview.min.js' %}"></script>
<script>
  var cleanupData = function (obj) {
    return {
      text: obj.name,
      href: '?group=' + obj.uuid,
      nodes: obj.children.map(cleanupData),
    };
  }
 $(function() {
   var apiUrl = "{% url 'passbook_admin:group-list' %}?format=json";
   $.ajax({
      url: apiUrl,
    }).done(function(data) {
      $('#treeview1').treeview({
        collapseIcon: "fa fa-angle-down",
        data: data.map(cleanupData),
        expandIcon: "fa fa-angle-right",
        nodeIcon: "fa pficon-users",
        showBorder: true,
        enableLinks: true,
        onNodeSelected: function (event, node) {
          window.location.href = node.href;
        }
      });
    });
  });
</script>
{% endblock %}

{% block title %}
{% title %}
{% endblock %}

{% block content %}
<div class="col-md-3">
  <div id="treeview1" class="treeview">
  </div>
</div>
<div class="col-md-9">
  <h1>{% trans "Invitations" %}</h1>
  <a href="{% url 'passbook_admin:invitation-create' %}" class="btn btn-primary">
    {% trans 'Create...' %}
  </a>
  <hr>
  <table class="table table-striped table-bordered">
    <thead>
      <tr>
        <th>{% trans 'Expiry' %}</th>
        <th>{% trans 'Link' %}</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      {% for invitation in object_list %}
      <tr>
        <td>{{ invitation.expires|default:"Never" }}</td>
        <td>
          <pre>{{ invitation.link }}</pre>
        </td>
        <td>
          <a class="btn btn-default btn-sm" href="{% url 'passbook_admin:invitation-delete' pk=invitation.uuid %}?back={{ request.get_full_path }}">{%
            trans 'Delete' %}</a>
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% endblock %}