{% extends "admin/base.html" %}
{% import "bootstrap/wtf.html" as wtf %}


{% block page_content %}
<div class="page-header">
    <h1>Manage Dashboard Groups</h1>
</div>
{% for message in get_flashed_messages() %}
  {% if 'successfully' in message %}
      <div class="alert alert-success">
          <button type="button" class="close" data-dismiss="alert">&times;</button>
          {{ message }}
      </div>
  {% endif %}
{% endfor %}
<table id="groups" class="table table-responsive-sm table-bordered table-striped table-sm" style="width:100%">
    <thead>
      <tr>
        <th>
          Group ID
        </th>
        <th>
          Group Name
        </th>
        <th>
          Number of Members
        </th>
        <th>
          Manage Group
        </th>
      </tr>
    </thead>
  </table>
  
    <script src="{{ url_for('static', filename='node_modules/jquery/dist/jquery.min.js') }}"></script>
    <script src="{{ url_for('static', filename='node_modules/datatables.net/js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ url_for('static', filename='node_modules/datatables.net-dt/js/dataTables.dataTables.min.js') }}"></script> 
    <script src="{{ url_for('static', filename='node_modules/datatables.net-bs4/js/dataTables.bootstrap4.min.js') }}"></script> 
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='node_modules/datatables.net-bs4/css/dataTables.bootstrap4.min.css') }}"/>
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='node_modules/datatables.net-buttons-bs4/css/buttons.bootstrap4.min.css') }}"/>

    <script src="{{ url_for('static', filename='js/manage_groups.js') }}"></script>

{% endblock %}
