url = "/brands"
layout = "mainN"
title = "Brands"
==
{%partial "bread" title='brands.title'|_ %}

{% partial 'loader/loader' id='loader_brand' %}

<div id="detail_screen">
    <div class="container">
        <div class="row" id="brand_inside">
            <!-- Blog Item -->


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

{% put scripts %}
<script>
    $.ajax({
        url: `http://216.250.11.229/app/api/attribute-options?locale={{activeLocale}}`,
        type: 'GET',
        dataType: 'json',
        beforeSend: function () {
            $('#detail_screen').hide();
            $('#loader_brand').show();
        },
        success: function (data, textStatus, xhr) {
            $('#detail_screen').show();
            $('#loader_brand').hide();

            var brands = data.data
            for (var brand of brands) {
                // console.log(product.name);
                $('#brand_inside').append(`
                <div class="col-lg-3 col-sm-6">
                    <div class="ltn__blog-item">
                        <div class="ltn__blog-img">
                            <a href="/brand/`+ brand.label +`/`+ brand.id + `"><img src="` + brand.image + `" alt="` + brand.label + `" style="width: 100%;"></a>
                        </div>
                        <div class="ltn__blog-brief">
                            <h3 class="ltn__blog-title blog-title-line"><a href="/brand/`+ brand.label +`/`+ brand.id + `">` + brand.label + `</a></h3>
                        </div>
                    </div>
                </div>
            `);
            }
        },
        error: function (xhr, textStatus, errorThrown) {
            console.log('Error in Operation');
        }
    });
</script>
{% endput %}