{% extends 'manuels/add_item.html' %}

{% load bootstrap4 %}
{% load static %}

{% block form %}
    <div class="form-row">
        <div class="col-lg-6">
            {% if form.levels %}
                {% bootstrap_field form.levels %}
            {% elif form.level %}
                {% bootstrap_field form.level %}
            {% endif %}
        </div>
        <div class="col-lg-6">
            {% bootstrap_field form.teacher %}
            {% bootstrap_field form.field %}
        </div>
    </div>
    <div class="form-row">
        <div class="col-lg-6">
            <div class="custom-control custom-checkbox">
                <input type="checkbox" class="custom-control-input" id="{{ form.no_book.auto_id }}">
                <label class="custom-control-label" for="{{ form.no_book.auto_id }}">{{ form.no_book.label }}</label>
                <small class="form-text text-muted">
                    {{ form.no_book.help_text|safe }}
                </small>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="custom-control custom-checkbox">
                <input type="checkbox" class="custom-control-input" id="{{ form.see_later.auto_id }}">
                <label class="custom-control-label" for="{{ form.see_later.auto_id }}">{{ form.see_later.label }}</label>
                <small class="form-text text-muted">
                    {{ form.see_later.help_text|safe }}
                </small>
            </div>
        </div>
    </div>
    <div class="form-row">
        <div class="col-12">
            <div class="form-group">
                {% bootstrap_label content=form.isbn.label label_for=form.isbn.auto_id %}
                <div class="input-group">
                    <input name="isbn" maxlength="20"
                           class="form-control"
                           placeholder="{{ form.isbn.label }}"
                           required="" id="{{ form.isbn.auto_id }}" type="text">
                    <div class="input-group-append">
                        <button class="btn btn-outline-secondary" type="button" id="id_isbn_button">
                            Chercher sur Decitre
                        </button>
                    </div>
                </div>
                <div class="invalid-feedback" id="id_isbn_invalid_feedback">
                    Erreur lors de la recherche. Il se peut que le livre n'existe pas dans la base de connaissance de
                    Decitre ou que vous ayez mal saisi l'ISBN.
                    Veuillez saisir les informations du livre à la main.<br>
                    Données techniques : <span id="id_isbn_error_text"></span>
                </div>
                <small class="form-text text-muted">
                    {{ form.isbn.help_text|safe }}
                </small>
            </div>
        </div>
    </div>
    <div class="form-row">
        <div class="col-lg-4">
            {% bootstrap_field form.title %}
            {% bootstrap_field form.authors %}
        </div>
        <div class="col-lg-4">
            {% bootstrap_field form.publication_year %}
            {% bootstrap_field form.price %}
        </div>
        <div class="col-lg-4">
            {% bootstrap_field form.editor %}
            {% bootstrap_field form.other_editor %}
        </div>
    </div>
    <div class="form-row">
        <div class="col-12">
            {% bootstrap_field form.previously_acquired %}
        </div>
    </div>
    <div class="form-row">
        <div class="col-12">
            {% bootstrap_field form.comments %}
        </div>
    </div>
    {% if form.add_another %}
        <div class="form-row">
            <div class="col-12">
                {% bootstrap_field form.add_another %}
            </div>
        </div>
    {% endif %}
{% endblock %}

{% block end_js %}
    <script src="{% static 'manuels/no_book.js' %}"></script>
    <script src="{% static 'manuels/fetch-isbn.js' %}"></script>
{% endblock %}