{% extends "base.html" %}
{% block content %}

<h3>{{ user.name }}</h3>
<hr>
<p></p>
<div class="row">
    <div class="col col-3">
        <strong>registered</strong>
    </div>
    <div class="col col-8">
        <span data-toggle="tooltip"
            data-placement="right"
            title="{{ user.createdAt | fmt_datetime }}">
            {{ user.createdAt | htime_dt }}
        </span>
    </div>
</div>
<p></p>
<!-- NODES -->
<h5>nodes</h5>
<table id="nodes" class="display" style="width:80%">
    <thead>
        <tr>
            <th>&nbsp;</th>
            <th>last connect</th>
            <th>online</th>
        </tr>
    </thead>
    <tbody>
{% for node in userNodeList  %}
        <tr>
            <td>
                <a href="{{ url_for('main.node', nodeId=node.id) }}" class="plain">
                    {{ node.givenName }}
                </a>
            </td>
            <td>
                <span data-toggle="tooltip"
                    data-placement="right"
                    title="{{ node.lastSeen | fmt_datetime }}">
                    {{node.lastSeen | htime_dt }}
                </span>
            </td>
            <td>
                {{node.online | fancyBool | safe}}
            </td>
        </tr>
{% endfor %}
    </tbody>
</table>
<p></p>
<!-- PRE AUTH KEYS -->
<h5>
    pre auth keys
    &nbsp;
    <button class="btn btn-outline-primary btn-sm" data-toggle="modal" data-target="#createPKA">create</button>

</h5>
{% if preauthKeys %}
<table id="paks" class="display" style="width:80%">
    <thead>
        <tr>
            <th>
        <div class="form-check form-check-inline">
            <label class="form-check-label small" for="showExpired">
                show expired&nbsp;
            </label>
            <input type="checkbox" class="form-check-input form-control-sm" id="showExpired">
        </div>
            </th>
            <th>created</th>
            <th>expiration</th>
            <th>attributes</th>
            <!-- <th>&nbsp;</th> -->
        </tr>
    </thead>
    <tbody>
{% for key in preauthKeys %}
        <tr class="pka{% if key.expired %} pka-expired pka-hide{% endif %}">
            <td>
                <span data-toggle="tooltip"
                    data-placement="right"
                    value="{{ key.key}}"
                    title="click to copy full value"
                    class="pak_copy">{{ key.key[:5] }}&hellip;{{ key.key[-5:] }}</span>
            </td>
            <td>
                <span data-toggle="tooltip"
                    data-placement="right"
                    title="{{ key.createdAt | fmt_datetime }}">
                {{key.createdAt | htime_dt }}
            </span>
            </td>
            <td>
                <span data-toggle="tooltip"
                    data-placement="right"
                    title="{{ key.expiration | fmt_datetime }}">
                {{key.expiration | htime_dt }}
                </span>
            </td>
            <td>
                {% if key.ephemeral %}
                <span class="badge badge-pill badge-primary">ephemereal</span>
                {% endif %}
                {% if key.reusable %}
                <span class="badge badge-pill badge-primary">reusable</span>
                {% endif %}
                {% if key.used %}
                <span class="badge badge-pill badge-primary">used</span>
                {% endif %}
            </td>
            <!-- <td>
                <span data-toggle="tooltip" data-placement="right" title="expire">
                    <a class="nodeco" href="/user/{{user.name}}/expire/{{key.key}}">
                        <i class="fas fa-trash"></i>
                    </a>
                </span>
            </td> -->
       </tr>
{% endfor %}
    </tbody>
</table>
{% else %}
<div class="row">
    <div class="col col-9 text-center">
        <h3>No preauth keys</h3>
    </div>
</div>
{% endif %}

<!-- new key modal -->
<div class="modal fade" id="createPKA" tabindex="-1" role="dialog" aria-labelledby="createPKA" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="renameModalLabel">create new pre auth key</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="datetime-local" name="expiration" id="expiration" value="{{ defaultExpiry}}">
                <label class="form-check-label" for="ephemereal">expiration</label>
            </div>
            <p></p>
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="checkbox" name="reusable" id="reusable">
                <label class="form-check-label" for="reusable">reusable</label>
            </div>
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="checkbox" name="ephemereal" id="ephemereal">
                <label class="form-check-label" for="ephemereal">ephemereal</label>
            </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary" onClick="createPKA(user='{{ user.name }}')">Save changes</button>
        </div>
      </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    $(function () {
        $('.pak_copy').on('click', function() {
            copyToClipboard(this)
        })
        $('#showExpired').on('change', function() {
            toggleExpired(this)
        })

        new DataTable('#nodes', {
            scrollY: 130,
            scrollCollapse: true,
            paging: false,
            // lengthMenu: [5, 10, 30, 50, { label: 'All', value: -1 }],
            // pageLength: 10,
            fixedHeader: {
                header: true,
                footer: false
            },
            info: false,
            searching: false,
            select: false,
            keys: false,
        });
        new DataTable('#paks', {
            scrollY: 230,
            scrollCollapse: true,
            paging: false,
            // lengthMenu: [5, 10, 30, 50, { label: 'All', value: -1 }],
            // pageLength: 10,
            fixedHeader: {
                header: true,
                footer: false
            },
            info: false,
            searching: false,
            select: false,
            keys: false,
        });
    })
</script>
{% endblock %}