{{define "content"}}
<div class="container-fluid p-3">
  <h4 class="mb-3">Settings</h4>
  <div class="row g-3">
    <div class="col-md-3 col-lg-2">
      {{template "settings_nav" "import"}}
    </div>
    <div class="col-md-9 col-lg-10" style="max-width: 900px">

      {{if .Error}}
      <div class="alert alert-danger">{{.Error}}</div>
      {{else if eq .Kind "assets"}}
      <div class="alert alert-success">Imported {{.Imported}} asset(s), updated {{.Updated}}.{{if .Errs}} {{.Errs}} row(s) had warnings.{{end}}</div>
      {{else if eq .Kind "statuses"}}
      <div class="alert alert-success">Imported {{.Imported}} status(es), updated {{.Updated}}.{{if .Errs}} {{.Errs}} row(s) had warnings.{{end}}</div>
      {{end}}

      <p class="text-body-secondary">
        This page is for bulk, admin-level imports that can reference any folder path (and create missing
        folders along the way). To import assets straight into one specific folder without a Folder column,
        right-click that folder in the Inventory tree and choose <strong>Import CSV&hellip;</strong> instead.
      </p>

      <div class="card mb-4">
        <div class="card-header py-2 fw-semibold">Import Assets</div>
        <div class="card-body">
          <form method="post" action="/settings/import/assets" enctype="multipart/form-data" class="mb-3">
            <div class="mb-3">
              <label class="form-label">CSV File</label>
              <input type="file" class="form-control" name="file" accept=".csv" required>
            </div>
            <div class="form-check mb-3">
              <input class="form-check-input" type="checkbox" name="create_missing_folders" id="createMissingFolders" value="1" checked>
              <label class="form-check-label" for="createMissingFolders">Create missing folders referenced in the Folder column</label>
            </div>
            <button type="submit" class="btn btn-primary">Import Assets</button>
          </form>

          <p class="mb-1 fw-semibold small">Format</p>
          <p class="text-body-secondary small mb-2">
            Required: <code>Name</code>, <code>Item Type</code>, <code>Status</code>. Optional:
            <code>Asset ID</code> (auto-generated if blank; matches an existing asset to update it),
            <code>Folder</code> (a <code>/</code>-separated path such as <code>Main Office/Network</code>),
            <code>Assigned User</code>, <code>Notes</code>, and one <code>cf_&lt;field_key&gt;</code> column
            per custom field (e.g. <code>cf_serial_number</code>).
          </p>
          <div class="table-responsive">
            <table class="table table-sm table-bordered mb-0 small">
              <thead>
                <tr><th>Asset ID</th><th>Name</th><th>Item Type</th><th>Folder</th><th>Status</th><th>Assigned User</th><th>Notes</th><th>cf_serial_number</th></tr>
              </thead>
              <tbody>
                <tr><td></td><td>Core Switch</td><td>Switch</td><td>Main Office/Network</td><td>In Use</td><td></td><td></td><td>SN-12345</td></tr>
                <tr><td>IT-000042</td><td>Front Desk PC</td><td>Desktop</td><td>Main Office/Workstations</td><td>In Use</td><td>jdoe</td><td>Loaner unit</td><td></td></tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>

      <div class="card">
        <div class="card-header py-2 fw-semibold">Import Statuses</div>
        <div class="card-body">
          <form method="post" action="/settings/import/statuses" enctype="multipart/form-data" class="mb-3">
            <div class="mb-3">
              <label class="form-label">CSV File</label>
              <input type="file" class="form-control" name="file" accept=".csv" required>
            </div>
            <button type="submit" class="btn btn-primary">Import Statuses</button>
          </form>

          <p class="mb-1 fw-semibold small">Format</p>
          <p class="text-body-secondary small mb-2">
            Required: <code>Name</code>. Optional: <code>Color</code> (any Bootstrap color name -
            <code>primary</code>, <code>secondary</code>, <code>success</code>, <code>danger</code>,
            <code>warning</code>, <code>info</code>, or <code>dark</code>; defaults to <code>secondary</code>).
            A row whose name matches an existing status updates its color instead of creating a duplicate.
          </p>
          <div class="table-responsive">
            <table class="table table-sm table-bordered mb-0 small">
              <thead><tr><th>Name</th><th>Color</th></tr></thead>
              <tbody>
                <tr><td>In Use</td><td>success</td></tr>
                <tr><td>Awaiting Parts</td><td>warning</td></tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>
{{end}}