{% include 'bold-product' with product, hide_action: 'break' %}{% if bold_hidden_product %}{% break %}{%endif %}
{% include 'locksmith-variables', locksmith_scope: 'subject', locksmith_subject: product %}
{% assign collection = collections.all-ejuice %}
{% paginate collection.products by 100 %}

<form action="/cart" method="post">

  {% if collection.products_count > 0 %}
    <div style="left:100px">
      <h1>{% if template contains 'page' %}{{ page.title }}{% else %}{{ collection.title }}{% endif %}</h1>
      <input class="bulkadd" type="submit" value="Add to cart" />
    </div>
  {% else %}
    <h1>{% if template contains 'page' %}{{ page.title }}{% else %}{{ collection.title }}{% endif %}</h1>
  {% endif %}

  {% if template contains 'page' and page.content.size > 0 %}
    <div class="rte">
      {{ page.content }}
    </div>
  {% elsif collection.description.size > 0 %}
    <div class="rte">
      {{ collection.description }}
    </div>
  {% endif %}

  {% if collection.products_count > 0 %}

  {% for product in collection.products %}
  {% include 'bold-product' with product, hide_action: 'skip' %}
    {% if product.available %}
        <div class="order">
            <div class="accordion">
                    <div>
                    <img src="{{ variant.image | default: product.featured_image | img_url: 'small' }}" alt="{{ variant.title | escape }}" />
                      {{ product.title }}
                    </div>
            </div>
              <div class="container">
                <table>
                  <tbody>
                  {% for variant in product.variants %}
                  {% if variant.available %}
                    <tr class="{% cycle 'pure-table-odd', '' %}">
                      <td>
                        {{ variant.title }}
                      </td>
                      <td>
                        {% if locksmith_access_granted %}
                        {{ variant.price | money }}
                        {% else %}
                        <p>Please login to see pricing</p>
                        {% endif %}
                      </td>
                      <td style="text-align:right; width:100px">
                        <input name="updates[{{ variant.id }}]" onfocus="this.select()" class="quantity field" min="0" {% unless variant.inventory_management == blank or variant.inventory_policy == 'continue' %} max="{{ variant.inventory_quantity }}" {% endunless %} type="text" value="0" tabindex="1" />
                      </td>
                    </tr>
                  {% endif %}
                  {% endfor %}
                  </tbody>
                </table>
              </div>
        {% endif %}
      {% endfor %}

    <div>
      <input type="submit" value="Add to the cart" />
    </div>

  {% else %}
    <p>There are no products in this view.</p>
  {% endif %}

</form>

{% endpaginate %}

{% if collection.products_count > 0 %}
<script>
jQuery(function($) {
  $('table .quantity:first').focus();
  $('[max]').change(function() {
    var max = parseInt($(this).attr('max'), 10);
    var value = parseInt($(this).val(), 10) || 0;
    if (value > max) {
      alert('We only have ' + max + ' of this item in stock');
      $(this).val(max);
    }
  });
});
</script>
{% endif %}
<script type="text/javascript" src="{{ 'jquery_accordion.js' | asset_url }}"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.accordion').accordion({
defaultOpen: 'section1',
cookieName: 'accordion_nav'
});
});
</script>
<style>
.bulkadd {
width:200px;
font-size:2em;
background:#AD9675;
color:#0D0E20;
border:#0D0E20 2px solid;
height:50px;
position:relative;
text-align: center;
}
.bulkadd input {
margin:auto;
}
.accordion {
width: 75%;
margin: auto;
padding:10px;
border:#0D0E20 2px solid;
background: #AD9675;
text-decoration:none;
color: #0D0E20;
font-size:2em;
position:relative;
}
.accordion-open {
background:#50b3da;
color: #fff;
}
.accordion-open span {
display:block;
position:absolute;
right:3px;
top:25%;
padding:10px;
}
.accordion-open span {
background:url('{{ 'minus.png' | asset_url }}') center center no-repeat;
}
.accordion-close span {
display:block;
position:absolute;
right:3px;
top:25%;
background:url('{{ 'plus.png' | asset_url }}') center center no-repeat;
padding:10px;
}
.accordion div {
position:relative;
margin:auto;
}
.order div.container {
padding:0;
margin:auto;
}
.order div.container {
max-width:75%;
padding:5px 0;
}
.order div.content {
background:#f0f0f0;
margin: 0;
padding:10px;
font-size:.9em;
line-height:1.5em;
}
.order div.content ul {
padding:0;
margin:0;
padding:3px;
}
.order div.content p {
padding:0;
margin:3px 0 10px;
padding:3px;
}
.order div.content ul li {
list-style-position:inside;
line-height:25px;
}
</style>