



<div class="shop-main">
    <div class="page-title"><h2>{{ title }}</h2></div>
<div class="tile-view">


{{# each products as |val key|}}

<div class="product-image" >
    <div class="shop-tile-img"><img class="list-preview" src="/thumbs/products/{{val.id}}.png" /></div>
   
</div>

<div class="product-details" >
   <div class="shop-description"> {{ val.description }}</div>
    <div class="shop-title"> {{ val.title }}</div>
    <div class="shop-sku"> SKU:{{ val.sku }}</div>
    <div style="display:none" id="id_holder">{{val.id}}</div>
    <div class="shop-colors"> 
        {{# if val.colors}}
        <div class="color-title">Available Colors:</div>
        {{else}}
        <div class="color-title">Available in all Printable Colors</div>
        {{/if}}
        {{# each val.colors as |col key|}}


        <div class="color-box" title="{{col.pantone}}" style="background-color:{{col.hex}}"></div>
        {{/each}}



    </div>
     <a href="/clients/designTool/{{val.id}}"><div class="design-button"><span class="button-text">OPEN IN DESIGN TOOL</span></div></a>
</div>

{{/each}}



</div>
{{# if designs}}
<div class="page-title"><h2>Available Designs</h2></div>
{{/if}}
<div class="tile-list-view">



{{# each designs as |val key|}}

<div class="shop-tile" onclick="window.location.href='/products/design/{{product_id}}/{{val.id}}/'">
    <div class="shop-tile-img"><img class="list-preview" src="/products/{{product_id}}/amorphic/{{id}}.svg" /></div>
    <div class="shop-title"> {{ val.title }}</div>
    <div class="shop-sku"> SKU:{{ val.sku }}</div>
    <div style="display:none" id="id_holder">{{val.id}}</div>
     <a href="/products/design/{{product_id}}/{{val.id}}/"><div class="design-button"><span class="button-text">CONFIGURE & ORDER</span></div></a>
</div>

{{/each}}



</div>



</div>



<script>
    function startup() {
        // assignDraggable();
    };
</script>