{% extends 'import/import_status.html' %}
{% load i18n %}
{% load utilities %}

{% block title %}{% trans "Import Troubleshooting" %}{% endblock %}

{% block page_title %}
{% trans "Review items" %}
{% endblock %}

{% block actions %}
<div class="block">
    <div class="notification content">
        <p>
            {% trans "Approving a suggestion will permanently add the suggested book to your shelves and associate your reading dates, reviews, and ratings with that book." %}
        </p>
    </div>
</div>
{% endblock %}

{% block table_headers %}
<tr>
    <th>
        {% trans "Row" %}
    </th>
    <th>
        {% trans "Title" %}
    </th>
    <th>
        {% trans "ISBN" %}
    </th>
    <th>
        {% trans "Author" %}
    </th>
    <th>
        {% trans "Actions" %}
    </th>
</tr>
{% endblock %}

{% block table_row %}
<tr>
    <td rowspan="2">
        {{ item.index }}
    </td>
    <td>
        {{ item.normalized_data.title }}
    </td>
    <td>
        {{ item.isbn }}
    </td>
    <td>
        {{ item.normalized_data.authors }}
    </td>
    <td class="content is-flex">
        <form class="pr-2" name="approve-{{ item.id }}" method="POST" action="{% url 'import-approve' job.id item.id %}">
            {% csrf_token %}
            <button type="submit" class="button is-success">
                <span class="icon icon-check" aria-hidden="true"></span>
                <span class="is-sr-only-mobile">{% trans "Approve" %}</span>
            </button>
        </form>

        <form name="delete-{{ item.id }}" method="POST" action="{% url 'import-delete' job.id item.id %}">
            {% csrf_token %}
            <button type="submit" class="button is-danger is-light is-outlined">
                <span class="icon icon-x" aria-hidden="true"></span>
                <span class="is-sr-only-mobile">{% trans "Delete" %}</span>
            </button>
        </form>
    </td>
</tr>
<tr>
    <td colspan="5">
        <div class="columns is-mobile">
            {% with guess=item.book_guess %}
            <div class="column is-narrow">
                <a href="{{ item.book.local_path }}" target="_blank">
                    {% include 'snippets/book_cover.html' with book=guess cover_class='is-h-s' size='small' %}
                </a>
            </div>
            <div class="column">
                {% include 'snippets/book_titleby.html' with book=guess %}
            </div>
            {% endwith %}
        </div>
    </td>
</tr>
{% endblock %}