<div class="card-body">
    <form method="post" action="{{ 'product/update_config'|api_url }}" {{ fb_api_form({message: 'API Key Settings Updated'|trans}) }}>
        <div class="mb-5">
            <div class="mb-3">
                <h3 class="card-title mb-1">{{ 'API Key Settings'|trans }}</h3>
                <p class="text-secondary mb-0">{{ 'Control how API keys are generated for this product, including length, formatting, and any custom parameters your application expects.'|trans }}</p>
            </div>
            <div class="row g-3">
                <div class="col-lg-4">
                    <label class="form-label">{{ 'Length'|trans }}</label>
                    <input type="number" class="form-control" name="config[length]" value="{{ product.config.length|default(32) }}">
                    <div class="form-text">{{ 'We recommend no less than 16 characters. When in doubt, leave this at 32.'|trans }}</div>
                </div>
            </div>
        </div>

        <hr class="my-4" />

        <div class="mb-5">
            <div class="mb-3">
                <h3 class="card-title mb-1">{{ 'Formatting'|trans }}</h3>
                <p class="text-secondary mb-0">{{ 'Choose whether generated keys are split with dashes and how each segment should be cased.'|trans }}</p>
            </div>
            <div class="row g-3">
                <div class="col-lg-4">
                    <label class="form-label">{{ 'Split API Key with Dashes'|trans }}</label>
                    <div class="d-flex flex-wrap gap-3 pt-1">
                        <label class="form-check">
                            <input class="form-check-input" type="radio" name="config[split]" id="split_yes" value="1"{% if product.config.split is not defined or product.config.split == 1 %} checked{% endif %}>
                            <span class="form-check-label">{{ 'Yes'|trans }}</span>
                        </label>
                        <label class="form-check">
                            <input class="form-check-input" type="radio" name="config[split]" id="split_no" value="0"{% if product.config.split is defined and product.config.split == 0 %} checked{% endif %}>
                            <span class="form-check-label">{{ 'No'|trans }}</span>
                        </label>
                    </div>
                    <div class="form-text">{{ 'Dashes do not count toward the API key length, but generated keys must include them to remain valid.'|trans }}</div>
                </div>
                <div class="col-lg-4">
                    <label class="form-label">{{ 'Split Interval'|trans }}</label>
                    <input type="number" class="form-control" name="config[split_interval]" value="{{ product.config.split_interval|default(8) }}">
                </div>
                <div class="col-lg-4">
                    <label class="form-label">{{ 'API Key Capitalization'|trans }}</label>
                    <select class="form-select" aria-label="{{ 'API Key Capitalization Options'|trans }}" name="config[case]">
                        <option{% if product.config.case is not defined or product.config.case == 'upper' %} selected{% endif %} value="upper">{{ 'Uppercase'|trans }}</option>
                        <option{% if product.config.case == 'lower' %} selected{% endif %} value="lower">{{ 'Lowercase'|trans }}</option>
                        <option{% if product.config.case == 'mixed' %} selected{% endif %} value="mixed">{{ 'Mixed'|trans }}</option>
                    </select>
                    <div class="form-text">{{ 'Choose whether generated API keys use uppercase letters, lowercase letters, or a mix of both.'|trans }}</div>
                </div>
            </div>
        </div>

        <hr class="my-4" />

        <div class="mb-4">
            <div class="mb-3">
                <h3 class="card-title mb-1">{{ 'Custom Parameters'|trans }}</h3>
                <p class="text-secondary mb-1">{{ 'Add custom key/value pairs that your application can request through the FOSSBilling API, for example to set limits or feature flags for each API key.'|trans }}</p>
                <p class="text-secondary mb-0">{{ 'FOSSBilling removes the "custom_" prefix when returning these values through the API. For example, "custom_monthlyLimit" becomes "monthlyLimit".'|trans }}</p>
            </div>

            <div class="d-flex justify-content-start mb-3">
                <button class="btn btn-outline-primary" type="button" onclick="addNewField()">{{ 'Add New Field'|trans }}</button>
            </div>

            <div class="row g-3" id="customParameters">
                {% for key, value in product.config %}
                    {% if key starts with 'custom_' %}
                        <div class="field-container col-12" id="{{ key }}">
                            <label class="form-label">{{ key }}</label>
                            <div class="d-flex gap-2 align-items-start">
                                <input type="text" class="form-control" value="{{ value }}" name="config[{{ key }}]">
                                <button class="btn btn-outline-danger flex-shrink-0" type="button" onclick='deleteField("{{ key }}")'>{{ 'Delete'|trans }}</button>
                            </div>
                        </div>
                    {% endif %}
                {% endfor %}
            </div>
        </div>

        <input type="hidden" name="id" value="{{ product.id }}">
        <div class="d-flex justify-content-end">
            <button class="btn btn-primary" type="submit">{{ 'Update'|trans }}</button>
        </div>
    </form>
</div>

<script>
    function buildCustomField(name, value) {
        const fieldContainer = document.createElement('div');
        fieldContainer.classList.add('field-container', 'col-12');
        fieldContainer.setAttribute('id', name);

        const label = document.createElement('label');
        label.classList.add('form-label');
        label.textContent = name;

        const wrapper = document.createElement('div');
        wrapper.classList.add('d-flex', 'gap-2', 'align-items-start');

        const input = document.createElement('input');
        input.setAttribute('type', 'text');
        input.classList.add('form-control');
        input.setAttribute('name', 'config[' + name + ']');
        input.value = value || '';

        const button = document.createElement('button');
        button.classList.add('btn', 'btn-outline-danger', 'flex-shrink-0');
        button.setAttribute('type', 'button');
        button.textContent = {{ 'Delete'|trans|json_encode|raw }};
        button.addEventListener('click', function() {
            deleteField(name);
        });

        wrapper.appendChild(input);
        wrapper.appendChild(button);
        fieldContainer.appendChild(label);
        fieldContainer.appendChild(wrapper);

        return fieldContainer;
    }

    function addNewField() {
        Modals.create({
            type: 'prompt',
            title: {{ 'New field'|trans|json_encode|raw }},
            label: {{ 'Give the new field a name'|trans|json_encode|raw }},
            value: 'monthlyLimit',
            promptConfirmButton: {{ 'Create'|trans|json_encode|raw }},
            promptConfirmCallback: function(name) {
                name = 'custom_' + toCamelCase(name);
                const container = document.getElementById('customParameters');
                container.appendChild(buildCustomField(name, ''));
            }
        });
    }

    function deleteField(id) {
        const element = document.getElementById(id);
        if (element) {
            element.remove();
        }
    }

    function toCamelCase(str) {
        str = str.replace(/[^a-zA-Z0-9]/g, ' ');
        const words = str.split(' ').filter(Boolean);

        for (let i = 1; i < words.length; i++) {
            words[i] = words[i].charAt(0).toUpperCase() + words[i].slice(1);
        }

        return words.join('');
    }
</script>
