{% load i18n static %}
<form id="test_email_form">{% csrf_token %}
    <div class="mb-3">
        <label class="form-label required" for="test_receiver">{% translate 'Recipient email' %}</label>
        <input type="email" class="form-control" name="test_receiver" id="test_receiver" required>
        <small class="form-hint">{% translate 'The email address used to receive test messages.' %}</small>
    </div>
    <div class="mb-3">
        <label class="form-label" for="test_subject">{% translate 'Subject' %}</label>
        <input type="text" class="form-control" name="test_subject" id="test_subject">
        <small class="form-hint">{% translate 'Subject of email.' %}</small>
    </div>
    <div class="mb-3">
        <label class="form-label" for="test_content">{% translate 'Content' %}</label>
        <textarea class="form-control" name="test_content" id="test_content" rows="5"></textarea>
        <small class="form-hint">{% translate 'Applicable to plain email testing only.' %}</small>
    </div>
    <div class="mb-3">
        <label class="form-label" for="test_variables">{% translate 'Variables' %}</label>
        <textarea class="form-control" name="test_variables" id="test_variables" rows="3"></textarea>
        <small class="form-hint">
            {% translate 'Define template variables in JSON format.' %} e.g. {"username": "Tom", "code": "123456"}.
        </small>
    </div>
    <div class="d-flex justify-content-between">
        <button class="btn btn-primary" name="action" value="test">
            <div class="spinner-border text-light icon d-none" role="status">
                <span class="visually-hidden">{% translate 'Sending' %}...</span>
            </div>
            {% translate 'Test Email' %}
        </button>
        <button class="btn btn-success" name="action" value="test_template">
            <div class="spinner-border text-light icon d-none" role="status">
                <span class="visually-hidden">{% translate 'Sending' %}...</span>
            </div>
            {% translate 'Test Template' %}
        </button>
    </div>
</form>

<script>
    document.addEventListener("DOMContentLoaded", function () {
        const form = document.getElementById('test_email_form');
        if (!form) return;

        const buttons = form.querySelectorAll('button[name="action"]');

        buttons.forEach(button => {
            button.addEventListener('click', function (event) {
                event.preventDefault();

                const formData = new FormData(form);
                formData.append('action', this.value); // overwrite action with current button
                ajaxRequest({
                    url:  "{% url 'admin:padmin:test_email' %}",
                    data: formData
                }, this);
            });
        });
    });
</script>