{% import 'macro_functions.html.twig' as mf %}
    <div class="card-body">
        <h1>{{ 'API Key settings'|trans }}</h1>
        <form method="post" action="{{ 'api/admin/product/update_config'|link }}" class="api-form save" data-api-msg="{{ 'API key settings updated'|trans }}">
            <input type="hidden" name="CSRFToken" value="{{ CSRFToken }}"/>
            <div class="mb-3 row">
                <P>{{ 'Here you can configure the length of the API keys that will be generated. We recommend making this no less than 16 at a minimum. When in doubt, leave this at 32.'|trans }}</p>
                <label class="form-label col-3 col-form-label">{{ 'Length'|trans }}:</label>
                <div class="col">
                    <input type="number" class="form-control" name="config[length]" value="{{ product.config.length|default(32) }}">
                </div>
            </div>

            <hr>

            <div class="mb-3 row">
                <P>{{ 'FOSSBilling can split the generated API key with dashes depending on the following options. The dashes will not count towards the API key length. If any API key is generated with dashes, they must be included in order for it to be considered valid.'|trans }}</p>
                <label class="form-label col-3 col-form-label">{{ 'Split API key with dashes'|trans }}:</label>
                <div class="col">
                    <div class="form-check form-check-inline">
                        <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 %}>
                        <label class="form-check-label" for="split_yes">{{ 'Yes'|trans }}</label>
                    </div>
                    <div class="form-check form-check-inline">
                        <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 %}>
                        <label class="form-check-label" for="split_no">{{ 'No'|trans }}</label>
                    </div>
                </div>
            </div>

            <div class="mb-3 row">
                <label class="form-label col-3 col-form-label">{{ 'Split Interval'|trans }}:</label>
                <div class="col">
                    <input type="number" class="form-control" name="config[split_interval]" value="{{ product.config.split_interval|default(8) }}">
                </div>
            </div>

            <hr>

            <div class="mb-3 row">
                <P>{{ 'Here you can configure what case you want the API keys to be generated with. "Uppercase" makes all letters uppercase, "lowercase" makes them all lowercase, and "mixed" does a combination of the two options.'|trans }}</p>
                <label class="form-label col-3 col-form-label">{{ 'API key capitalization'|trans }}:</label>
                <div class="col">
                    <select class="form-select" aria-label="API key capitalization options" 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>
            </div>

            <hr>

            <div class="mb-3 row">
                <h2>{{ 'Custom Parameters'|trans }}</h2>
                <p>{{ 'Here, you have the option to include custom parameters that can be requested from the API. This is particularly useful if you want to set specific limits for API keys. Your application can connect to the FOSSBilling API and retrieve the custom parameters you have defined for an API key.'|trans }}</p>
                <P>{{ 'FOSSBilling will remove the "custom_" prefix from the value name when requesting them from the API. IE: custom_monthlyLimit will be named monthlyLimit when fetched through the API.'|trans}}
                <div class="col" id="customParameters">
                    <span class="btn btn-primary" onclick="addNewField()">{{ 'Add new field'|trans }}</span>
                    {% for key, value in product.config %}
                        {% if key starts with 'custom_' %}
                            <div class="field-container row" id="{{key}}">
                                <label class="form-label col-3 col-form-label">{{key}}:</label>
                                <div class="col d-flex align-items-center">
                                    <input type="text" class="form-control me-2" value="{{value}}" name="config[{{key}}]"/><span
                                    class="btn btn-primary ms-2" onclick='deleteField("{{key}}")'>Delete</span>
                                </div>
                            </div>
                        {% endif %}
                      {% endfor %}                  
                </div>
            </div>
            
            <input type="hidden" name="id" value="{{ product.id }}">
            <button class="btn btn-primary w-100" type="submit">{{ 'Update'|trans }}</button>
        </form>
    </div>
    <script> 
    function addNewField() {
        Modals.create({
            type: 'prompt',
            title: 'New field',
            label: 'Give the new field a name',
            value: 'monthlyLimit',
            promptConfirmButton: 'Create',
            promptConfirmCallback: function (name) {
                // We use camel case to ensure it'll be programming-friendly & append 'custom_' to the start of it so they are easily identifiable as custom parameters.
                name = 'custom_' + toCamelCase(name);
                var container = document.getElementById('customParameters');
    
                // Create the container div
                var fieldContainer = document.createElement('div');
                fieldContainer.classList.add('field-container', 'row');
                fieldContainer.setAttribute('id', name);
    
                // Create the label element
                var label = document.createElement('label');
                label.classList.add('form-label', 'col-3', 'col-form-label');
                label.textContent = name + ':';
    
                // Create the div container for the input and button
                var div = document.createElement('div');
                div.classList.add('col', 'd-flex', 'align-items-center');
    
                // Create the input element
                var input = document.createElement('input');
                input.setAttribute('type', 'text');
                input.classList.add('form-control');
                input.classList.add('me-2');
                input.setAttribute('name', 'config[' + name + ']');
    
                // Create the button element
                var button = document.createElement('span');
                button.classList.add('btn', 'btn-primary', 'ml-2');
                button.textContent = 'Delete';
                button.setAttribute('onclick', 'deleteField("' + name + '")');
    
                // Append elements
                div.appendChild(input);
                div.appendChild(button);
    
                // Append the label and div to the container div
                fieldContainer.appendChild(label);
                fieldContainer.appendChild(div);
    
                // Append the container div to the main container
                container.appendChild(fieldContainer);
            }
        });
    }
    
    function deleteField(id){
        const element = document.getElementById(id);
        element.remove();
    }
    
    function toCamelCase(str) {
        str = str.replace(/[^a-zA-Z0-9]/g, ' ');
        var words = str.split(' ');
        
        // Capitalize the first letter of each word except the first word
        for (var i = 1; i < words.length; i++) {
            words[i] = words[i].charAt(0).toUpperCase() + words[i].slice(1);
        }
    
        return words.join('');
    }
    </script>
