<h2 class="dialog-title">Static image widget</h2>

<section class="card">
  <h2 class="card-title">Image</h2>
  <p class="sub">Upload a PNG, JPEG, GIF, BMP, WEBP, TIFF, or PDF (first
    page only) -- it's decoded once on upload and shown as-is until you
    upload something else.</p>
  <p class="sub" id="static-current-file">
    {% if static_cfg and static_cfg.original_filename %}
      Currently showing: <strong>{{ static_cfg.original_filename }}</strong>
    {% else %}
      No image uploaded yet.
    {% endif %}
  </p>
  <input type="file" id="static-file" accept="image/*,application/pdf">
  <button type="button" class="secondary" id="static-upload" style="margin-top: 8px;">Upload</button>
</section>

<section class="card" style="margin-top: 20px;">
  <h2 class="card-title">Settings</h2>
  <form id="static-config-form">
    <label>Display mode
      <select id="display_mode">
        {% for mode, label in display_mode_labels.items() %}
          <option value="{{ mode }}" {% if static_cfg and static_cfg.display_mode == mode %}selected{% endif %}>{{ label }}</option>
        {% endfor %}
      </select>
    </label>
    <p class="sub" style="margin-top: 8px;">How the image's aspect ratio
      is reconciled with this widget's box: <strong>Crop to fill</strong>
      trims the excess; <strong>Stretch to fill</strong> fills the box
      exactly without cropping (an image with a different aspect ratio
      looks stretched); <strong>Shrink to fit</strong> shows the whole
      image, letterboxed if needed.</p>
    <button type="submit">Save</button>
  </form>
</section>

<section class="card" style="margin-top: 20px;">
  <h2 class="card-title">Preview</h2>
  <p class="sub">How this widget currently renders.</p>
  <img class="preview-img" id="static-preview" alt="Static image preview">
  <button type="button" class="secondary" id="static-preview-refresh">Refresh now</button>
</section>
