{% extends "minecraft_manager/base.html" %}
{% load static %}
{% load csrf_html %}
{% load sidebar %}
{% load template_settings %}
{% load coreprotect %}
{% block bootstrap %}
    {% if user.usersettings.default_theme == 'DA' %}
        <link rel="stylesheet" href="{% static "minecraft_manager/css/bootswatch-darkly.css" %}">
    {% elif user.usersettings.default_theme == 'SO' %}
        <link rel="stylesheet" href="{% static "minecraft_manager/css/bootswatch-solar.css" %}">
    {% elif user.usersettings.default_theme == 'SL' %}
        <link rel="stylesheet" href="{% static "minecraft_manager/css/bootswatch-slate.css" %}">
    {% else %}
        <link rel="stylesheet" href="{% static "minecraft_manager/css/bootswatch-flatly.css" %}">
    {% endif %}
{% endblock bootstrap %}
{% block content %}
    <nav class="navbar navbar-inverse">
      <div class="container-fluid">
        <div class="navbar-header">
          {% template_settings 'DASHBOARD_TITLE' as DASHBOARD_TITLE %}
          <a class="navbar-brand" style="color:inherit;cursor:default;">{% if DASHBOARD_TITLE %}{{ DASHBOARD_TITLE }}{% else %}Minecraft Manager{% endif %}</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-right">
            {% coreprotect %}
            <li class="dropdown">
                <a class="dropdown-toggle " href="#" role="button" data-toggle="dropdown" id="accountDropdown">{{ user.username }}</a>
                <ul class="dropdown-menu" role="menu" aria-labelledby="accountDropdown">
                    {% if user.is_staff %}
                        <li><a target="_blank" href="{% url "admin:index" %}">Admin Site</a></li>
                    {% endif %}
                    <li><a style="cursor:pointer;" data-toggle="modal" data-target="#settingsModal">Settings</a></li>
                    <li><a style="cursor:pointer;" data-toggle="modal" data-target="#passwordModal">Change Password</a></li>
                    <li><a href="{% url "logout"  %}">Logout</a></li>
                </ul>
            </li>
          </ul>
          <form method="GET" action="{% url 'player' %}" class="navbar-form navbar-right">
            <span><i class="glyphicon glyphicon-search">&nbsp;</i></span>
            <input type="text" class="form-control" name="search" placeholder="Player Search..." value="{% if 'search' in request.GET %}{{ request.GET.search }}{% endif %}">
            <button class="btn btn-default" type="submit">Search</button>
          </form>
        </div>
      </div>
    </nav>

    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-3 col-md-2 sidebar">
          <ul class="nav nav-sidebar">
            {% autoescape off %}{% get_sidebar current_app|safe request %}{% endautoescape %}
          </ul>
        </div>
        <div class="col-sm-9 col-md-10 main">
          {% block h1 %}{% endblock %}
          <div id="alert" class="popup"></div>
          {% block section %}{% endblock section %}
        </div>
      </div>
    </div>
    <div id="settingsModal" class="modal fade" role="dialog">
        <div class="modal-dialog">

            <!-- Modal content-->
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">User Settings</h4>
              </div>
              <form id="settingsForm" method="POST" action="{% url 'api-web' keyword='settings' %}">{% autoescape off %}{% get_csrf_html request %}{% endautoescape %}
              <div class="modal-body">
                    {% get_form 'usersettings' request %}
              </div>
              <div class="modal-footer">
                  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                  <button type="button" class="btn btn-primary" onclick="saveSettings();">Save</button>
              </div>
              </form>
            </div>

        </div>
    </div>
    <div id="passwordModal" class="modal fade" role="dialog">
        <div class="modal-dialog">

            <!-- Modal content-->
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Change Password</h4>
              </div>
              <form id="passwordForm" method="POST" action="{% url 'api-web' keyword='password' %}">{% autoescape off %}{% get_csrf_html request %}{% endautoescape %}
              <div id="passwordDiv" class="modal-body">
                    {% get_form 'password' request %}
              </div>
              <div class="modal-footer">
                  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                  <button type="button" class="btn btn-primary" onclick="savePassword();">Save</button>
              </div>
              </form>
            </div>

        </div>
    </div>
    <script>

        $('.table.link-table > tbody > tr').click(function() {
            var base_url = $(location).attr('href').split("?")[0];
            var id = $(this).attr('data-id');
            var url = $(this).attr('data-url');
            if (url != null && id != null) {
                if (url.endsWith("/")) {
                    window.location.href = url + id
                } else {
                    window.location.href = url + "/" + id
                }
            } else if (id != null) {
                if (base_url.endsWith("/")) {
                    window.location.href = base_url + id
                } else {
                    window.location.href = base_url + "/" + id
                }
            }

        });

        function showAlert(message, flavor) {
            var $alert = $("#alert");
            $alert.hide();
            $alert.html(message);
            $alert.removeClass();
            $alert.addClass("popup alert alert-" + flavor);
            $alert.fadeIn().delay(1000).fadeOut();
        }

        function saveSettings() {
            var form = $("#settingsForm").serialize();
            form = form.replace("search_player_ip=on", "search_player_ip=True");
            if (!form.includes("search_player_ip")) {
                form += "&search_player_ip=False";
            }
            form = form.replace("show_timestamp_chat=on", "show_timestamp_chat=True");
			if (!form.includes("show_timestamp_chat")) {
                form += "&show_timestamp_chat=False";
            }
            $.ajax({
                type: 'POST',
                url: '{% url 'api-web' keyword='settings' %}',
                data: form,
                success: function() {
                    location.reload()
                }
            });
        }

        function savePassword() {
            var form = $("#passwordForm").serialize();
            $.ajax({
                type: 'POST',
                url: '{% url 'api-web' keyword='password' %}',
                data: form,
                success: function(data) {
                    if (data === "success") {
                        alert("Password Changed!");
                        location.reload();
                    } else {
                        $("#passwordDiv").html(data);
                    }
                }
            });
        }

        $(document).ready(function() {
            $(".paginate_button").each(function() {
                $(this).addClass("btn");
            });

            $("#model-table").on('draw.dt', function() {
                $(".paginate_button").each(function() {
                    $(this).addClass("btn");
                });
            });
        });

    </script>
{% endblock content %}