{% extends "partials/base.html" %}

{% block title %} Pi Frame Server {% endblock %}


{% block content %}
<header class="container">
  <hgroup>
    <h1>Pi EINK Frame Server</h1>
    <p>Display things accurately (ish)</p>
</header>
<main class="container">
  <form hx-encoding="multipart/form-data" enctype='multipart/form-data'>
    <fieldset class="grid">
      <div>
        <fieldset>
          <legend>Target Palette</legend>
          {% for m in palettes %}
          <input type="radio" id="palette-{{m}}" name="palette" value="{{m}}"
                                                                {%- if loop.first %} checked {% endif %}>
          <label htmlFor="palette-{{m}}">{{m}}</label>
          {% endfor %}
          </fieldset>
        <small> "Default" uses a real-life based color scheme. "Simple" uses an idealized palette.</small>
      </div>

      <div>
        <label for="dither-select">Dither Method</label>
        <select id="dither-select" name="dither_method">
          {% for m in dither_methods %}
          <option {%if loop.first %} selected {% endif %} value="{{m}}">{{m}}</option>
          {% endfor %}
        </select>
        <small>
          Different dither methods produce better results for certain images.
        </small>
      </div>
    </fieldset>

    <label for="image-input">Image</label>
    <input type="file" name="image" id="image-input" accept="image/*">
    <small>Images will be resized to <code>800x480</code>, which may stretch the image.</small>

    <div class="grid">
      <button hx-post="/api/setimage" hx-disabled-elt="this">Set Display</button>
      <button class="secondary"
              hx-post="/app/preview"
              hx-disabled-elt="this"
              hx-target="#preview-area"
              hx-swap="outerHTML"
              >
        Preview
      </button>
    </div>
  </form>
  <div id="preview-area" hidden></div>
</main>

<footer class="container-fluid">
  pi-frame-server Version {{ version }}
</footer>

{% endblock %}