{% extends 'bom/bom-base.html' %}

{% block head-title %}{{ title }}{% endblock %}

{% block bom-menu %}{% endblock %}

{% block content %}
    <style>
        .import-preview { max-width: 900px; }
        .import-preview details { margin: 8px 0; }
        .import-preview summary { cursor: pointer; font-weight: 500; }
        .import-preview table { font-size: 0.9rem; }
        .import-preview .assembly-change { margin-top: 24px; }
        .import-counts { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 16px; }
        .import-count { padding: 4px 12px; border-radius: 16px; background: rgba(128, 128, 128, 0.15); }
        .import-count b { font-variant-numeric: tabular-nums; }
        .import-count.new b { color: #66bb6a; }
        .import-count.updated b { color: #29b6f6; }
        .import-count.removed b { color: #ef5350; }
        .import-count.warning { background: rgba(255, 179, 0, 0.2); }
        .import-confirm-bar { position: sticky; bottom: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
            gap: 8px; margin-top: 24px; padding: 12px 0; border-top: 1px solid rgba(128, 128, 128, 0.3); background: var(--color-background, #fff); }
        .import-confirm-bar .note { margin-right: auto; opacity: 0.75; }
    </style>
    <div class="container-app import-preview">
        {% if notice %}
            <div class="card-panel orange lighten-4">{{ notice }}</div>
        {% endif %}

        {% if errors %}
            <div class="card-panel red lighten-4">
                <p style="margin-top: 0;"><b>Fix {% if errors|length == 1 %}this problem{% else %}these {{ errors|length }} problems{% endif %} and import the file again.</b> Nothing has been saved.</p>
                <ul class="browser-default">
                    {% for error in errors %}<li>{{ error }}</li>{% endfor %}
                </ul>
            </div>
            <a href="{{ return_url }}" class="green lighten-1 btn">Choose another file</a>
        {% else %}
            <div class="import-counts">
                {% for count in change_counts %}
                    <span class="import-count {{ count.kind }}"><b>{{ count.number }}</b> {{ count.label }}</span>
                {% empty %}
                    <span class="import-count">No changes</span>
                {% endfor %}
                {% if warnings %}
                    <span class="import-count warning"><b>{{ warnings|length }}</b> warning{{ warnings|length|pluralize }}</span>
                {% endif %}
            </div>
            {% if preview_summary_component %}<p>{% include preview_summary_component %}</p>{% endif %}
        {% endif %}

        {% if warnings %}
            <div class="card-panel amber lighten-4">
                <ul class="browser-default" style="margin: 0;">
                    {% for warning in warnings %}<li>{{ warning }}</li>{% endfor %}
                </ul>
            </div>
        {% endif %}

        {% if not errors %}
            {% if preview_component %}{% include preview_component %}{% endif %}

            {% if row_items %}
                {% include 'bom/changes/components/change-items.html' with items=row_items %}
            {% endif %}
            {% if changes.unchanged %}
                <p class="grey-text">{{ changes.unchanged }} row{{ changes.unchanged|pluralize:" matches,s match" }} what's already in IndaBOM.</p>
            {% endif %}

            <form class="import-confirm-bar" action="{% url 'bom:import-confirm' %}" method="post">
                {% csrf_token %}
                <span class="note">Nothing is saved until you import.</span>
                <input type="hidden" name="token" value="{{ token }}">
                <input class="btn-flat grey-text" type="submit" name="cancel" value="Cancel"/>
                <input class="green lighten-1 btn" type="submit" name="confirm"
                       value="Import{% if change_count %} {{ change_count }} change{{ change_count|pluralize }}{% endif %}"/>
            </form>
        {% endif %}
    </div>
{% endblock %}