{% load envipytags %}
<div class="modal fade"
     tabindex="-1"
     id="manage_api_token_modal"
     role="dialog"
     aria-labelledby="manage_api_token_modal"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button"
                        class="close"
                        data-dismiss="modal">
                    <span aria-hidden="true">&times;</span>
                    <span class="sr-only">Close</span>
                </button>
                <h3 class="modal-title">Manage API Token</h3>
            </div>
            <div class="modal-body">
                <p>Requesting a Token will invalidate all potential existing tokens. The new token will only be shown once, so ensure to store it in secure place</p>
                <form id="request_api_token_form"
                      accept-charset="UTF-8"
                      action=""
                      data-remote="true"
                      method="post">
                    {% csrf_token %}
                    <p>
                        <label for="token-name">Name</label>
                        <input type="text" id="token-name" class="form-control" name="name" placeholder="Generic Token for {{ meta.user.username }}"/>
                        <label for="valid-for">Valid for (in days)</label>
                        <input type="number" id="valid-for" class="form-control" name="valid-for" value="90"/>
                        <input type="hidden" name="hidden" value="request-api-token">
                    </p>
                </form>
                <div id="new-token">
                    <pre id="new-token-pre"></pre>
                </div>
                <div id="existing-tokens">
                    {% for t in tokens %}
                    <form id="delete-token-{{ forloop.counter0 }}" accept-charset="UTF-8" action="{{ meta.user.url }}" data-remote="true" method="post">
                        {% csrf_token %}
                        <div class="input-group">
                            <input type="hidden" name="hidden" value="delete">
                            <input type="hidden" name="token-id" value="{{ t.pk }}">
                            <input type="text" class="form-control" value="{{ t.name|safe }}" disabled>
                            <span class="input-group-btn">
                                <button type="submit" class="btn btn-danger">Delete</button>
                            </span>
                        </div>
                    </form>
                    {% endfor %}
                </div>
            </div>
            <div class="modal-footer">
                <a id="manage_api_token_form_submit"
                   class="btn btn-primary"
                   href="#">Submit</a>
                <button type="button"
                        class="btn btn-default"
                        data-dismiss="modal">Cancel
                </button>
            </div>
        </div>
    </div>
</div>
<script>
$(function() {
    $('#new-token').hide()

    $('#manage_api_token_form_submit').on('click', function (e) {
        e.preventDefault();

        const formData = $('#request_api_token_form').serialize();
        $.post('', formData, function(response) {
            $('#new-token-pre').text(response.raw_token);
            $('#new-token').show();
        });
    });

    // Select all elements that start with 'delete-token-'
    $("[id^='delete-token-']").on("submit", function(e) {
        e.preventDefault();
        const formData = $(this).serialize();
        const form = $(this);
        $.post(this.action, formData, function(response) {
            console.log(this);
            form.remove();
        });
    });

});
</script>