{% extends "base_page.html" %}
{% block content %}
<!-- Success message -->
{% if let Some(msg) = success_message %}
<div class="alert alert-success">
    {{ msg }}
</div>
{% endif %}

<!-- Error message -->
{% if let Some(msg) = error_message %}
<div class="alert alert-danger">
    {{ msg }}
</div>
{% endif %}

<!-- User ID -->
<div id="user_id_container"><strong>Current user ID</strong>: {{ user_id.0 }}</div>

<!-- Display clients list -->
<div class="card border-light mb-3">
    <div class="card-header">Registered clients</div>
    <div class="card-body">
        {% if clients.len() > 0 %}
        <table class="table table-hover">
            <thead>
            <tr>
                <th scope="col">ID</th>
                <th scope="col">Description</th>
                <th scope="col">Read only</th>
                <th scope="col">Network</th>
                <th scope="col">Created</th>
                <th scope="col">Used</th>
                <th scope="col"></th>
            </tr>
            </thead>
            <tbody>
            {% for client in clients %}
            <tr>
                <th scope="row">{{ client.id.0 }}</th>
                <td>{{ client.description }}</td>
                <td>
                    {% if client.readonly_client %}
                    <strong>YES</strong>
                    {% else %}
                    <i>NO</i>
                    {% endif %}
                </td>
                <td>
                    {% if let Some(net) = client.network %}
                    {{ net }}
                    {% else %}
                    <i>Unrestricted</i>
                    {% endif %}
                </td>
                <td>{{ client.fmt_created() }}</td>
                <td>{{ client.fmt_used() }}</td>
                <td>
                    <button type="button" class="btn btn-danger btn-sm" onclick="deleteClient('{{ client.id.0 }}');">
                        Delete
                    </button>
                </td>
            </tr>
            {% endfor %}
            </tbody>
        </table>
        {% endif %}

        {% if clients.len() == 0 %}
        <p>No client registered yet!</p>
        {% endif %}
    </div>
</div>

<!-- New client -->
<div class="card border-light mb-3">
    <div class="card-header">New client</div>
    <div class="card-body">
        <form action="/" method="post">
            <div>
                <label for="new_client_desc" class="form-label">Description</label>
                <input type="text" class="form-control" id="new_client_desc" required minlength="3"
                       aria-describedby="new_client_desc" placeholder="New client description..."
                       name="new_client_desc"/>
                <small class="form-text text-muted">Client description helps with identification.</small>
            </div>
            <div>
                <label for="ip_network" class="form-label">Allowed IP network</label>
                <input type="text" class="form-control" id="ip_network" aria-describedby="ip_network"
                       placeholder="Client network (x.x.x.x/x or x:x:x:x:x:x/x" name="ip_network"/>
                <small class="form-text text-muted">Restrict the networks this IP address can be used from.</small>
            </div>

            <br/>

            <div class="form-check">
                <input class="form-check-input" type="checkbox" value="" checked id="readonly_client"
                       name="readonly_client"/>
                <label class="form-check-label" for="readonly_client">
                    Readonly client
                </label>
            </div>

            <br/>


            <input type="submit" class="btn btn-primary" value="Create client"/>
        </form>
    </div>
</div>

<!-- Matrix authentication token -->
<div class="card border-light mb-3">
    <div class="card-header">Matrix authentication token</div>
    <div class="card-body">
        <p>To obtain a new Matrix authentication token:</p>
        <ol>
            <li>Sign in to Element <strong>from a private browser window</strong></li>
            <li>Open <em>All settings</em> and access the <em>Help &amp; About</em> tag</li>
            <li>Expand <em>Access Token</em> and copy the value</li>
            <li>Paste the copied value below</li>
            <li>Close the private browser window <strong>without signing out</strong>!</li>
        </ol>

        <p>You should not need to replace this value unless you explicitly signed out the associated browser
            session.</p>

        <p>Tip: you can rename the session to easily identify it among all your other sessions!</p>

        <form action="/" method="post">
            <div>
                <label for="accessTokenInput" class="form-label mt-4">New Matrix access token</label>
                <input type="text" class="form-control" id="accessTokenInput" aria-describedby="tokenHelp"
                       placeholder="{{ matrix_token }}" required minlength="2" name="new_matrix_token"/>
                <small id="tokenHelp" class="form-text text-muted">Changing this value will reset all active
                    connections
                    to Matrix GW.</small>
            </div>

            <input type="submit" class="btn btn-primary" value="Update"/>
        </form>
    </div>
</div>

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