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

{% block title %}Upload an offer for source - Software Freedom Conservancy{% endblock %}

{% block head %}
  {{ block.super }}
  <script src="https://unpkg.com/htmx.org@1.9.6"></script>
{% endblock %}

{% block content %}
  {{ block.super }}

  <section class="mt4 mb3">
    <h2 class="f2 lh-title ttu mt0">Upload an offer for source</h2>
  </section>

  <form id="form" hx-encoding="multipart/form-data" hx-post="{% url 'usethesource:upload_offer' %}">
    {% csrf_token %}
    {{ form.non_field_errors }}
    <div class="mv2">
      {{ form.vendor.errors }}
      <label for="{{ form.vendor.id_for_label }}" class="db mb1">Vendor:</label>
      {{ form.vendor }}
    </div>
    <div class="mv2">
      {{ form.device.errors }}
      <label for="{{ form.device.id_for_label }}" class="db mb1">Device:</label>
      {{ form.device }}
    </div>
    <div class="mv2">
      {{ form.photo.errors }}
      <label for="{{ form.photo.id_for_label }}" class="db mb1">Photo:</label>
      {{ form.photo }}
    </div>
    <progress id="progress" class="htmx-indicator" value="0" max="100"></progress>
    <div class="mv1">
      <button type="submit" class="white bg-green b db pv2 ph3 bn mb2">Send</button>
    </div>
  </form>

  <script>
   form = document.querySelector('#form');
   let progress = document.querySelector('#progress');
   form.addEventListener('htmx:xhr:progress', function(evt) {
     console.log('progress', evt.detail.loaded/evt.detail.total * 100);
     progress.value = evt.detail.loaded/evt.detail.total * 100;
   });
  </script>
{% endblock content %}