{% extends 'layout.html' %}
{% load i18n %}
{% load humanize %}
{% load static %}

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

{% block content %}{% spaceless %}
<header class="block">
    <h1 class="title">{% trans "Import Status" %}</h1>
    <a href="{% url 'import' %}" class="has-text-weight-normal help subtitle is-link">{% trans "Back to imports" %}</a>

    <div class="block">
        <dl>
            <dt class="is-pulled-left mr-5">{% trans "Import started:" %}</dt>
            <dd>{{ job.created_date | naturaltime }}</dd>
        </dl>
    </div>

    {% if not complete %}
    <div class="box is-processing">
        <div class="block">
            <span class="icon icon-spinner is-pulled-left" aria-hidden="true"></span>
            <span>{% trans "In progress" %}</span>
            <span class="is-pulled-right">
                <a href="" class="button is-small">{% trans "Refresh" %}</a>
            </span>
        </div>
        <div class="is-flex">
            <progress class="progress is-success is-medium mr-2" value="{{ percent }}" max="100">{{ percent }}%</progress>
            <span>{{ percent }}%</span>
        </div>
    </div>
    {% endif %}

    {% if complete and fail_count %}
    <div class="notification is-warning">
        {% blocktrans trimmed count counter=fail_count with display_counter=fail_count|intcomma %}
            {{ display_counter }} item failed to import.
            {% plural %}
            {{ display_counter }} items failed to import.
        {% endblocktrans %}
        <a href="{% url 'import-troubleshoot' job.id %}">
            {% trans "View and troubleshoot failed items." %}
        </a>
    </div>
    {% endif %}
</header>

<div class="block">
    <h2 class="title is-4">
        {% block page_title %}
        {% trans "Your Import" %}
        {% endblock %}
    </h2>
    {% block actions %}{% endblock %}
    <table class="table">
        <tr>
            <th>
                {% trans "Row" %}
            </th>
            <th>
                {% trans "Title" %}
            </th>
            <th>
                {% trans "Author" %}
            </th>
            <th>
                {% trans "Book" %}
            </th>
            <th>
                {% trans "Status" %}
            </th>
        </tr>
        {% for item in items %}
        <tr>
            <td>
                {{ item.index }}
            </td>
            <td>
                {{ item.data.Title }}
            </td>
            <td>
                {{ item.data.Author }}
            </td>
            <td>
                {% if item.book %}
                <a href="{{ item.book.local_path }}">
                {% include 'snippets/book_cover.html' with book=item.book cover_class='is-h-s' size='small' %}
                </a>
                {% endif %}
            </td>
            <td>
                {% if item.book %}
                <span class="icon icon-check has-text-success" aria-hidden="true"></span>
                <span class="is-sr-only-mobile">{% trans "Imported" %}</span>

                {% elif item.fail_reason %}
                <span class="icon icon-x has-text-danger" aria-hidden="true"></span>
                <span class="is-sr-only-mobile">
                    {{ item.fail_reason }}
                </span>
                {% else %}
                <span class="icon icon-dots-three" aria-hidden="true"></span>
                <span class="is-sr-only-mobile">{% trans "Pending" %}</span>
                {% endif %}
            </td>
        </tr>
        {% endfor %}
    </table>
</div>

<div>
    {% include 'snippets/pagination.html' with page=items %}
</div>
{% endspaceless %}{% endblock %}

{% block scripts %}
<script src="{% static "js/check_all.js" %}?v={{ js_cache }}"></script>
{% endblock %}