{% extends "snippets/create_status/layout.html" %}
{% load utilities %}
{% load status_display %}
{% load i18n %}

{% comment %}
----- Variables
book: the Edition object this status is related to. Required unless the status is a reply
draft: the content of an existing Status object to be edited (used in delete and redraft)
uuid: a unique identifier used to make html "id" attributes unique and clarify javascript controls
{% endcomment %}

{% block pre_content_additions %}
    <div class="field">
        <label class="label" for="id_quote_{{ book.id }}_{{ type }}">
            {% trans "Quote:" %}
        </label>

        <div class="control">
            <textarea
                name="quote"
                class="textarea"
                id="id_quote_{{ book.id }}_{{ type }}"
                placeholder="{% blocktrans with book_title=book.title %}An excerpt from '{{ book_title }}'{% endblocktrans %}"
                required
                {% if not draft %}data-cache-draft="id_quote_{{ book.id }}_{{ type }}"{% endif %}
            >{% firstof draft.raw_quote draft.quote '' %}</textarea>
        </div>
    </div>
    <div class="field">
        <label class="label" for="position_{{ uuid }}">{% trans "Position:" %}</label>
        <div class="field has-addons mb-0">
            <div class="control">
                <div class="select">
                    <select
                        name="position_mode"
                        aria-label="Position mode"
                        {% if not draft %}data-cache-draft="id_position_mode_{{ book.id }}_{{ type }}"{% endif %}
                    >
                        <option
                            value="PG"
                            {% if draft.position_mode == 'PG' or not draft %}selected{% endif %}
                        >
                            {% trans "On page:" %}
                        </option>
                        <option
                            value="PCT"
                            {% if draft.position_mode == 'PCT' %}selected{% endif %}
                        >
                            {% trans "At percent:" %}
                        </option>
                    </select>
                </div>
            </div>
            <div class="control">
                <input
                    aria-label="{% if draft.position_mode == 'PG' %}Page{% else %}Percent{% endif %}"
                    class="input"
                    type="text"
                    name="position"
                    size="3"
                    value="{% firstof draft.position '' %}"
                    id="position_{{ uuid }}"
                    {% if not draft %}data-cache-draft="id_position_{{ book.id }}_{{ type }}"{% endif %}
                >
            </div>
            <div class="button is-static">
                {% trans "to" %}
            </div>
            <div class="control">
                <input
                    aria-label="{% if draft.position_mode == 'PG' %}Page{% else %}Percent{% endif %}"
                    class="input"
                    type="text"
                    name="endposition"
                    size="3"
                    value="{% firstof draft.endposition '' %}"
                    id="endposition_{{ uuid }}"
                    {% if not draft %}data-cache-draft="id_endposition_{{ book.id }}_{{ type }}"{% endif %}
                >
            </div>
        </div>
    </div>
{% endblock %}