{% extends 'servers.html' %}
{% import "bootstrap/wtf.html" as wtf %}

{% set sidebar_state = 'disabled' %}
{% set btn_back = true %}

{% block nav_server_add %}active{% endblock %}
{% block content %}

<h2 class="mx-5 subhead-heading">{{_('Update server')}}</h2>

<form class="form mx-5" method="POST">
    {{ form.hidden_tag() }}

    {{ form.server_addr() }}

    <div class="form-group">
        <div id="ip-fields">
            {% for addr in form.addr %}
            <div class="d-flex align-items-center mb-2">
                {{ addr(class="form-control me-2", placeholder=_("Enter IP Address"), required=True) }}
                <button type="button" class="btn btn-danger" onclick="removeIPField(this)">{{_('Remove') }}</button>
            </div>
            {% endfor %}
        </div>
        <button type="button" class="btn btn-primary" onclick="addIPField()">{{_('Add address') }}</button>

        {{ form.submit(class="btn btn-success") }}
    </div>
</form>

<script>
    function addIPField() {
        const container = document.createElement('div');
        container.classList.add('d-flex', 'align-items-center', 'mb-2');

        const newField = document.createElement('input');
        newField.setAttribute('type', 'text');
        newField.setAttribute('name', 'addr-' + document.querySelectorAll('input[name^="addr-"]').length);
        newField.classList.add('form-control', 'me-2');
        newField.setAttribute('placeholder', '{{ _('Enter IP Address') }}');
        newField.required = true;

        const removeButton = document.createElement('button');
        removeButton.setAttribute('type', 'button');
        removeButton.classList.add('btn', 'btn-danger');
        removeButton.innerText = '{{ _('Remove') }}';
        removeButton.onclick = function() {
            removeIPField(this);
        };

        container.appendChild(newField);
        container.appendChild(removeButton);
        document.getElementById('ip-fields').appendChild(container);
    }

    function removeIPField(elem) {
        const ipFieldsContainer = document.getElementById('ip-fields');
        const ipFieldDivs = ipFieldsContainer.querySelectorAll('.d-flex');

        if (ipFieldDivs.length <= 1) {
            return;
        }
        const parentDiv = elem.parentElement;
        parentDiv.remove();
    }
</script>

{% endblock %}