{% extends 'layout.html' %}
{% load humanize %}
{% block content %}
<div class="block">
    <div class="level">
        <h1 class="title level-left">
            Edit "{{ book.title }}"
        </h1>
        <div class="level-right">
            <a href="/book/{{ book.id }}">
                <span class="edit-link icon icon-close">
                    <span class="is-sr-only">Close</span>
                </span>
            </a>
        </div>
    </div>
    <div>
        <p>Added: {{ book.created_date | naturaltime }}</p>
        <p>Updated: {{ book.updated_date | naturaltime }}</p>
        <p>Last edited by: <a href="{{ book.last_edited_by.remote_id }}">{{ book.last_edited_by.display_name }}</a></p>
    </div>
</div>

{% if form.non_field_errors %}
<div class="block">
    <p class="notification is-danger">{{ form.non_field_errors }}</p>
</div>
{% endif %}

<form class="block" name="edit-book" action="/edit-book/{{ book.id }}" method="post" enctype="multipart/form-data">
    {% csrf_token %}
    <input type="hidden" name="last_edited_by" value="{{ request.user.id }}">
    <div class="columns">
        <div class="column">
            <h2 class="title is-4">Metadata</h2>
            <p class="fields is-grouped"><label class="label" for="id_title">Title:</label> {{ form.title }} </p>
            {% for error in form.title.errors %}
            <p class="help is-danger">{{ error | escape }}</p>
            {% endfor %}
            <p class="fields is-grouped"><label class="label" for="id_subtitle">Subtitle:</label> {{ form.subtitle }} </p>
            {% for error in form.subtitle.errors %}
            <p class="help is-danger">{{ error | escape }}</p>
            {% endfor %}
            <p class="fields is-grouped"><label class="label" for="id_description">Description:</label> {{ form.description }} </p>
            {% for error in form.description.errors %}
            <p class="help is-danger">{{ error | escape }}</p>
            {% endfor %}
            <p class="fields is-grouped"><label class="label" for="id_series">Series:</label> {{ form.series }} </p>
            {% for error in form.series.errors %}
            <p class="help is-danger">{{ error | escape }}</p>
            {% endfor %}
            <p class="fields is-grouped"><label class="label" for="id_series_number">Series number:</label> {{ form.series_number }} </p>
            {% for error in form.series_number.errors %}
            <p class="help is-danger">{{ error | escape }}</p>
            {% endfor %}
            <p class="fields is-grouped"><label class="label" for="id_first_published_date">First published date:</label> {{ form.first_published_date }} </p>
            {% for error in form.first_published_date.errors %}
            <p class="help is-danger">{{ error | escape }}</p>
            {% endfor %}
            <p class="fields is-grouped"><label class="label" for="id_published_date">Published date:</label> {{ form.published_date }} </p>
            {% for error in form.published_date.errors %}
            <p class="help is-danger">{{ error | escape }}</p>
            {% endfor %}
        </div>

        <div class="column">
            <div class="columns">
                <div class="column is-narrow">
                    {% include 'snippets/book_cover.html' with book=book size="small" %}
                </div>
                <div class="column is-narrow">
                    <div class="block">
                        <h2 class="title is-4">Cover</h2>
                        <p>{{ form.cover }} </p>
                        {% for error in form.cover.errors %}
                        <p class="help is-danger">{{ error | escape }}</p>
                        {% endfor %}
                    </div>
                </div>
            </div>

            <div class="block">
                <h2 class="title is-4">Physical Properties</h2>
                <p class="fields is-grouped"><label class="label" for="id_physical_format">Format:</label> {{ form.physical_format }} </p>
                {% for error in form.physical_format.errors %}
                <p class="help is-danger">{{ error | escape }}</p>
                {% endfor %}
                {% for error in form.physical_format.errors %}
                <p class="help is-danger">{{ error | escape }}</p>
                {% endfor %}

                <p class="fields is-grouped"><label class="label" for="id_pages">Pages:</label> {{ form.pages }} </p>
                {% for error in form.pages.errors %}
                <p class="help is-danger">{{ error | escape }}</p>
                {% endfor %}
            </div>

            <div class="block">
                <h2 class="title is-4">Book Identifiers</h2>
                <p class="fields is-grouped"><label class="label" for="id_isbn_13">ISBN 13:</label> {{ form.isbn_13 }} </p>
                {% for error in form.isbn_13.errors %}
                <p class="help is-danger">{{ error | escape }}</p>
                {% endfor %}
                <p class="fields is-grouped"><label class="label" for="id_isbn_10">ISBN 10:</label> {{ form.isbn_10 }} </p>
                {% for error in form.isbn_10.errors %}
                <p class="help is-danger">{{ error | escape }}</p>
                {% endfor %}
                <p class="fields is-grouped"><label class="label" for="id_openlibrary_key">Openlibrary key:</label> {{ form.openlibrary_key }} </p>
                {% for error in form.openlibrary_key.errors %}
                <p class="help is-danger">{{ error | escape }}</p>
                {% endfor %}
                <p class="fields is-grouped"><label class="label" for="id_librarything_key">OCLC Number:</label> {{ form.oclc_number }} </p>
                {% for error in form.oclc_number.errors %}
                <p class="help is-danger">{{ error | escape }}</p>
                {% endfor %}
                <p class="fields is-grouped"><label class="label" for="id_asin">ASIN:</label> {{ form.asin }} </p>
                {% for error in form.ASIN.errors %}
                <p class="help is-danger">{{ error | escape }}</p>
                {% endfor %}
            </div>
        </div>
    </div>

    <div class="block">
        <button class="button is-primary" type="submit">Save</button>
        <a class="button" href="/book/{{ book.id }}">Cancel</a>
    </div>
</form>

{% endblock %}