{% 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">
        <h4 class="page-title">
          {{ translate('panelConfig', 'title', data['lang']) }}
          <br />
        </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">


          {% if data['superuser'] %}
          {% include "parts/crafty_config_list.html %}
          {% end %}

          <!-- 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 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>
                  {% if data['user_data']['hints'] %}
                  <span class="too_small" title="{{ translate('dashboard', 'cannotSee', data['lang']) }}" ,
                    data-content="{{ translate('dashboard', 'cannotSeeOnMobile2', data['lang']) }}" ,
                    data-placement="top"></span>
                  {% end %}
                  <!-- 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 %}
                        {% for user in data['managed_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>
                  {% if data['user_data']['hints'] %}
                  <span class="too_small2" title="{{ translate('dashboard', 'cannotSee', data['lang']) }}" ,
                    data-content="{{ translate('dashboard', 'cannotSeeOnMobile2', data['lang']) }}" ,
                    data-placement="top"></span>
                  {% end %}
                  <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 %}

                        {% if not data['superuser'] %}
                        {% for role in data['managed_roles'] %}
                        {% if role.role_id not in data['assigned_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 %}
                        {% end %}
                        {% end %}
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </div>
          </div>
          {% if data['superuser'] and not data["docker"] %}
          <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>
                <br>
                <form id="server-path">
                  <div class="form-group">
                    <label for="global_server_path">{{ translate('panelConfig', 'globalServer',
                      data['lang']) }}<small class="text-muted ml-1"> - {{ translate('panelConfig', 'globalExplain',
                        data['lang']) }}</small></label>
                    <div class="input-group">
                      <input type="text" id="global_server_path" class="form-control" name="global_server_path"
                        placeholder="/var/opt/servers" value="{{data['servers_dir']}}" directory>
                      <div class="input-group-append">
                        <span type="button" class="btn btn-outline-default custom-picker">/servers/</span>
                      </div>
                    </div>
                  </div>
                  <button class="btn btn-success" type="submit">Submit</button>&nbsp;<span id="submit-status"></span>
                  <br>
                  <span id="submit-list"></span>
                </form>
              </div>
            </div>
          </div>
          {% end %}
        </div>
      </div>
    </div>
  </div>


</div>

<style>
  .custom-picker {
    border: 1px solid var(--outline);
  }

  .popover-body {
    color: white !important;
    ;
  }

  .loading:after {
    overflow: hidden;
    display: inline-block;
    vertical-align: bottom;
    -webkit-animation: ellipsis steps(4, end) 900ms infinite;
    animation: ellipsis steps(4, end) 900ms infinite;
    content: "\2026";
    /* ascii code for the ellipsis character */
    width: 0px;
  }

  @keyframes ellipsis {
    to {
      width: 1.25em;
    }
  }

  @-webkit-keyframes ellipsis {
    to {
      width: 1.25em;
    }
  }
</style>
<!-- content-wrapper ends -->

{% end %}

{% block js %}
<script>
  if (webSocket) {
    webSocket.on('move_status', function (message) {
      if (message === "done") {
        $("#submit-list").removeClass("loading");
        $("#submit-list").html("");
        $("#submit-status").html('<i class="fa fa-check"></i>');
      } else {
        $("#submit-status").html('<i class="fa fa-spinner fa-spin"></i>');
        $("#submit-list").html(message);
        $("#submit-list").addClass("loading");
      }
    });
  }

  $("#server-path").submit(function (e) {
    var token = getCookie("_xsrf")
    e.preventDefault();

    $("#submit-status").html('<i class="fa fa-spinner fa-spin"></i>');

    let path = $("#global_server_path").val();
    let encoded = encodeURIComponent(path);
    console.log(path)
    $.ajax({
      type: "POST",
      headers: { 'X-XSRFToken': token },
      dataType: "text",
      url: '/ajax/update_server_dir',
      data: {
        "server_dir": encoded,
      },
    });
  });

  $(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
  });
  $('#file').change(function () {
    console.log("File changed");
    if ($('#file').val()) {
      $('#upload-button').prop("disabled", false);
      console.log("File changed good");
    }
  });
</script>

{% end %}