{% extends 'generic/object_create.html' %}
{% load form_helpers %}

{% block title %}Import Stock Cables{% endblock title %}

{% block form %}
    {% if errors %}
        <div class="card border-danger">
            <div class="card-header bg-danger-subtle border-danger text-body"><strong>Nothing was imported</strong></div>
            <ul class="list-group list-group-flush">
                {% for line, message in errors %}
                    <li class="list-group-item"><strong>Line {{ line }}:</strong> {{ message }}</li>
                {% endfor %}
            </ul>
        </div>
    {% endif %}
    <div class="card">
        <div class="card-header"><strong>CSV</strong></div>
        <div class="card-body">
            {% render_field form.csv_data %}
            {% render_field form.csv_file %}
        </div>
    </div>
    <div class="card">
        <div class="card-header"><strong>Columns</strong></div>
        <div class="card-body">
            <p>
                The first line names the columns, one stock cable per line after it. Only
                <code>cable_number</code> is required (<code>name</code>, the 1.x column name, also works).
            </p>
            <p><code>{{ columns|join:", " }}</code></p>
            <ul>
                <li><code>type</code>: Nautobot cable type value such as <code>smf</code> or <code>cat6</code>.</li>
                <li><code>cable_type</code>: name of a breakout cable type, for example <code>1x4 Breakout</code>.</li>
                <li><code>plug</code>: one of the choices of the custom field Plug.</li>
                <li><code>length</code> needs <code>length_unit</code> (<code>m</code>, <code>cm</code>, <code>ft</code>, <code>in</code>).</li>
                <li><code>owner</code>, <code>supplier</code> and <code>storage_rack</code>: name or id.</li>
                <li>The import is all or nothing.</li>
            </ul>
        </div>
    </div>
{% endblock form %}

{% block buttons %}
    <button type="submit" name="_import" class="btn btn-primary">Import</button>
    <a href="{{ return_url }}" class="btn btn-secondary">Cancel</a>
{% endblock buttons %}