{% extends "base.html" %}

{% block main %}

  <h1>Administration</h1>

  <ul class="nav nav-tabs" id="adminTab" role="tablist">
    <li class="nav-item" role="presentation">
      <button class="nav-link active" id="admin-users-tab" data-bs-toggle="tab" data-bs-target="#admin-users-tab-pane" type="button" role="tab" aria-controls="admin-users-tab-pane" aria-selected="true">Users</button>
    </li>
    <li class="nav-item" role="presentation">
      <button class="nav-link" id="admin-products-tab" data-bs-toggle="tab" data-bs-target="#admin-products-tab-pane" type="button" role="tab" aria-controls="admin-products-tab-pane" aria-selected="false">Products</button>
    </li>
    <li class="nav-item" role="presentation">
      <button class="nav-link" id="admin-default-images-tab" data-bs-toggle="tab" data-bs-target="#admin-default-images-tab-pane" type="button" role="tab" aria-controls="admin-default-images-tab-pane" aria-selected="false">Default Images</button>
    </li>
  </ul>

  <div class="tab-content" id="adminTabContent">

    <section class="tab-pane fade pt-3 show active" id="admin-users-tab-pane" role="tabpanel">
      <h2>Users</h2>

      <form id="admin-newuser-form" method="post" action="/admin?adminchange=newuser" accept-charset="UTF-8">
	<table class="table table-striped">
	  <tr>
	    <th>Username</th>
	    <th>E-Mail (optional)</th>
	    <th>Password</th>
	    <th>Member</th>
	    <th>Admin</th>
	    <th>Logout after purchase</th>
	    <th>Actions</th>
	  </tr>
	  <tr>
	    <td><input class="form-control" id="admin-newuser-username" type="text" name="username" placeholder="New username"></td>
	    <td><input class="form-control" id="admin-newuser-email" type="text" name="email" placeholder="New e-mail"></td>
	    <td><input class="form-control" id="admin-newuser-password" type="password" name="password" placeholder="New password"></td>
	    <td><input class="form-check-input" id="admin-newuser-ismember" type="checkbox" name="ismember"></td>
	    <td><input class="form-check-input" id="admin-newuser-isadmin" type="checkbox" name="isadmin"></td>
	    <td><input class="form-check-input" id="admin-newuser-logout-after-purchase" type="checkbox" name="logout_after_purchase"></td>
	    <td><input class="btn btn-success" type="submit" value="Create User"></td>
	  </tr>
	  {% for user in users %}
	    <tr>
	      <td>{{ user.name }}</td>
	      <td>{{ '✓' if user.email else '✗' }}</td>
	      <td>••••••••</td>
	      <td>{{ '✓' if user.is_member else '✗' }}</td>
	      <td>{{ '✓' if user.is_admin else '✗' }}</td>
	      <td>{{ '✓' if user.logout_after_purchase else '✗' }}</td>
	      <td>
		<div class="btn-group" role="group">
                  <a class="btn btn-primary" href="/moduser?userid={{ user.id }}">Edit</a>
                  <a class="btn btn-danger" href="/moduser?userid={{ user.id }}&change=del">Delete</a>
		</div>
	      </td>
	    </tr>
	  {% endfor %}
	</table>
      </form>
    </section>

    <section class="tab-pane fade pt-3" id="admin-products-tab-pane" role="tabpanel">
      <h2>Products</h2>

      <form id="admin-newproduct-form" method="post" action="/admin?adminchange=newproduct" enctype="multipart/form-data" accept-charset="UTF-8">
	<table class="table table-striped">
	  <tr>
	    <th>Name</th>
	    <th>Barcodes</th>
	    <th>Member price</th>
	    <th>Non-member price</th>
	    <th>Custom price</th>
	    <th>Stockable</th>
	    <th>Image</th>
	    <th>Actions</th>
	  </tr>
	  <tr>
	    <td><input class="form-control" id="admin-newproduct-name" type="text" name="name" placeholder="New product name"></td>
	    <td><input class="form-control" id="admin-newproduct-barcode" type="text" name="barcode" placeholder="Scan barcode to insert here"></td>
	    <td>
	      <div class="input-group mb-3">
		<span class="input-group-text">CHF</span>
		<input class="form-control" id="admin-newproduct-price-member" type="number" step="0.01" name="pricemember" value="0">
	      </div>
	    </td>
	    <td>
	      <div class="input-group mb-3">
		<span class="input-group-text">CHF</span>
		<input class="form-control" id="admin-newproduct-price-non-member" type="number" step="0.01" name="pricenonmember" value="0">
	      </div>
	    </td>
	    <td><input class="form-check-input" id="admin-custom-price" type="checkbox" name="custom_price"></td>
	    <td><input class="form-check-input" id="admin-newproduct-stockable" type="checkbox" name="stockable" checked="checked"></td>
	    <td><input class="form-control" id="admin-newproduct-image" name="image" type="file" accept="image/*"></td>
	    <td><input class="btn btn-success" type="submit" value="Create Product"></td>
	  </tr>
	  {% for product in products %}
	    <tr>
	      <td>{{ product.name }}</td>
	      <td>
		{% set bcs = barcodes | selectattr('product_id', 'eq', product.id) | list %}
		{% if bcs | length > 0 %}
		  {{ bcs[0].barcode }}
		  {% if bcs | length > 1 %}
		  <span class="badge bg-secondary">+{{ bcs | length - 1 }}</span>
		  {% endif %}
		{% endif %}
	      </td>
	      <td>{{ product.price_member | chf }}</td>
	      <td>{{ product.price_non_member | chf }}</td>
	      <td>{{ '✓' if product.custom_price else '✗' }}</td>
	      <td>{{ '✓' if product.stockable else '✗' }}</td>
	      <td><img style="height: 2em;" src="/static/upload/thumbnails/products/{{ product.id }}.png" alt="Picture of {{ product.name }}" draggable="false"></td>
	      <td>
		<div class="btn-group" role="group">
                  <a class="btn btn-primary" href="/modproduct?productid={{ product.id }}">Edit</a>
                  <a class="btn btn-danger" href="/modproduct?productid={{ product.id }}&change=del">Delete</a>
		</div>
	      </td>
	    </tr>
	  {% endfor %}
	</table>
      </form>
    </section>

    <section class="tab-pane fade pt-3" id="admin-default-images-tab-pane" role="tabpanel">
      <h2>Default Images</h2>

      <form id="admin-default-images-form" method="post" action="/admin?adminchange=defaultimg" enctype="multipart/form-data" accept-charset="UTF-8">

	<div class="row">

	  <div class="col-sm-2 g-4">
	    <div class="card h-100">
	      <img class="card-img-top" src="/static/upload/thumbnails/users/default.png" alt="Default user avatar" />
	      <div class="card-body">
		<label class="card-title" for="admin-default-images-user">Default user avatar</label>
		<div class="card-text">
		  <input class="form-control" id="admin-default-images-user" type="file" name="users" accept="image/*" />
		</div>
	      </div>
	    </div>
	  </div>

	  <div class="col-sm-2 g-4">
	    <div class="card h-100">
	      <img class="card-img-top" src="/static/upload/thumbnails/products/default.png" alt="Default product image" />
	      <div class="card-body">
		<label class="card-title" for="admin-default-images-product">Default product image</label>
		<div class="card-text">
		  <input class="form-control" id="admin-default-images-product" type="file" name="products" accept="image/*" />
		</div>
	      </div>
	    </div>
	  </div>

	</div>

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

    {{ super() }}

{% endblock %}

{% block barcodewebsocket %}
  let bcinput = document.getElementById("admin-newproduct-barcode");
  bcinput.value = e.data;
  bcinput.select();
  bcinput.scrollIntoView();
{% endblock %}