{% extends "base.html" %}

{% block main %}

  <h1>Welcome, {{ authuser.name }}</h1>

  {# Show the users current balance #}
  <p>
    Your balance: <strong>{{ authuser.balance|chf }}</strong>
  </p>
<div id="depositlist">
  <a class="deposit-to-remove btn btn-primary me-2" href="/deposit?n=100">Deposit CHF 1</a>
  <a class="deposit-to-remove btn btn-primary me-2" href="/deposit?n=1000">Deposit CHF 10</a>
  {% if authuser.logout_after_purchase %}
  <a class="btn btn-primary me-2" href="/?logout_after_purchase=0">Logout after purchase</a>
  {% else %}
  <a class="btn btn-outline-primary me-2" href="/?logout_after_purchase=1">Logout after purchase</a>
  {% endif %}
  </div>
</div>
<div id="deposit-wrapper">
  <div id="deposit-input">
    <div id="deposit-output">
      <span id="deposit-title"></span>
      <span id="deposit-amount">0.00</span>
    </div>
    {% for i in [('1', '1'), ('2', '2'), ('3', '3'), ('4', '4'), ('5', '5'), ('6', '6'), ('7', '7'), ('8', '8'), ('9', '9'), ('del', '✗'), ('0', '0'), ('ok', '✓')] %}
      <div class="numpad" id="numpad-{{ i.0 }}" onclick="deposit_key('{{ i.0 }}');">{{ i.1 }}</div>
    {% endfor %}
    <div id="transfer-userlist">
      <div id="scroll-up" onclick="scrollUserlist(-130);">▲</div>
      <ul id="transfer-userlist-list">
        {% for user in (users if user != authuser) %}
          <li onclick="set_transfer_user(this, {{ user.id }})">{{ user.name }}</li>
        {% endfor %}
      </ul>
      <div id="scroll-down" onclick="scrollUserlist(+130);">▼</div>
    </div>
  </div>
</div>
<script src="/static/js/depositlist.js"></script>
<br/>

<div class="row itemlist">
  {% for product in products %}
    {# Show an item per product, consisting of the name, image, price and stock, triggering a purchase on click #}
    <div class="col-xl-1 col-md-2 col-sm-3 col-4 g-4">
      {% if product.custom_price %}
	<a class="card h-100 text-bg-light" onclick="setup_custom_price({{ product.id }}, '{{ product.name}}');">
      {% else %}
        <a class="card h-100 text-bg-light" {% if product.ean %}id="a-buy-ean{{ product.ean }}"{% endif %} href="/buy?pid={{ product.id }}">
      {% endif %}
      <div class="card-header">
	{{ product.name }}
      </div>
      <div class="card-body">
	{% if product.custom_price %}
          <span class="card-text">Custom Price</span>
	{% else %}
          <span class="card-text">
            {% if authuser.is_member %}
              {{ product.price_member|chf }}
            {% else %}
              {{ product.price_non_member|chf }}
            {% endif %}
          </span>
	{% endif %}
      </div>
      <img class="card-img-bottom" src="/static/upload/thumbnails/products/{{ product.id }}.png?cacheBuster={{ now }}" alt="Picture of {{ product.name }}" draggable="false"/>
      {% set pstock = stock.get_stock(product) %}
      {% if pstock is not none %}
	<div class="card-img-overlay d-flex flex-column justify-content-end">
          <span class="card-text text-bg-light">{{ pstock }}</span>
	</div>
      {% endif %}
        </a>
    </div>
  {% endfor %}
</div>

{{ super() }}

{% endblock %}

{% block eanwebsocket %}
  let eaninput = document.getElementById("a-buy-ean" + e.data);
  if (eaninput === null) {
  document.location = "?ean=" + e.data;
  } else {
  eaninput.click();
  }
{% endblock %}