{% import "_macros.html" as ui %}
<div class="d-head">
  <div>
    <h2>Add machines</h2>
    <p>Enroll a whole lab from one file.</p>
  </div>
  {% if not standalone %}<button type="button" class="icon-btn" data-close-drawer aria-label="Close">{{ icon('x', 18) }}</button>{% endif %}
</div>
{% if not standalone %}
<div class="tabs">
  {{ ui.drawer_link('/machines/new', 'One machine') }}
  {{ ui.drawer_link('/machines/import', 'Import CSV', 'on') }}
</div>
{% endif %}
<form class="d-form" method="post" action="/machines/import" enctype="multipart/form-data"
      {% if not standalone %}hx-post="/machines/import" hx-encoding="multipart/form-data" hx-target="#drawer-body" hx-swap="innerHTML"{% endif %}>
  <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
  <div class="d-body">
    {% if created %}
    <div class="notice ok">{{ icon('check', 15) }}<span>{{ created|length }} machine{{ 's' if created|length != 1 }} enrolled. Firewall rules are being pushed in the background.</span></div>
    {% endif %}
    {% if errors %}
    <div class="notice bad">{{ icon('alert', 15) }}<span>Nothing was imported. Fix these and upload the file again.</span></div>
    <div class="panel table-wrap" style="margin-bottom:16px">
      <table class="t">
        <thead><tr><th>Line</th><th>Problem</th></tr></thead>
        <tbody>{% for line, message in errors %}<tr><td>{{ line }}</td><td>{{ message }}</td></tr>{% endfor %}</tbody>
      </table>
    </div>
    {% endif %}
    <label class="dropzone" data-dropzone>
      <input type="file" name="file" accept=".csv,text/csv" required>
      {{ icon('upload', 24) }}
      <b data-dropzone-label>Drop a CSV file here, or click to choose one</b>
      <small>One PC per row. The import is all or nothing.</small>
    </label>
    <p class="soft" style="margin-top:14px"><span class="mono">hostname</span> and <span class="mono">ip</span> are required. <a href="/machines/import/template.csv">Download the template</a> for every other column.</p>
  </div>
  <div class="d-foot">
    {% if standalone %}<a class="btn btn-ghost grow" href="/">Back to machines</a>
    {% else %}<button type="button" class="btn btn-ghost grow" data-close-drawer>{{ 'Done' if created else 'Cancel' }}</button>{% endif %}
    <button type="submit" class="btn btn-primary">Import and enroll</button>
  </div>
</form>