{% extends "base.html" %}
{% block content %}
<h1>Picture</h1>

{% if error %}
<div class="toast error">{{ error }}</div>
{% endif %}

{% if settings.uploaded_filename %}
<div class="card">
  <div class="section-label">Current picture</div>
  <div class="preview-wrap">
    <img class="preview" src="{{ url_for('static', filename='uploads/' + settings.uploaded_filename) }}" alt="current picture">
  </div>
  {% if settings.mode == "url" and settings.image_url %}
  <p class="hint">Downloaded from: {{ settings.image_url }}</p>
  {% endif %}
</div>
{% endif %}

<form method="post" enctype="multipart/form-data">
  <div class="card">
    <div class="section-label">Upload</div>
    <div class="field">
      <label for="image">Choose a file</label>
      <input type="file" id="image" name="image" accept="image/png,image/jpeg,image/gif,image/bmp,image/webp">
      <p class="hint">PNG, JPG, GIF, BMP, or WebP. Replaces whatever's currently set.</p>
    </div>
  </div>

  <div class="card">
    <div class="section-label">Or use a URL</div>
    <div class="field">
      <label for="image_url">Image URL</label>
      <input type="text" id="image_url" name="image_url" placeholder="https://example.com/photo.jpg">
      <p class="hint">Downloaded once and cached -- won't keep re-fetching, so this can't cause the panel to flash on its own. Enter a new URL any time to replace it. Leave both this and the upload above alone to just change the options below.</p>
    </div>
  </div>

  <div class="card">
    <div class="section-label">Display options</div>
    <div class="field">
      <label for="fit">Fit</label>
      <select id="fit" name="fit">
        <option value="cover" {{ "selected" if settings.fit == "cover" }}>Cover -- fill the screen, cropping edges</option>
        <option value="contain" {{ "selected" if settings.fit == "contain" }}>Contain -- show the whole image, letterboxed</option>
      </select>
    </div>
    <label class="checkbox"><input type="checkbox" name="boost_contrast" {{ "checked" if settings.boost_contrast }}> Boost contrast for e-ink</label>
    <label class="checkbox"><input type="checkbox" name="grayscale" {{ "checked" if settings.grayscale }}> Force grayscale</label>
  </div>

  <button type="submit">Save</button>
</form>
{% endblock %}