{% extends "layout.html" %}

{% block title %}{{ title }}{% endblock %}

{% block content %}

<form method="POST" action="{{ url_for('main.settings') }}">
{{ breadcrumbs.breadcrumb_header(
    title=title,
    submit_button=True
) }}

    <div class="container">
        <label for="brandInput" class="form-label">Brands</label>
        <div class="input-group">
            <input type="text" class="form-control rounded-bottom-0" id="brandInput" name="brandInput" placeholder="Add a new brand">
            <button type="button" class="btn btn-primary rounded-bottom-0" id="addBrandButton" onclick="addBrand();" disabled>
                {{ icons.plus(16) }}
            </button>
            <button type="button" class="btn btn-danger rounded-bottom-0" id="removeBrandButton" onclick="removeSelectedBrands()" disabled>
                {{ icons.minus(16) }}
            </button>
        </div>
        <select class="form-select border-top-0 rounded-top-0" id="brandList" size="10" multiple>
            {% for brand in brands %}
                <option value="{{ brand.id }}">{{ brand.name }}</option>
            {% endfor %}
        </select>
    </div>
</form>
{% endblock %}

{% block script %}
const brandInput = document.querySelector('#brandInput');
const brandList = document.querySelector('#brandList');
const addBrandButton = document.querySelector('#addBrandButton');
const removeBrandButton = document.querySelector('#removeBrandButton');

brandInput.addEventListener('input', () => {
    addBrandButton.disabled = brandInput.value.trim() === '';
});

brandList.addEventListener('change', () => {
    removeBrandButton.disabled = brandList.selectedOptions.length === 0;
});

function sortOptions() {
    const options = Array.from(brandList.options);
    options.sort((a, b) => a.text.localeCompare(b.text));
    brandList.innerHTML = '';
    options.forEach(option => brandList.appendChild(option));
}

let tempIdCounter = -1;

function addBrand() {
    const newBrand = brandInput.value.trim();
    if (newBrand) {
        const option = document.createElement('option');
        option.textContent = newBrand;
        option.value = tempIdCounter--;
        brandList.appendChild(option);
        brandInput.value = '';
        addBrandButton.disabled = true;
        sortOptions();
    }
}

function removeSelectedBrands() {
    Array.from(brandList.selectedOptions).forEach(option => option.remove());
    removeBrandButton.disabled = true;
}
{% endblock %}