<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<body>

<div th:fragment="materialSelector" class="materialSelector">
    <input
            class="materialSelectorInput"
            type="text"
            placeholder="Recherche..."
            onfocus="showMaterialList(this)"
            onkeyup="searchMaterial(this)"
            name="materials"
            autocomplete="off"
            data-usepercentages="false"
            required/>
    <div class="materialList">
        <p
                th:each="material : ${materials}"
                th:text="${material.materialType.name == 'Aucun' ? '' : '[' + material.materialType.prefix + ']'} + ' ' + ${material.name}"
                th:data-materialcode="${material.name}"
                th:data-materialtype="${material.materialType.name}"
                th:data-usepercentages="${material.materialType.usePercentages}"
                onclick="selectMaterial(this)"></p>
    </div>
</div>

</body>
</html>
