{% extends "base.html.twig" %}

{% block head %}
    {{ parent() }}

    <script src="/js/panel.js"></script>
{% endblock %}

{% block content %}
    <div class="container">
        <div class="row">
            <h2 id="certificates">Certificates</h2>
        </div>
        <div class="row">
            <table class="table">
                <thead>
                <tr>
                    <th>Serial</th>
                    <th>Name</th>
                    <th>Expires on</th>
                    <th>
                        <a href="/panel/certificates/new" class="btn btn-default pull-right">Create new certificate</a>
                    </th>
                </tr>
                </thead>
                <tbody>
                {% for certificate in user.getCertificates() if certificate.getRevoked() == 0 %}
                    <tr>
                        <td>
                            {{ certificate.getSerial() }}
                        </td>
                        <td>
                            {{ certificate.getName() }}
                        </td>
                        <td>
                            {{ certificate.getExpiresOn().format('Y-m-d H:i:s') }}
                        </td>
                        <td>
                            <div class="pull-right">
                                <button data-name="{{ certificate.getName() }}" class="revoke btn btn-warning">Revoke
                                </button>
                                <a target="_blank" href="/panel/certificates/download/{{ certificate.getName() }}"
                                   class="download btn btn-default">Download certificate</a>
                            </div>
                        </td>
                    </tr>
                {% else %}
                    <tr>
                        <td colspan="4">
                            You don't seem to have any certificates yet, <a href="/panel/certificates/new">want to
                                create one?</a>
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
        <div class="row">
            <h2>Servers</h2>
        </div>
        <div class="row">
            <table class="table">
                <thead>
                <tr>
                    <th>Hostname</th>
                    <th>Fingerprint</th>
                    <th>Location</th>
                    <th>Speed</th>
                    <th>Actions</th>
                </tr>
                </thead>
                <tbody>
                {% for server in servers %}
                    <tr>
                        <td>
                            {{ server.getFqdn() }}
                        </td>
                        <td>
                            {{ server.getFingerprint() }}
                        </td>
                        <td>
                            {{ server.getLocation() }}
                        </td>
                        <td>
                            {{ server.getSpeed() }} MB/s
                        </td>
                        <td>
                            <div class="pull-right">
                                <div class="btn-group">
                                    <a href="/panel/server/{{ server.getFingerprint() }}/config" class="btn btn-default">Download config</a>
                                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        <span class="caret"></span>
                                        <span class="sr-only">Toggle Dropdown</span>
                                    </button>
                                    <ul class="dropdown-menu">
                                    {% for certificate in user.getCertificates() if certificate.getRevoked() == 0 %}
                                        <li>
                                            <a href="/panel/server/{{ server.getFingerprint() }}/config/{{ certificate.getName() }}">Download config for "{{ certificate.getName() }}"</a>
                                        </li>
                                    {%  else %}
                                        <li>
                                            <a>You dont have any certificates</a>
                                        </li>
                                    {% endfor %}
                                    </ul>
                                </div>
                                {%  if user.isSuperUser() %}
                                    <a href="/panel/server/{{ server.getFingerprint() }}" class="btn btn-default">Edit</a>
                                {% endif %}
                            </div>
                        </td>
                    </tr>
                {% else %}
                    <tr>
                        <td colspan="5">
                            There don't seem to be any servers yet :(
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
        {% if user.getSuperuser() %}
            <div class="row">
                <h2>Registered servers</h2>
            </div>
            <div class="row">
                <table class="table">
                    <thead>
                    <tr>
                        <th>Hostname</th>
                        <th>Fingerprint</th>
                        <th>Actions</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for server in registeredServers %}
                        <tr>
                            <td>
                                {{ server.getFqdn() }}
                            </td>
                            <td>
                                {{ server.getFingerprint() }}
                            </td>
                            <td>
                                <div class="pull-right">
                                    <button data-fingerprint="{{ server.getFingerprint() }}" class="remove btn btn-warning">Remove</button>
                                    <a href="/panel/server/{{ server.getFingerprint() }}" class="btn btn-default">Edit</a>
                                </div>
                            </td>
                        </tr>
                    {% else %}
                        <tr>
                            <td colspan="5">
                                There don't seem to be any servers yet :(
                            </td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
        {% endif %}
    </div>
    <div class="modal fade in revoke-modal" tabindex="-1" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">Are you sure?</h4>
                </div>
                <div class="modal-body">
                    <div id="revoke-put-error-after-me" class="alert alert-danger modal-top-alert">
                        <h4>This may not be what you want!</h4>
                        <p>Revoking the certificate means that you <b>can't use</b> the VPN anymore with that
                            certificate</p>
                    </div>
                    <p>If you're really sure that you want to do this please enter your <b>password</b></p>
                    <div>
                        <input type="password" class="revoke-password form-control">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-warning revoke-confirm">Revoke</button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}