{% include 'header.html' %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/lib/bootstrap/bootstrap.min.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/stats.css') }}">
{% include 'wrapper.html' %}
<div style="margin-right: 20px;" class="row">
    <div class="col-md-3">
        <div class="card">
            <div class="card-left"><span class="number">{{ servers_len }}</span></div>
            <div class="card-right"><span class="name">Servers</span></div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card">
            <div class="card-left"><span class="number">{{ users_len }}</span></div>
            <div class="card-right"><span class="name">Users</span></div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card">
            <div class="card-left"><span class="number">{{ netdevices_len }}</span></div>
            <div class="card-right"><span class="name">NetDevices</span></div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card">
            <div class="card-left"><span class="number">{{ vulns_len }}</span></div>
            <div class="card-right"><span class="name">Vulnerabilities</span></div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-sm-6 col-md-4">
        <div class="panel">
            <div class="panel-heading"></div>
            <div class="panel-body">
            </div>
        </div>
    </div>
    <div class="col-sm-6 col-md-4">
        <div class="panel" style="padding-left: 20%;">
            <div style="overflow:scroll;max-height: 580px;">
                <h2 class="card-title" style="margin-top: 20px; margin-bottom: 30px;">Achievements</h2>
                <div class="card-content" style="padding: 10px;">
                    <div class="todo-list">
                        <div class="tdl-holder">
                            <div class="tdl-content">
                                <form action="{{ url_for('edit_achievement') }}" method="POST" id="achievement-update-form">
                                    <input type="hidden" name="check" id="checkbox-id-input">
                                </form>
                                <ul style="list-style-type: none;">                                
                                    {% for i in range(achievements_len) %}
                                    <li class="achievements-list">
                                    </li>
                                    {% endfor %}
                                </ul>
                            </div>
                            <form action="{{ url_for('create_achievement') }}" method="POST" id="achievement-form">
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{% include 'wrapper_end.html' %}
    <script>
        function parseJwt () {
            var token = (document.cookie).split('=')[1];
            var base64Url = token.split('.')[1];
            var base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
            var jsonPayload = decodeURIComponent(atob(base64).split('').map(function(c) {
                return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
            }).join(''));

            document.getElementById('user_span').innerHTML = "@" + JSON.parse(jsonPayload).user;
            return 1;
        // return JSON.parse(jsonPayload);
    };
    </script>
    <script src="{{ url_for('static', filename='js/stats.js') }}"></script>
{% include 'footer.html' %}