{% extends "secrets/secret_addedit.html" %}
{% load django_bootstrap5 %}
{% load i18n %}
{% block content_type_fields %}
    <div class="row">
        <div class="col-12 col-lg-7" id="ccform">
            {% bootstrap_field form.number placeholder='Credit card number' layout='horizontal' horizontal_label_class="col-lg-3" horizontal_field_class="col-lg-7" %}
            {% bootstrap_field form.holder placeholder='Card holder' layout='horizontal' horizontal_label_class="col-lg-3" horizontal_field_class="col-lg-7" %}

            <div class="row mb-3 required">
                <label class="col-lg-3 col-form-label" for="id_expiration_month">{% trans "Expiration date" %}</label>
                <div class="col-lg-7">
                    <div class="input-group">
                        <input type="text"
                               class="form-control text-center {% if form.expiration_month.errors %}is-invalid{% elif form.expiration_month.form.is_bound %}is-valid{% endif %}"
                               name="expiration_month" id="id_expiration_month" required="required" maxlength="2"
                               size="2" placeholder="{% translate "MM" %}"
                               value="{{ form.expiration_month.value|default_if_none:"" }}">
                        <div class="vr mx-3"></div>
                        <input type="text"
                               class="form-control text-center {% if form.expiration_year.errors %}is-invalid{% elif form.expiration_year.form.is_bound %}is-valid{% endif %}"
                               name="expiration_year" id="id_expiration_year" required="required" maxlength="4" size="4"
                               placeholder="{% translate "YYYY" %}"
                               value="{{ form.expiration_year.value|default_if_none:"" }}">
                    </div>
                </div>
            </div>
            {% bootstrap_field form.security_code placeholder='Security Code' layout='horizontal' horizontal_label_class="col-lg-3" horizontal_field_class="col-lg-7" %}
            {% bootstrap_field form.password placeholder="(optional, for 3D-Secure/SecureCode)" layout="horizontal" horizontal_label_class="col-lg-3" horizontal_field_class="col-lg-7" %}
        </div>
        <div class="col-12 col-lg-4 g-0 align-items-end">
            <div class="row justify-content-center">
                <div class="card-wrapper"></div>
            </div>
            <div class="row justify-content-center mt-3">
                <span class="small text-center fw-light">
                    <i class="fa fa-lock fa-fw"></i> {% translate "All fields in this section will be stored securely." %}
                </span>
            </div>
        </div>
    </div>
{% endblock %}

{% block additionalJS %}
    {{ block.super }}
    <script>
        window.addEventListener('DOMContentLoaded', () => {
            const card = new Card({
                form: '#ccform',
                container: '.card-wrapper',
                formSelectors: {
                    numberInput: 'input#id_number',
                    expiryInput: 'input#id_expiration_month, input#id_expiration_year',
                    cvcInput: 'input#id_security_code',
                    nameInput: 'input#id_holder',
                },
                messages: {
                    validDate: '{% translate "valid\nthru" %}',
                    monthYear: '{% translate "MM" %}/{% translate "YYYY" %}',
                },
                // width: 200,
                placeholders: {
                    number: '•••• •••• •••• ••••',
                    name: '{% translate "Full name" %}',
                    expiry: '••/••••',
                    cvc: '•••'
                },
            })
        })

        /* Automatically split input into seperate blocks */
        ccNumberField = document.getElementById('id_number')
        ccNumberField.addEventListener('input', (e) => {
            const result = ccNumberField.value.match(/\d{1,4}/g) ?? [];
            ccNumberField.value = result.join(' ')
        })
    </script>
{% endblock %}
