{% 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-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" 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>Barcodes</h2>

    <form id="modproduct-barcode-form" method="post" action="/modproduct?change=addbarcode" accept-charset="UTF-8">
      <input id="modproduct-barcode-productid" type="hidden" name="productid" value="{{ product.id }}" />
      <table class="table table-striped">
	<tr>
	  <th>Barcode</th>
	  <th>Name</th>
	  <th>Actions</th>
	</tr>
	<tr>
	  <td><input class="form-control" id="modproduct-barcode-barcode" type="text" name="barcode" value="" placeholder="Scan barcode to insert here"></td>
	  <td><input class="form-control" id="modproduct-barcode-name" type="text" name="name" value="" placeholder="Name for this barcode"></td>
	  <td><input class="btn btn-success" type="submit" value="Add barcode"></td>
	</tr>
	{% for barcode in barcodes %}
	  <tr>
	    <td>{{ barcode.barcode }}</td>
	    <td>{{ barcode.name }}</td>
	    <td><a class="btn btn-danger" href="/modproduct?change=delbarcode&barcode={{ barcode.id }}">Delete</a></td>
	  </tr>
	{% endfor %}
      </table>
    </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 barcodewebsocket %}
  let bcinput = document.getElementById("modproduct-barcode-barcode");
  bcinput.value = e.data;
  bcinput.select();
  bcinput.scrollIntoView();
{% endblock %}