{% extends "adminpanel/record_form.html" %}

{% block extra_panels %}
<div class="panel">
  <div class="panel-h"><h2>Screenshots</h2></div>
  <div class="panel-b">
    {% for img in object.images.all %}
      <div style="display:flex;gap:12px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line-soft)">
        <div class="mono" style="min-width:0;overflow:hidden;text-overflow:ellipsis">{{ img.image.name }}</div>
        <a href="{{ img.image.url }}" target="_blank" rel="noopener" class="btn btn-sm" style="margin-left:auto">View</a>
      </div>
    {% endfor %}
    <div class="field" style="margin-top:14px"><label for="image">Add a screenshot</label>
      <input id="image" name="image" type="file" accept="image/*"></div>
    <p class="hint">The first image is used on the work cards.</p>
  </div>
</div>
{% endblock %}