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

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

<script src="/js/clipboard.min.js"></script>
<script src="/js/pages/invites.js"></script>
{% endblock %}

{% block panel_contents %}
    {% if user.getActiveCertificates()|length < user.getMaxKeys() %}
        <form class="invite-create" action="/panel/invites/create" method="post">
            <button type="submit">create</button>
        </form>
    {% endif %}

    <div class="title">
        <h1>Invites</h1>
        <div class="undertone">You used {{ used_invites }} from your {{ max_invites == -1 ? 'infinite' : max_invites }} invites</div>
    </div>

    <ul class="invites">
        {% for invite in invites %}
        <li>
            <div class="text">
                <kbd>{{ invite.getInvite() }}</kbd>
            </div>
            <div class="actions">
                <span>
                    <a class="copy" data-clipboard-text="{{ invite.getInvite() }}">copy</a>
                </span>
            </div>
        </li>
        {% else %}
        <li>
            You don't have any invites
        </li>
        {% endfor %}
    </ul>
{% endblock %}