{% load i18n %}

<script>
async function SelectCompany(){
    const sku = document.getElementById("sku").value
    const supplier = parseInt(document.getElementById("supplier").value)
    const pk = {{ part.pk }}
    const cmd_url="{% url 'plugin:suppliercart:add-supplierpart' %}";
    data = {
	sku: sku,
	supplier: supplier,
        pk: pk,
    }
    document.getElementById("loader").style.visibility = "visible";
    response = await inventreeFormDataUpload(url=cmd_url, data=JSON.stringify(data));
    document.getElementById("result").textContent=response.message;
    if (response.message == "OK") {
        document.getElementById("result").className="alert alert-block alert-success";
    } else {
        document.getElementById("result").className="alert alert-block alert-danger";
    }
    document.getElementById("loader").style.visibility = "hidden";
}
</script>

<style>
.wheel {
  border: 5px solid #f3f3f3; 
  border-top: 5px solid #3498db; 
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: spin 2s linear infinite;
  visibility: hidden;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>

<div class='alert alert-block ' id='result'>&nbsp</div>
<div id="loader" class="wheel"></div>
<table class='table table-condensed'>
<form>
<tbody>
    <tr>
        <td> Select Supplier </td>
        <td> 
	    <select id="supplier">
		{% for supplier,data in plugin.registered_suppliers.items %}
                {% if data.is_registered == True %}
		   
		<option value="{{ data.pk }}"> {{ data.name }}</option>
                {% endif %}
		{% endfor %}
	    </select>
        </td>
    </tr>
    <tr>
        <td> Exact supplier part number from suppliers WEB page</td>
        <td> 
            <input id="sku" type="text" value="">
        </td>
    </tr>
</tbody>
<tfoot>
    <tr>
	<td>
            <input type="button" value="Add Part" onclick="SelectCompany()" title='Add Part' />
	</td>
	<td> </td>
    </tr>
</tfoot>
</form>
</table>