<%~ include("partials/base_head.eta", {"title": "Dashboard"}) %>
<%~ include("partials/nav.eta") %>

<section class="section main-content">
  <div class="container">
    <div class="columns">
      <!-- Main content in the middle -->
      <div class="column is-three-quarters columns is-multiline" id="mainSelect">
        <!-- This will be populated by JS with the templated content from the hidden section -->
      </div>
      <!-- Empty sidebar on the right -->
      <div class="column is-one-quarter">
       <h2 class="title is-4" >Ausgewählte Produkte</h2>
      </div>
    </div>
  </div>
</section>

<hidden>
  <!-- Base Button -->
  <div class="column is-one-quarter" id="baseStruct">
    <div class="card">
      <div class="card-image">
        <figure class="image is-4by3">
          <img
            src="https://bulma.io/assets/images/placeholders/1280x960.png"
            alt="Placeholder image"
            class="product_image"
          />
        </figure>
      </div>
      <div class="card-content">
        <p class="title is-4 product_name">CocaCola</p>
        <p class="subtitle is-6 product_ean">0123456789</p>
        <p class="product_description">Explainer</p>
      </div>
      <footer class="card-footer">
        <p class="card-footer-item">
          <span class="product_price"> 9.99€ </span>
        </p>
      </footer>
    </div>
  </div>
</hidden>

<%~ include("partials/footer.eta") %>
<script src="/static/pages/product_select.js"></script>
<%~ include("partials/base_foot.eta") %>