{% extends "adminlte/base.html" %}
{% import "adminlte/layout.html" as layout with context %}
{% import "adminlte/widgets.html" as widgets with context %}

{% block title %}Admin - {{ title }}{% endblock %}
{% block description %}{{ block_description }}{% endblock %}

{% block navbar %}

  {% include "navbar.html" %}

{%- endblock navbar %}


{% block sidebar -%}

  {% include 'sidebar.html' %}

  {% include 'admin/sidebar_menu.html' %}

{%- endblock sidebar %}


{% block content_header -%}
  {% include 'admin/content_header.html' %}
{%- endblock content_header %}

{% block content -%}
    <!-- Main content --> 
      <div class="row">
        <div class="col-xs-12">
          <div class="box">
            <!-- /.box-header -->
            <div class="box-body">
              <table id="example2" class="table table-bordered table-hover">
                <thead>
                <tr>
                  <th>User ID</th>
                  <th>Username</th>
                  <th>Email</th>
                  <th>Created At</th>
                  <th>Role</th>
                  <th>Action</th>
                </tr>
                </thead>
                <tbody>
                {% for user in users %}
                <tr>
                  <td>{{ user.id }}</td>
                  <td>{{ user.username }}</td>
                  <td>{{ user.email }}</td>
                  <td>{{ user.created_at }}</td>
                  <td>{{ user.role.name }}</td>
                  <td>
                    <a href="{{ url_for('admin.edit_user_admin', id=user.id) }}">Edit</a>
                     | 
                    <a href="{{ url_for('admin.delete_user_admin', id=user.id) }}">Delete</a>
                  </td>
                </tr>
                {% endfor %}
                </tbody>
                <tfoot>
                <tr>
                  <th>User ID</th>
                  <th>Username</th>
                  <th>Email</th>
                  <th>Created At</th>
                  <th>Role</th>
                  <th>Action</th>
                </tr>
                </tfoot>
              </table>
            </div>
            <!-- /.box-body -->
          </div>
          <!-- /.box -->
        </div>
        <!-- /.col -->
      </div>
      <!-- /.row -->

{%- endblock content %}