{% extends "base.html" %}

{% block content %}

<div id="entety-menu">
    <div id="list">
        <h1 class="server-content-title">Clients</h1>
        <form id="search-form" class="pure-form">
            <input placeholder="&#128269;" type="text"  id="entety-menu-search" />
        </form>
        <div data-search-box class="srcollable-list-content">
            {% for client, values in CLIENTS.items() %}
            <div
                class="server-item server-item-{% if client == selected_client %}unread{% else %}selected{% endif %} pure-g">
                <div class="" onclick="location.href='/clients?selected_client={{ client }}';">
                    <h5 data-search class="server-name">{{ values["name"] }}</h5>
                    <h4 class="server-info">{{ values["servers"]|length }} server{% if values["servers"]|length >1
                        %}s{%endif%}</h4>
                </div>
            </div>
            {% endfor %}
        </div>

        <div onclick="location.href='/clients?add_client=True';" class="server-item server-add pure-g">
            <div class="pure-u-1">
                +
            </div>
        </div>

    </div>
</div>

{% if add_client %}
<div id="content">
    <div class="">
        <div class="server-content-header pure-g">
            <div class="">
                <h1 class="server-content-title">Add new client</h1>
            </div>
        </div>
        <div class="server-content-body">
            <form action="/add_client" class="pure-form pure-form-stacked" method="POST">
                <fieldset>
                    <div class="pure-g">
                        <div class="pure-u-1 ">
                            <input type="text" class="" name="name" required placeholder="Name" />
                        </div>
                        <div class="pure-u-1 ">
                            <input type="text" class="" name="comment" placeholder="Comment" />
                        </div>
                        <div class="pure-checkbox">
                            {% for server in SERVERS %}
                            <div class="server-checkbox">
                                <input type="checkbox" id="option{{loop.index0}}" name="servers"
                                    value="{{server.info()['local_server_id']}}">
                                <label class="pure-checkbox" for="option{{loop.index0}}">{{server.info()["comment"]}}
                                    <span class="pure-form-message">ID: {{server.info()['local_server_id'][0:8]}}</span>
                                    <span class="pure-form-message">Comment: {{server.info()["name"]}}</span>
                                </label>
                            </div>
                            {% endfor %}

                        </div>

                    </div>
                    <button type="submit" class="pure-button pure-input-1 pure-button-primary">Add</button>
                </fieldset>
            </form>
        </div>
    </div>
</div>
{% endif %}


{% if selected_client and not add_client %}
{% set client = CLIENTS[selected_client] %}

<div id="content">
    <div class="">
        <div class="server-content-header pure-g">
            <div class="">
                <h1 class="server-content-title">{{client['name']}}</h1>
                <h4 class="server-info">{{ client['comment'] }}</h4>
                <h4 class="server-info">id {{ selected_client }}</h4>

            </div>
        </div>
        <div class="server-content-body">
            <form action="/add_client" class="pure-form pure-form-stacked" method="POST">
                <fieldset>
                    <div class="pure-g">
                        <div class="pure-u-1 ">
                            <input type="text" class="pure-u-1" name="name" required value="{{client['name']}}" />
                            <input type="hidden" class="pure-u-1" name="old_name" required value="{{client['name']}}" />
                        </div>
                        <div class="pure-u-1 ">
                            <input type="text" class="pure-u-1" name="comment" value="{{client['comment']}}" />
                        </div>
                        <input type="hidden" class="pure-u-1" name="user_id" value="{{selected_client}}" />

                        <div class="pure-checkbox">

                            <p>Allow access to:</p>

                            {% for server in SERVERS %}
                            <div class="server-checkbox">
                                <input {% if server.info()['local_server_id'] in client['servers'] %}checked{%endif%}
                                    type="checkbox" id="option{{loop.index0}}" name="servers"
                                    value="{{server.info()['local_server_id']}}">
                                <label class="pure-checkbox" for="option{{loop.index0}}">{{server.info()["comment"]}}
                                    <span class="pure-form-message">ID: {{server.info()['local_server_id'][0:8]}}</span>
                                    <span class="pure-form-message">Comment: {{server.info()["name"]}}</span>
                                    <span class="pure-form-message">{% if
                                        server.info()['local_server_id'] in client['servers'] %}Usage: {% for key in
                                        server.data["keys"] %}{% if key.name == client['name'] %}{{ (key.used_bytes if
                                        key.used_bytes else 0) | filesizeformat }}{% endif %}{% endfor
                                        %}{%endif%}</span>
                                </label>
                            </div>
                            {% endfor %}
                        </div>

                    </div>
                    <div class="pure-g pure-form pure-form-stacked">
                        <div class="pure-u-1-2">
                            <button type="submit" class="pure-button pure-button-primary button">Save and apply</button>
                        </div>
                    </div>

                </fieldset>
            </form>
            <form action="/del_client" class="pure-form pure-form-stacked" method="POST">
                <input type="hidden" name="name" required value="{{client['name']}}" />
                <input type="hidden" name="user_id" value="{{selected_client}}" />
                <button type="submit" class="pure-button pure-button-primary delete-button button">Delete
                    Client</button>
                <input type="checkbox" id="agree" name="agree" required>
            </form>

            <div>
                <h3>Invite text</h3>
                <hr>
                <p>Install Outline VPN. Copy and paste the keys below into the Outline client.
                    The same keys can be used simultaneously on multiple devices.</p>
                {% for server in SERVERS -%}
                {% if server.info()['local_server_id'] in client['servers'] %}
                {% set salt = bcrypt.gensalt() %}
                {% set secret_string = server.info()['local_server_id'] + selected_client %}
                {% set hash_secret = bcrypt.hashpw(
                password=secret_string.encode('utf-8'),
                salt=salt).decode('utf-8') %}

                <p><b>Server location:</b> {{server.info()['name']}}</p>
                <p><b>Client link:</b> {% for key in server.data["keys"] %}{% if key.key_id == client['name']
                    %}ssconf://{{ dynamic_hostname
                    }}/dynamic/{{server.info()['local_server_id'][0:SECRET_LINK_LENGTH]}}{{selected_client[0:SECRET_LINK_LENGTH]}}{{hash_secret[SECRET_LINK_PREFIX|length:]}}#{{server.info()['comment']}}{%
                    endif %}{% endfor %}</p>
                {% endif %}
                {%- endfor -%}
            </div>

        </div>
    </div>
</div>
{% endif %}

{% endblock %}