{% extends "base.html" %}

{% block main %}

<section id="modproduct">
    <h1>Modify {{ product.name }}</h1>

    <form id="modproduct-form" method="post" action="/modproduct?change=update" enctype="multipart/form-data" accept-charset="UTF-8">
        <label class="form-label" for="modproduct-name">Name: </label>
        <input class="form-control" id="modproduct-name" type="text" name="name" value="{{ product.name }}" /><br/>

        <label class="form-label" for="modproduct-ean">EAN code: </label>
        <input class="form-control" id="modproduct-ean" type="text" name="ean" value="{{ product.ean or '' }}" /><br/>

        <label class="form-label" for="modproduct-price-member">Member price: </label>
	<div class="input-group mb-3">
	  <span class="input-group-text">CHF</span>
          <input class="form-control" id="modproduct-price-member" type="number" step="0.01" name="pricemember" value="{{ product.price_member|chf(False) }}" />
	  </div>

        <label class="form-label" for="modproduct-price-non-member">Non-member price: </label>
	<div class="input-group mb-3">
	  <span class="input-group-text">CHF</span>
          <input class="form-control" id="modproduct-price-non-member" type="number" step="0.01" name="pricenonmember" value="{{ product.price_non_member|chf(False) }}" />
	</div>


        <div class="form-check">
        <input class="form-check-input" id="modproduct-custom-price" type="checkbox" name="custom_price" {% if product.custom_price %} checked="checked" {% endif %} />
        <label class="form-check-label" for="modproduct-custom-price"><abbr title="When 'Custom Price' is enabled, users choose the price to pay, but at least the prices given above">Custom Price</abbr></label>
	</div>

        <div class="form-check">
        <input class="form-check-input" id="modproduct-stockable" type="checkbox" name="stockable" {% if product.stockable %} checked="checked" {% endif %} />
	<label class="form-check-label" for="modproduct-stockable">Stockable</label>
	</div>

        <label class="form-label" for="modproduct-balance">Stock: </label>
        <input class="form-control" id="modproduct-balance" name="stock" type="text" value="{{ product.stock }}" /><br/>

        <label class="form-label" for="modproduct-image">
            <img height="150" src="/static/upload/thumbnails/products/{{ product.id }}.png?cacheBuster={{ now }}" alt="Image of {{ product.name }}" />
        </label><br/>
        <input class="form-control" id="modproduct-image" type="file" name="image" accept="image/*" /><br/>

        <input id="modproduct-productid" type="hidden" name="productid" value="{{ product.id }}" /><br/>

        <input class="btn btn-primary" type="submit" value="Save changes">
    </form>

    <h2>Delete Product</h2>

    <form id="modproduct-delproduct-form" method="post" action="/modproduct?change=del" accept-charset="UTF-8">
        <input id="modproduct-delproduct-productid" type="hidden" name="productid" value="{{ product.id }}" /><br/>
        <input class="btn btn-danger" type="submit" value="Delete product {{ product.name }}" />
    </form>

</section>

{{ super() }}

{% endblock %}

{% block eanwebsocket %}
  let eaninput = document.getElementById("modproduct-ean");
  eaninput.value = e.data;
  eaninput.select();
  eaninput.scrollIntoView();
{% endblock %}