{% extends "generic/object.html" %}
{% load form_helpers %}

{% block content %}
<div class="row">
  <div class="col col-md-8 offset-md-2">

    {# ── Upload form ── #}
    <div class="card mb-4">
      <div class="card-header">
        <strong>Import DHCPv{{ dhcp_version }} Reservations from CSV</strong>
      </div>
      <div class="card-body">
        <p class="text-muted mb-3">
          Upload a UTF-8 CSV file.
          Lines starting with <code>#</code> are treated as comments and ignored.
        </p>

        {# Columns are matched by header name, in any order. #}
        {% if dhcp_version == 4 %}
        <div class="alert alert-info" role="alert">
          <strong>v4 columns</strong> (matched by header name, any order):<br>
          Required: <code>subnet-id</code> and exactly one identifier column —
          <code>hw-address</code>, <code>client-id</code>, <code>circuit-id</code>,
          <code>flex-id</code> or <code>remote-id</code>.<br>
          Optional: <code>ip-address</code>, <code>hostname</code>.<br>
          <small>Example: <code>subnet-id,hw-address,ip-address,hostname</code> →
          <code>1,aa:bb:cc:dd:ee:ff,192.168.1.100,host1.example.com</code></small><br>
          <small>Leave <code>ip-address</code> empty to reserve only a hostname, options or client classes.</small>
        </div>
        {% else %}
        <div class="alert alert-info" role="alert">
          <strong>v6 columns</strong> (matched by header name, any order):<br>
          Required: <code>subnet-id</code> and exactly one identifier column —
          <code>duid</code>, <code>hw-address</code>, <code>client-id</code>,
          <code>flex-id</code> or <code>remote-id</code>.<br>
          Optional: <code>ip-addresses</code>, <code>prefixes</code>, <code>hostname</code>.<br>
          <small>Both <code>ip-addresses</code> and <code>prefixes</code> take several values per host:
          separate them with a semicolon inside the cell.</small><br>
          <small>Example: <code>subnet-id,duid,ip-addresses,hostname</code> →
          <code>10,00:01:02:03:04:05,2001:db8::100;2001:db8::101,v6host.example.com</code></small><br>
          <small>A host may delegate prefixes without reserving an address — fill in
          <code>prefixes</code> and leave <code>ip-addresses</code> empty.</small>
        </div>
        {% endif %}

        <form method="post" enctype="multipart/form-data">
          {% csrf_token %}
          {% render_form form %}
          <div class="text-end mt-3">
            <a href="{{ return_url }}" class="btn btn-secondary me-2">Cancel</a>
            <button type="submit" class="btn btn-primary">
              <i class="mdi mdi-upload" aria-hidden="true"></i> Import
            </button>
          </div>
        </form>
      </div>
    </div>

    {# ── Results summary ── #}
    {% if result is not None %}
    <div class="card">
      <div class="card-header">
        <strong>Import Results</strong>
      </div>
      <div class="card-body">
        <div class="row text-center mb-3">
          <div class="col">
            <div class="display-6 text-success">{{ result.created }}</div>
            <div class="text-muted small">Created</div>
          </div>
          <div class="col">
            <div class="display-6 text-warning">{{ result.skipped }}</div>
            <div class="text-muted small">Skipped (already exist)</div>
          </div>
          <div class="col">
            <div class="display-6 text-danger">{{ result.errors }}</div>
            <div class="text-muted small">Errors</div>
          </div>
          <div class="col">
            <div class="display-6">{{ result.total }}</div>
            <div class="text-muted small">Total rows</div>
          </div>
        </div>

        {% if result.error_rows %}
        <h6 class="mt-3">Error Details</h6>
        <table class="table table-sm table-bordered">
          <thead>
            <tr>
              <th>Row data</th>
              <th>Error</th>
            </tr>
          </thead>
          <tbody>
            {% for item in result.error_rows %}
            <tr class="table-danger">
              <td><code>{{ item.row }}</code></td>
              <td>{{ item.error }}</td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
        {% endif %}
      </div>
    </div>
    {% endif %}

  </div>
</div>
{% endblock %}