<meta charset="UTF-8">
<meta http-equiv="cache-control" content="no-cache">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1">
<link rel="shortcut icon" href="{{context}}/static/img/logo-0.png">
<link href="{{ context }}/static/css/fa/css/font-awesome.css" rel="stylesheet" type="text/css">
<!--
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.css" />
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid-theme.min.css" /> 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.js"></script>
-->
<script type="text/javascript" src="{{ context }}/static/js/jquery/jquery.min.js"></script>
<script type="text/javascript" src="{{ context }}/static/js/jx/rpc.js"></script>
<script type="text/javascript" src="{{ context }}/static/js/jx/utils.js"></script>
<script type="text/javascript" src="{{ context }}/static/js/jx/dom.js"></script>
<link href="{{context}}/static/css/default.css" rel="stylesheet" type="text/css">
<title style="text-transform: capitalize">Store</title>
<style>
    .grid {
        padding:4px;
        display:grid;
        grid-template-columns: repeat(auto-fit,minmax(45%,1fr)) ;
        grid-gap:4px;
        align-content: center;
        align-items: center;
    }
    .grid .tile {
        height:300px;
        font-size:14px;
    }
</style>
<body>
    <div class="grid theme-clouds border border-round">
        {% for item in products %}
            <div class="tile">
                
                <div class="caption border-bottom">
                    <p>
                        {{item.name.replace('-',' ')}}
                    </p>    
                </div>
                <div class="default">
                    <p>
                            {{item.metadata.about}}
                    </p>
                    
                </div>
            </div>
        {% endfor %}
    </div>
</body>
