{% load i18n %}
<form class="field is-grouped is-small" action="/edit-readthrough" method="POST">
    {% csrf_token %}
    <input type="hidden" name="id" value="{{ readthrough.id }}"/>
    <div class="field">
        <label class="label is-align-self-center mb-0 pr-2" for="progress">{% trans "Progress:" %}</label>
        <div class="field has-addons mb-0">
            <div class="control">
                <input
                 aria-label="{% if readthrough.progress_mode == 'PG' %}Current page{% else %}Percent read{% endif %}"
                 class="input is-small" type="number" min="0"
                 name="progress" size="3" value="{{ readthrough.progress|default:'' }}">
            </div>
            <div class="control select is-small">
                <select name="progress_mode" aria-label="Progress mode">
                    <option value="PG" {% if readthrough.progress_mode == 'PG' %}selected{% endif %}>{% trans "pages" %}</option>
                    <option value="PCT" {% if readthrough.progress_mode == 'PCT' %}selected{% endif %}>{% trans "percent" %}</option>
                </select>
            </div>
            <div class="control">
                <button class="button is-small px-2 is-primary" type="submit">{% trans "Save" %}</button>
            </div>
        </div>
        {% if readthrough.progress_mode == 'PG' and book.pages %}
        <p class="help">{% blocktrans %}of {{ book.pages }} pages{% endblocktrans %}</p>
        {% endif %}
    </div>
</form>