<?
?>
<div class="my-3 p-3 bg-white rounded box-shadow">
    <h6 class="border-bottom border-gray pb-2 mb-0">Testing</h6>


    <div class="media text-muted pt-3">
        <button id="save_conf_button" type="button" class="btn btn-primary" onclick="$('#data_container').empty()">Clean</button>
        <button id="save_conf_button" type="button" class="btn btn-primary" onclick="getAllProducts('#data_container')">Get all products</button>
    </div>


    <div class="media text-muted pt-3">
        <ul id="data_container">

        </ul>
    </div>
</div>

<script>

    function getAllProducts(dataContainerSelector) {
        $(dataContainerSelector).empty();

        $(this).html("working..");

        $.getJSON( "<?=full_path()?>?key=<?=$conf["key"]?>&api=true&action=getAllProducts", function( data ) {
            var transform = {'<>':'li','html':[
                {'<>':'span','html':'[${ID}] [NAME = ${NAME}]<br> [CATEGORY = ${CATEGORY}] <br> [QUANTITY = ${QUANTITY}] <br> [ PRICE = ${PRICE}] [MODEL = ${MODEL}] [BRAND = ${BRAND}] <br> [ URL = ${URL}]'}
            ]};

            $(dataContainerSelector).json2html(data,transform);

            $(this).html("Get all products");
        });


    }

</script>