{% 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 import_cols_headers %}
    <th>
        {% trans "Actions" %}
    </th>
{% endblock %}

{% block index_col %}
    <td rowspan="2">
        {{ item.index }}
    </td>
{% endblock %}

{% block import_cols  %}
    <td>
        <div 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>
        </div>
    </td>
{% endblock %}

{% block action_row %}
<tr>
    <td colspan="6">
        <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 %}