{% extends ../base.html %}

{% block meta %}
{% end %}

{% block title %}Crafty Controller - {{ translate('panelConfig', 'pageTitle', data['lang']) }}{% end %}

{% block content %}

<div class="content-wrapper">

    <!-- Page Title Header Starts-->
  <div class="row page-title-header">
    <div class="col-12">
      <div class="page-header">
          <!-- TODO: Translate the following -->
        <h4 class="page-title">{{ translate('panelConfig', 'pageTitle', data['lang']) }}</h4>
      </div>
    </div>

  </div>
  <!-- Page Title Header Ends-->

  <div class="row">
    <div class="col-md-12 grid-margin">
      <div class="card">
        <div class="card-body">

          <div class="row">
            <div class="col-md-12 col-lg-12 grid-margin stretch-card">
              <div class="card">
                <div class="card-header header-sm d-flex justify-content-between align-items-center">
                      <h4 class="card-title"><i class="fas fa-users"></i> {{ translate('panelConfig', 'users', data['lang']) }}</h4>
                      <span class="too_small" title="{{ translate('dashboard', 'cannotSee', data['lang']) }}", data-content="{{ translate('dashboard', 'cannotSeeOnMobile2', data['lang']) }}", data-placement="top"></span>

                  <!-- TODO: Translate the following -->
                  <div><a class="nav-link" href="/panel/add_user"><i class="fas fa-plus-circle"></i> &nbsp; {{ translate('panelConfig', 'newUser', data['lang']) }}</a></div>
                </div>
                <div class="card-body">
                  <div class="table-responsive">
                    <table class="table table-hover">
                      <thead>
                        <!-- TODO: Translate the following -->
                        <tr class="rounded">
                          <th>{{ translate('panelConfig', 'user', data['lang']) }}</th>
                          <th>{{ translate('panelConfig', 'enabled', data['lang']) }}</th>
                          <th>{{ translate('panelConfig', 'allowedServers', data['lang']) }}</th>
                          <th>{{ translate('panelConfig', 'assignedRoles', data['lang']) }}</th>
                          <th>{{ translate('panelConfig', 'edit', data['lang']) }}</th>
                        </tr>
                      </thead>
                      <tbody>
                      {% for user in data['users'] %}
                        <tr>
                          <td><i class="fas fa-user"></i> {{ user.username }}</td>
                          <td>
                            {% if user.enabled %}
                              <span class="text-success">
                                <i class="fas fa-check-square"></i> Yes
                              </span>
                            {% else %}
                              <span class="text-danger">
                                <i class="far fa-times-square"></i> No
                              </span>

                            {% end %}
                          </td>
                          <td id="server_list_{{user.user_id}}">
                              <ul id="{{user.user_id}}">
                              {% for item in data['auth-servers'][user.user_id] %}
                                <li>{{item}}</li>
                              {% end %}
                            </ul>
                          </td>
                          <td id="role_list_{{user.user_id}}">
                            <ul>
                            {% for item in data['user-roles'][user.user_id] %}
                              <li data-toggle="tooltip" title="{{ item }}">{{item}}</li>
                            {% end %}
                            </ul>
                          </td>
                          <td><a href="/panel/edit_user?id={{user.user_id}}"><i class="fas fa-pencil-alt"></i></a></td>
                        </tr>
                      {% end %}
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-md-12 col-lg-12 grid-margin stretch-card">
              <div class="card">
                <div class="card-header header-sm d-flex justify-content-between align-items-center">
                  <h4 class="card-title"><i class="fas fa-user-tag"></i> {{ translate('panelConfig', 'roles', data['lang']) }}</h4>
                    <span class="too_small2" title="{{ translate('dashboard', 'cannotSee', data['lang']) }}", data-content="{{ translate('dashboard', 'cannotSeeOnMobile2', data['lang']) }}", data-placement="top"></span>
                  <div><a class="nav-link" href="/panel/add_role"><i class="fas fa-plus-circle"></i> &nbsp; {{ translate('panelConfig', 'newRole', data['lang']) }}</a></div>
                </div>
                <div class="card-body">
                  <div class="table-responsive">
                    <table class="table table-hover">
                      <thead>
                        <!-- TODO: Translate the following -->
                        <tr class="rounded">
                          <th>{{ translate('panelConfig', 'role', data['lang']) }}</th>
                          <th>{{ translate('panelConfig', 'allowedServers', data['lang']) }}</th>
                          <th>{{ translate('panelConfig', 'roleUsers', data['lang']) }}</th>
                          <th>{{ translate('panelConfig', 'edit', data['lang']) }}</th>
                        </tr>
                      </thead>
                      <tbody>
                      {% for role in data['roles'] %}
                        <tr>
                          <td>{{ role.role_name }}</td>
                          <td id="role_list_{{role.role_id}}">
                            <ul id="{{role.role_id}}">
                              {% for item in data['role-servers'][role.role_id] %}
                              <li>{{item}}</li>
                              {% end %}
                            </ul>
                          </td>
                          <td><ul>
                            {% for user in data['users'] %}
                              {% for ruser in data['user-roles'][user.user_id] %}
                                {% if ruser == role.role_name %}
                                <li>{{ user.username }}</li>
                            {% end %}
                            {% end %}
                          {% end %}
                          </ul>
                          </td>
                          <td><a href="/panel/edit_role?id={{role.role_id}}"><i class="fas fa-pencil-alt"></i></a></td>
                        </tr>
                      {% end %}

                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </div>
          </div>
          {% if data['superuser'] %}
          <div class="row">
            <div class="col-md-12 col-lg-12 grid-margin stretch-card">
              <div class="card">
                <div class="card-header header-sm d-flex justify-content-between align-items-center">
                  <h4 class="card-title"><i class="fas fa-user-tag"></i> {{ translate('panelConfig', 'adminControls', data['lang']) }}</h4>
                </div>
                <div class="card-body">
                  <button type="button" class="btn btn-outline-danger clear-comm">{{ translate('panelConfig', 'clearComms', data['lang']) }}</button>

                </div>
              </div>
            </div>
          </div>
          {% end %}
        </div>
      </div>
    </div>
  </div>


</div>

<style>
  .popover-body{
    color: white !important;;
}
</style>
<!-- content-wrapper ends -->

{% end %}

{% block js %}
<script>
$(document).ready(function(){
  $('[data-toggle="popover"]').popover();
    if($(window).width() < 1000){
    $('.too_small').popover("show");
    $('.too_small2').popover("show");
  }

});
 $(window).ready(function(){
        $('body').click(function(){
            $('.too_small').popover("hide");
            $('.too_small2').popover("hide");
    });
});
$(window).resize(function() {
  // This will execute whenever the window is resized
  if($(window).width() < 1000){
    $('.too_small').popover("show");
  }
  else{
    $('.too_small').popover("hide");
  } // New width
    if($(window).width() < 1000){
    $('.too_small2').popover("show");
  }
  else{
    $('.too_small2').popover("hide");
  } // New width
});
</script>
<script>

$( document ).ready(function() {
  console.log('ready for JS!')

});

  $( ".show_button" ).click(function() {
    console.log("showing key");
   api_key = $(this).attr("data-id");
    bootbox.alert({
      backdrop: true,
      title: '',
      message: api_key,
    });
  });

  $('.clear-comm').click(function () {
    var token = getCookie("_xsrf")
    $.ajax({
        type: "POST",
        headers: {'X-XSRFToken': token},
        url: '/ajax/clear_comm',
        success: function (data) {
        },
    });
})
</script>

{% end %}