{% load i18n l10n inline_formset %}
{% localize off %}<script type="text/javascript">
    var html = $("#message_list").html();
    {% if MESSAGES and AJAX %}{% for message, message_type in MESSAGES %}
    html += '<div class="alert alert-{{message_type}} alert-dismissible fade show"';
    html += '   role="alert">';
    html += '     {{message}}';
    html += '     <button type="button" class="close" data-dismiss="alert"';
    html += '             aria-label="Close">';
    html += '         <span aria-hidden="true">&times;</span>';
    html += '     </button>';
    html += ' </div>';
    {% endfor %}{% endif %}
    $("#message_list").html(html);

    $("#import-list").find('select').prop('disabled', true);
    $("#import-list").find('input').prop('disabled', true);

    var import_table_update_import_ids = new Array();
    var import_table_import_state = new Array();
    {% for import in object_list %}{% if import.state == 'IP' or import.state == 'PP' %}
    import_table_update_import_ids.push("{{import.import_id}}");
    {% if not import.importer_type.type_label %}{# group #}{% for sub in import.import_list %}
    import_table_update_import_ids.push("{{sub.id}}");{% endfor %}
    {% endif %}{% endif %}{% endfor %}
    var need_refresh = false;
    if (import_table_update_import_ids.length) need_refresh = true;

    $(document).ready(function(){
        if (need_refresh) setInterval(function(){
            import_table_update_import_list(import_table_update_import_ids)
        }, 3 * 1000);
    });
</script>
<h2>{{page_name}}</h2>
<div class='form' id="import-list">
    {% if not object_list %}
    <p>{% trans "No pending imports." %}</p>
    {% else %}
    <table class="table table-striped">
        <tr>
            <th>{% trans "Name" %}</th>
            <th>{% trans "Type" %}</th>
            <th>{% trans "Status" %}</th>
            <th>{% trans "Action" %}</th>
            <th>{% trans "Files" context "file" %}</th>
            <th>{% trans "Pré-import form / matching" %}</th>
            <th>{% trans "Diagnostic files" %}</th>
        </tr>
        {% for import in object_list %}
        <tr id="import-{{import.import_id}}"
             class='import-row{% if import.error_file %}-error{% endif %}{% if import.pk in refreshed_pks %} bg-info{% endif %}'>
            <td>
                <strong>{{import.name|default:"-"}}</strong><br>
                <small><i class="fa fa-calendar" aria-hidden="true"></i>&nbsp; {{import.creation_date|date:"DATE_FORMAT"}} {{import.creation_date|time:"H:i"}} - {% if import.end_date %}{{import.end_date|date:"DATE_FORMAT"}} {{import.end_date|time:"H:i"}}{% endif %}</small><br>
                <small><i class="fa fa-user" aria-hidden="true"></i>&nbsp; {{import.user}}</small>
            </td>
            <td>
                {{import.importer_type}} ({% if import.importer_type.type_label %}{% trans import.importer_type.type_label %}{% else %}{% trans "Group" %}{% endif %})
            </td>
            <td id="status-{{import.import_id}}">
                {{import.status}}
            </td>
            <td>
                <select class="form-control"
                        id='import-action-{{import.import_id}}'
                        name='import-action-{{import.import_id}}'>
                    <option value=''>--------</option>
                    {% for action, lbl in import.get_actions %}
                    <option value='{{action}}'>{{lbl}}</option>
                    {% endfor%}
                </select>
            </td>
            <td>
                {% if import.imported_file %}
                <a href='{{import.imported_file.url}}'>{% trans "Source" %}</a>
                {% if import.imported_images %}
                - <a href="{{ import.imported_images.url }}">{% trans "Media" %}</a>
                {% endif %}
                {% elif import.archive_file %}
                <a href='{{import.archive_file.url}}'>{% trans "Archive" context "name" %}</a>
                {% endif %}
            </td>
            <td>
                {% if import.need_matching %}
                <a href='{% url "import_link_unmatched" import.pk %}'>{% trans "Make match" %}</a>
                {% endif %}
            </td>
            <td style="white-space: nowrap;">{% if import.error_file %}
                <i class="text-danger fa fa-exclamation-triangle" aria-hidden="true"></i> <a href='{{import.error_file.url}}'>{% trans "Error" %}</a>
                <br>{% endif %}
            {% if import.result_file %}
                <a href='{{import.result_file.url}}'>{% trans "Result" %}</a>
                <br>{% endif %}
            {% if import.match_file %}
                <a href='{{import.match_file.url}}'>{% trans "Match" %}</a>
                {% endif %}
            </td>
        </tr>
        {% if import.importer_type.type_label %}
        <tr></tr>{# only for even and odd style #}
        <tr id="progress-display-{{import.id}}"{% if sub.state != 'IP' and sub.state != 'PP' %} style="display:none"{% endif %}>
            <td colspan="11">
                <div class="progress bg-secondary">
                  <div id="progress-{{import.id}}" class="progress-bar progress-bar-striped {% if import.state == 'IP'%}bg-success{% else %}bg-info{% endif %} progress-bar-animated" role="progressbar"
                       aria-valuenow="{{import.current_line}}" aria-valuemin="0" aria-valuemax="{{import.number_of_line}}" style="width: {{import.progress_percent}}%">
                       &nbsp;{{import.current_line}} / {{import.number_of_line}}
                       </div>
                </div>
            </td>
        </tr>
        {% endif %}
        {% if not import.importer_type.type_label %} {# group #}
        {% for sub in import.import_list %}
        <tr id="import-{{sub.import_id}}">
            <td></td>
            <td>{{sub.importer_type}}</td>
            <td id="status-{{sub.import_id}}">{{sub.status}}</td>
            <td></td>
            <td>{% if sub.imported_file %}
                <a href='{{sub.imported_file.url}}'>{% trans "Source" %}</a>
                {% if sub.imported_images %}
                - <a href="{{ sub.imported_images.url }}">{% trans "Media" %}</a>
                {% endif %}
            {% endif %}</td>
            <td>{% if sub.need_matching %}
                <a href='{% url "import_link_unmatched" sub.pk %}'>{% trans "Make match" %}</a>
            {% endif %}</td>
            <td style="white-space: nowrap;">{% if sub.error_file %}
                <i class="text-danger fa fa-exclamation-triangle" aria-hidden="true"></i> <a href='{{sub.error_file.url}}'>{% trans "Error" %}</a>
                <br>{% endif %}
            {% if sub.result_file %}
                <a href='{{sub.result_file.url}}'>{% trans "Result" %}</a>
                <br>{% endif %}
            {% if sub.match_file %}
                <a href='{{sub.match_file.url}}'>{% trans "Match" %}</a>
                {% endif %}
            </td>
        </tr>
        <tr></tr>{# only for even and odd style #}
        <tr id="progress-display-{{sub.id}}"{% if sub.state != 'IP' and sub.state != 'PP' %} style="display:none"{% endif %}>
            <td colspan="11">
                <div class="progress bg-secondary">
                    <div id="progress-{{sub.id}}" class="progress-bar progress-bar-striped {% if sub.state == 'IP'%}bg-success{% else %}bg-info{% endif %} progress-bar-animated" role="progressbar"
                         aria-valuenow="{{sub.current_line}}" aria-valuemin="0" aria-valuemax="{{sub.number_of_line}}" style="width: {{sub.progress_percent}}%">
                        &nbsp;{{sub.current_line}} / {{sub.number_of_line}}
                    </div>
                </div>
            </td>
        </tr>
        {% endfor %}
        {% endif %}
        {% endfor %}
    </table>
    {% endif %}
</div>
{% endlocalize %}