{% extends "global/Page.html" %}

{% block title %}
    Offer
{% endblock %}

{% block content %}
    <h1>Make an Offer</h1>
    <form method="post">
        {% csrf_token %}
        <div class="form-group">
            <label for="{{ form.kept.id_for_label }}">Select the amount you want to keep:</label>
            <input type="range" class="vertical-slider" id="{{ form.kept.id_for_label }}" name="{{ form.kept.html_name }}"
                min="{{ form.kept.field.min }}" max="{{ form.kept.field.max }}" step="1" value="{{ form.kept.value }}">
            <p>Selected value: <span id="slider-value">{{ form.kept.value }}</span></p>
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
    </form>

    <script src="{% static 'slider.js' %}"></script>
{% endblock %}