{% if order.status == 'active' %}
<div class="card mb-4">
    <div class="card-header">
        <h2>{{ order.title }}</h2>
    </div>
    <div class="card-body">
        <h3>{{ 'API Key Details'|trans }}</h3>
        <table class="table table-striped table-bordered table-sm">
            <tbody>
                <tr>
                    <td>{{ 'API Key'|trans }}</td>
                    <td>
                        <strong>{{ service.api_key }}</strong>
                    </td>
                </tr>
            </tbody>
        </table>

        <h4>{{ 'Reset API Key'|trans }}</h4>
        <div class="block">
            <button class="btn btn-primary" type="button" id="license-apikey">{{ 'Reset'|trans }}</button>
        </div>
    </div>
</div>

<script>
    document.querySelector('#license-apikey').addEventListener('click', (event) => {
        event.preventDefault();

        if (confirm("{{ 'Are you sure?'|trans }}")) {
            FOSSBilling.api.client.post('serviceapikey/reset', { order_id: {{ order.id }} },
                (result) => {
                    window.location.reload();
                });
        }
    });
</script>
{% endif %}
