{% extends 'admin/model/list.html' %}

{% block body %}
{% if saved_searches is defined %}
<div class="d-flex align-items-center mb-2" style="gap: 8px;">
  <strong style="margin-right: 4px;">
    <i class="fa fa-bookmark"></i> Saved Searches:
  </strong>
  {% if saved_searches %}
    {% for preset in saved_searches %}
      <div class="btn-group btn-group-sm" role="group">
        <a href="{{ preset.path }}{% if preset.query_string %}?{{ preset.query_string }}{% endif %}"
           class="btn btn-sm btn-outline-primary"
           title="{{ preset.owner_email }}{% if preset.shared %} (shared){% endif %}">
          {{ preset.name }}{% if preset.shared %} <i class="fa fa-share-alt fa-xs"></i>{% endif %}
        </a>
        {% if preset.owner_email == current_user.email or current_user.global_admin %}
        <form method="POST" action="{{ url_for('.delete_preset', preset_id=preset.id) }}"
              style="display:inline; margin:0;"
              onsubmit="return confirm('Delete preset &quot;{{ preset.name }}&quot;?');">
          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
          <button type="submit" class="btn btn-sm btn-outline-danger"
                  title="Delete this preset"
                  style="padding: 0.15rem 0.4rem;">
            <i class="fa fa-times"></i>
          </button>
        </form>
        {% endif %}
      </div>
    {% endfor %}
  {% else %}
    <span class="text-muted" style="font-size: 0.9rem;">none yet</span>
  {% endif %}
  {% if cmdb_mode and not user_readonly %}
  <button type="button" class="btn btn-sm btn-outline-primary"
          data-toggle="modal" data-target="#bulkAddModal"
          title="Add multiple hosts at once by pasting a CSV or a plain hostname list"
          style="margin-left: auto;">
    <i class="fa fa-plus-square"></i> Bulk add hosts
  </button>
  <button type="button" class="btn btn-sm btn-outline-secondary"
          data-toggle="modal" data-target="#csvImportModal"
          title="Import hosts from a CSV file (round-trips the Export CSV format)">
    <i class="fa fa-upload"></i> Import CSV
  </button>
  {% endif %}
  <a href="{{ url_for('.export_csv') }}{% if request.query_string %}?{{ request.query_string.decode('utf-8') }}{% endif %}"
     class="btn btn-sm btn-outline-secondary"
     title="Download the currently filtered hosts as CSV (uses the configured export label/inventory fields)"
     {% if not cmdb_mode %}style="margin-left: auto;"{% endif %}>
    <i class="fa fa-download"></i> Export CSV
  </a>
  <button type="button" class="btn btn-sm btn-outline-secondary"
          data-toggle="modal" data-target="#savePresetModal">
    <i class="fa fa-plus"></i> Save current filter
  </button>
</div>

<div class="modal fade" id="savePresetModal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <form method="POST" action="{{ url_for('.save_preset') }}">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <input type="hidden" name="path" value="{{ request.path }}">
        <input type="hidden" name="query_string" value="{{ request.query_string.decode('utf-8') }}">
        <div class="modal-header">
          <h5 class="modal-title">Save filter as preset</h5>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        <div class="modal-body">
          <div class="form-group">
            <label for="savePresetName">Name</label>
            <input type="text" class="form-control" id="savePresetName"
                   name="name" required maxlength="120"
                   placeholder="e.g. Stale prod hosts">
          </div>
          <div class="form-check">
            <input class="form-check-input" type="checkbox" id="savePresetShared"
                   name="shared">
            <label class="form-check-label" for="savePresetShared">
              Share with other operators
            </label>
          </div>
          <p class="text-muted mt-2" style="font-size: 0.85rem;">
            Captures the current filters, search and sort. Re-opening the
            preset replays the URL exactly as you saved it.
          </p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
          <button type="submit" class="btn btn-primary">Save</button>
        </div>
      </form>
    </div>
  </div>
</div>
{% endif %}
{{ super() }}

{# Quick-search scope options — moved into the search form by the JS in
   the tail block. When a search term is present, these toggles widen
   the search to also cover Objects and/or the Archive. #}
{% set _scope_active = request.args.get('search') and ((request.args.get('inc_objects') == '1') or (request.args.get('inc_archive') == '1')) %}
<span id="quick-search-scope" style="display:none;">
  <div class="dropdown ml-2">
    <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button"
            id="searchOptionsToggle" data-toggle="dropdown"
            aria-haspopup="true" aria-expanded="false"
            title="Widen the quick search to also cover Objects and/or the Archive">
      <i class="fa fa-sliders-h"></i> Search options{% if _scope_active %}
      <span class="badge badge-primary">on</span>{% endif %}
    </button>
    <div class="dropdown-menu dropdown-menu-right p-2" aria-labelledby="searchOptionsToggle"
         style="min-width: 15rem;">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="incObjects"
               name="inc_objects" value="1"
               {% if request.args.get('inc_objects') == '1' %}checked{% endif %}>
        <label class="form-check-label" for="incObjects">
          Also search Objects
        </label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="incArchive"
               name="inc_archive" value="1"
               {% if request.args.get('inc_archive') == '1' %}checked{% endif %}>
        <label class="form-check-label" for="incArchive">
          Also search Archive
        </label>
      </div>
      <small class="text-muted d-block mt-1">
        Matches are tagged with where they live.
      </small>
    </div>
  </div>
</span>

<div class="modal fade" id="setTemplateModal" tabindex="-1" role="dialog"
     aria-labelledby="setTemplateModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <form method="POST" action="{{ url_for('.process_template_assignment') }}">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <input type="hidden" name="host_ids" id="setTemplateHostIds" value="">
        <input type="hidden" name="return_to" value="{{ request.full_path }}">

        <div class="modal-header">
          <h5 class="modal-title" id="setTemplateModalLabel">Set CMDB Template</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>

        <div class="modal-body">
          <p class="text-muted" style="font-size: 0.9rem;">
            <span id="setTemplateHostCount">0</span> host(s) will be assigned.
          </p>
          <div class="form-group mb-0">
            <label for="setTemplateId">Select template</label>
            <select class="form-control" id="setTemplateId" name="template_id" required>
              <option value="">Choose a template…</option>
              {% for template in set_template_choices or [] %}
                <option value="{{ template.id }}">{{ template.hostname }}</option>
              {% endfor %}
            </select>
          </div>
        </div>

        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
          <button type="submit" class="btn btn-primary">Apply Template</button>
        </div>
      </form>
    </div>
  </div>
</div>

<div class="modal fade" id="assignProjectModal" tabindex="-1" role="dialog"
     aria-labelledby="assignProjectModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <form method="POST" action="{{ url_for('.process_project_assignment') }}">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <input type="hidden" name="host_ids" id="assignProjectHostIds" value="">
        <input type="hidden" name="return_to" value="{{ request.full_path }}">

        <div class="modal-header">
          <h5 class="modal-title" id="assignProjectModalLabel">Assign Project</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>

        <div class="modal-body">
          <p class="text-muted" style="font-size: 0.9rem;">
            <span id="assignProjectHostCount">0</span> host(s) will be updated.
          </p>
          <div class="form-group mb-0">
            <label for="assignProjectName">Select project</label>
            <select class="form-control" id="assignProjectName" name="project">
              <option value="">No project (clear assignment)</option>
              {% for project in assign_project_choices or [] %}
                <option value="{{ project }}">{{ project }}</option>
              {% endfor %}
            </select>
          </div>
        </div>

        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
          <button type="submit" class="btn btn-primary">Assign Project</button>
        </div>
      </form>
    </div>
  </div>
</div>

<div class="modal fade" id="setAccountModal" tabindex="-1" role="dialog"
     aria-labelledby="setAccountModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <form method="POST" action="{{ url_for('.process_set_account') }}">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <input type="hidden" name="host_ids" id="setAccountHostIds" value="">
        <input type="hidden" name="return_to" value="{{ request.full_path }}">

        <div class="modal-header">
          <h5 class="modal-title" id="setAccountModalLabel">Set Account</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>

        <div class="modal-body">
          <p class="text-muted" style="font-size: 0.9rem;">
            <span id="setAccountHostCount">0</span> host(s) will be updated.
          </p>
          <div class="form-group mb-0">
            <label for="setAccountName">Select account</label>
            <select class="form-control" id="setAccountName" name="account" required>
              {% if cmdb_account_name %}
                <option value="{{ cmdb_account_name }}">cmdb (CMDB managed)</option>
              {% endif %}
              {% for account in set_account_choices or [] %}
                <option value="{{ account }}">{{ account }}</option>
              {% endfor %}
            </select>
          </div>
        </div>

        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
          <button type="submit" class="btn btn-primary">Set Account</button>
        </div>
      </form>
    </div>
  </div>
</div>

<div class="modal fade" id="bulkLabelModal" tabindex="-1" role="dialog"
     aria-labelledby="bulkLabelModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <form method="POST" action="{{ url_for('.bulk_label_process') }}">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <input type="hidden" name="host_ids" id="bulkLabelHostIds" value="">
        <input type="hidden" name="return_to" value="{{ request.full_path }}">

        <div class="modal-header">
          <h5 class="modal-title" id="bulkLabelModalLabel">Bulk edit labels</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>

        <div class="modal-body">
          <p class="text-muted" style="font-size: 0.9rem;">
            <span id="bulkLabelHostCount">0</span> host(s) selected.
          </p>

          <div class="form-group">
            <label>Action</label>
            <div class="form-check">
              <input class="form-check-input" type="radio" name="mode"
                     id="bulkMode_add" value="add" checked>
              <label class="form-check-label" for="bulkMode_add">
                <strong>Add / overwrite label</strong>
                — write <code>key:value</code> on every selected host.
              </label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="radio" name="mode"
                     id="bulkMode_remove" value="remove">
              <label class="form-check-label" for="bulkMode_remove">
                <strong>Remove label</strong>
                — delete the label with this key from every selected host.
              </label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="radio" name="mode"
                     id="bulkMode_rename" value="rename">
              <label class="form-check-label" for="bulkMode_rename">
                <strong>Rename label key</strong>
                — move the value from the old key to the new key.
              </label>
            </div>
          </div>

          <div class="form-group">
            <label for="bulkLabelKey" id="bulkLabelKeyLabel">Label key</label>
            <input type="text" class="form-control" id="bulkLabelKey"
                   name="label_key" required placeholder="e.g. environment">
          </div>

          <div class="form-group" id="bulkLabelValueGroup">
            <label for="bulkLabelValue">Label value</label>
            <input type="text" class="form-control" id="bulkLabelValue"
                   name="label_value" placeholder="e.g. production">
            <small class="form-text text-muted">
              Overwrites an existing value on hosts that already have this key.
            </small>
          </div>

          <div class="form-group mb-0" id="bulkLabelNewKeyGroup" style="display:none;">
            <label for="bulkLabelNewKey">New label key</label>
            <input type="text" class="form-control" id="bulkLabelNewKey" name="new_key"
                   placeholder="e.g. env">
          </div>
        </div>

        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
          <button type="submit" class="btn btn-primary">Apply</button>
        </div>
      </form>
    </div>
  </div>
</div>

<div class="modal fade" id="copyAsNewModal" tabindex="-1" role="dialog"
     aria-labelledby="copyAsNewModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <form method="POST" action="{{ url_for('.copy_as_new_process') }}">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <input type="hidden" name="source_id" id="copyAsNewSourceId" value="">

        <div class="modal-header">
          <h5 class="modal-title" id="copyAsNewModalLabel">Copy as new</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>

        <div class="modal-body">
          <div class="form-group mb-0">
            <label for="copyAsNewHostname">New hostname</label>
            <input type="text" class="form-control" id="copyAsNewHostname"
                   name="new_hostname" required>
            <small class="form-text text-muted">
              Labels, CMDB fields and assigned templates are cloned. Timestamps
              and sync state are reset.
            </small>
          </div>
        </div>

        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
          <button type="submit" class="btn btn-primary">Create copy</button>
        </div>
      </form>
    </div>
  </div>
</div>

{% if cmdb_mode %}
<div class="modal fade" id="bulkAddModal" tabindex="-1" role="dialog"
     aria-labelledby="bulkAddModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <form method="POST" id="bulkAddForm" action="{{ url_for('.bulk_add_process') }}">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <input type="hidden" name="return_to" value="{{ request.full_path }}">

        <div class="modal-header">
          <h5 class="modal-title" id="bulkAddModalLabel">Bulk add hosts</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>

        <div class="modal-body">
          <div class="form-group">
            <label for="bulkAddText">Hostnames or CSV</label>
            <textarea class="form-control" id="bulkAddText" name="hosts_text"
                      rows="10" required
                      placeholder="One hostname per line, e.g.&#10;web01.example.com&#10;web02.example.com&#10;&#10;— or paste CSV with a header row:&#10;hostname,label_env,inventory_os&#10;db01,production,linux"></textarea>
            <small class="form-text text-muted">
              A plain list creates one host per line. Paste CSV (any line with a
              delimiter) and you get a preview to pick the hostname column first.
              Every extra column becomes a host label;
              <code>inventory_&lt;name&gt;</code> columns go to the inventory.
            </small>
          </div>

          <div class="form-group mb-0">
            <label for="bulkAddTemplateId">Assign template (optional)</label>
            <select class="form-control" id="bulkAddTemplateId" name="template_id">
              <option value="">No template</option>
              {% for template in set_template_choices or [] %}
                <option value="{{ template.id }}">{{ template.hostname }}</option>
              {% endfor %}
            </select>
          </div>
        </div>

        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
          <button type="submit" class="btn btn-primary">Add hosts</button>
        </div>
      </form>
    </div>
  </div>
</div>

<div class="modal fade" id="csvImportModal" tabindex="-1" role="dialog"
     aria-labelledby="csvImportModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <form method="POST" id="csvImportForm" action="{{ url_for('.csv_import') }}"
            enctype="multipart/form-data">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <input type="hidden" name="return_to" value="{{ request.full_path }}">

        <div class="modal-header">
          <h5 class="modal-title" id="csvImportModalLabel">Import hosts from CSV</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>

        <div class="modal-body">
          <div class="form-group mb-0">
            <label for="csvImportFile">CSV file</label>
            <input type="file" class="form-control-file" id="csvImportFile"
                   name="csv_file" accept=".csv,text/csv" required>
            <small class="form-text text-muted">
              After upload you pick the hostname column and assign an optional
              template. Every other column becomes a host label;
              <code>inventory_&lt;name&gt;</code> columns go to the inventory.
            </small>
          </div>
        </div>

        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
          <button type="submit" class="btn btn-primary">Continue</button>
        </div>
      </form>
    </div>
  </div>
</div>

<div class="modal fade" id="csvPreviewModal" tabindex="-1" role="dialog"
     aria-labelledby="csvPreviewModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="csvPreviewModalLabel">Import hosts from CSV — preview</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body" id="csvPreviewBody">
        <!-- filled via AJAX from .csv_import -->
      </div>
    </div>
  </div>
</div>
{% endif %}
{% endblock %}

{% block tail %}
{{ super() }}
<script>
(function() {
  // Attach a syntax cheat-sheet to the search box. We use the native
  // `title` attribute because flask-admin's bootstrap4 layout doesn't
  // initialise Bootstrap tooltips on the search input by default — a
  // plain title keeps the help discoverable on hover without pulling
  // in extra JS.
  var SEARCH_HELP = [
    'Search syntax:',
    '  prod              — substring on hostname / label & inventory values; exact match on label/inventory key',
    '  prod AND web      — both must match (space alone also means AND)',
    '  prod OR stage     — either matches',
    '  NOT archived  /  !archived',
    '  (prod OR stage) AND NOT test',
    '  hostname:web*     — wildcard match against the hostname (h: is short for hostname:)',
    '  h:/^web[0-9]+$/   — slashes make the value a regex (no * / ? globbing)',
    '  env:prod          — value under labels.env or inventory.env',
    '  labels.env:prod   — only labels.env (l.env: and i.cpu: are the short forms)',
    '  basti_test*       — keys starting with basti_test (e.g. basti_test2)',
    '  "foo bar"         — quote to keep spaces and disable * / ?'
  ].join('\n');
  $('input[name="search"]').attr('title', SEARCH_HELP);

  // Move the "Search options" dropdown into the search form so its
  // checkboxes submit together with the search term. Keep the menu open
  // while toggling, and re-run the search whenever a toggle changes
  // (the scope only widens when a term is present).
  (function() {
    var $scope = $('#quick-search-scope');
    var $search = $('input[name="search"]');
    if (!$scope.length || !$search.length) {
      return;
    }
    var $form = $search.closest('form');
    $form.addClass('form-inline').append($scope.children());
    $scope.remove();
    // Bootstrap closes the dropdown on any inner click — stop that so
    // both toggles can be set before the reload.
    $form.on('click', '.dropdown-menu', function(event) {
      event.stopPropagation();
    });
    $form.on('change', 'input[name="inc_objects"], input[name="inc_archive"]',
      function() { $form.submit(); });
  })();

  // The "With selected…" dropdown items call modelActions.execute(name).
  // `modelActions` is created by actions.js which is loaded inside
  // flask-admin's `tail` block — we must hook in this same block,
  // AFTER super(), or the global doesn't exist yet.
  if (typeof modelActions === 'undefined' || !modelActions.execute) {
    return;
  }
  var origExecute = modelActions.execute.bind(modelActions);
  modelActions.execute = function(name) {
    var ids;
    var collectIds = function() {
      var out = [];
      $('input.action-checkbox:checked').each(function() {
        out.push($(this).val());
      });
      return out;
    };

    if (name === 'set_template') {
      ids = collectIds();
      if (ids.length === 0) {
        alert('Please select at least one host.');
        return false;
      }
      $('#setTemplateHostIds').val(ids.join(','));
      $('#setTemplateHostCount').text(ids.length);
      $('#setTemplateModal').modal('show');
      return false;
    }

    if (name === 'assign_project') {
      ids = collectIds();
      if (ids.length === 0) {
        alert('Please select at least one host.');
        return false;
      }
      $('#assignProjectHostIds').val(ids.join(','));
      $('#assignProjectHostCount').text(ids.length);
      $('#assignProjectModal').modal('show');
      return false;
    }

    if (name === 'set_account') {
      ids = collectIds();
      if (ids.length === 0) {
        alert('Please select at least one host.');
        return false;
      }
      $('#setAccountHostIds').val(ids.join(','));
      $('#setAccountHostCount').text(ids.length);
      $('#setAccountModal').modal('show');
      return false;
    }

    if (name === 'bulk_label_edit') {
      ids = collectIds();
      if (ids.length === 0) {
        alert('Please select at least one host.');
        return false;
      }
      $('#bulkLabelHostIds').val(ids.join(','));
      $('#bulkLabelHostCount').text(ids.length);
      $('#bulkLabelModal').modal('show');
      return false;
    }

    if (name === 'copy_as_new') {
      ids = collectIds();
      if (ids.length !== 1) {
        alert('Copy as new requires exactly one selected host.');
        return false;
      }
      $('#copyAsNewSourceId').val(ids[0]);
      var sourceName = $('input.action-checkbox:checked')
        .closest('tr').find('td').eq(1).text().trim();
      $('#copyAsNewHostname').val(sourceName ? sourceName + '-copy' : '');
      $('#copyAsNewModal').modal('show');
      return false;
    }

    return origExecute(name);
  };

  // Toggle Key-Value vs Rename fields in the bulk label modal.
  $(document).on('change', 'input[name="mode"]', function() {
    var mode = $('input[name="mode"]:checked').val();
    $('#bulkLabelValueGroup').toggle(mode === 'add');
    $('#bulkLabelNewKeyGroup').toggle(mode === 'rename');
    $('#bulkLabelKeyLabel').text(mode === 'rename' ? 'Old label key' : 'Label key');
  });

  // Intercept the Copy-as-new ROW icon so it opens the same modal that
  // the "With selected" bulk action opens — we don't want a full-page
  // navigation for something this lightweight. The icon lives in the
  // row-actions column as <a href="…/copy_as_new_form?source_id=…">.
  $(document).on('click', 'a[href*="copy_as_new_form"]', function(ev) {
    ev.preventDefault();
    var href = $(this).attr('href');
    var match = /[?&]source_id=([^&]+)/.exec(href || '');
    if (!match) { return; }
    var sourceId = decodeURIComponent(match[1]);
    $('#copyAsNewSourceId').val(sourceId);
    var rowName = $(this).closest('tr').find('td').eq(1).text().trim();
    $('#copyAsNewHostname').val(rowName ? rowName + '-copy' : '');
    $('#copyAsNewModal').modal('show');
  });

  // CSV import preview: keep everything in a modal instead of navigating
  // to a full page. The upload/paste is POSTed via AJAX; the server
  // returns the preview fragment which we drop into the preview modal.
  function loadCsvPreview(form) {
    var fd = new FormData(form);
    fetch(form.getAttribute('action'), {
      method: 'POST',
      body: fd,
      credentials: 'same-origin',
      headers: { 'X-Requested-With': 'XMLHttpRequest' }
    }).then(function(resp) {
      if (!resp.ok) { throw new Error('Upload failed (' + resp.status + ')'); }
      return resp.text();
    }).then(function(html) {
      $('#csvPreviewBody').html(html);
      $('#bulkAddModal').modal('hide');
      $('#csvImportModal').modal('hide');
      $('#csvPreviewModal').modal('show');
    }).catch(function(err) {
      alert('Could not build the CSV preview: ' + err.message);
    });
  }

  // File upload is always a CSV -> always go through the preview modal.
  $(document).on('submit', '#csvImportForm', function(ev) {
    ev.preventDefault();
    loadCsvPreview(this);
  });

  // Bulk add: a pasted CSV (any line carrying a delimiter) goes through
  // the preview modal; a plain hostname list submits normally.
  $(document).on('submit', '#bulkAddForm', function(ev) {
    var text = $('#bulkAddText').val() || '';
    var firstLine = '';
    var lines = text.split('\n');
    for (var i = 0; i < lines.length; i++) {
      if (lines[i].trim()) { firstLine = lines[i]; break; }
    }
    if (/[,;\t]/.test(firstLine)) {
      ev.preventDefault();
      loadCsvPreview(this);
    }
    // else: plain list -> normal submit, imports and redirects back.
  });

  // Toggling "first row is a header" re-parses server-side and swaps the
  // preview body in place (columns/sample rows change).
  $(document).on('change', '.csv-preview-refresh', function() {
    var form = document.getElementById('csvPreviewForm');
    if (!form) { return; }
    var fd = new FormData(form);
    fetch(form.getAttribute('data-preview-url'), {
      method: 'POST',
      body: fd,
      credentials: 'same-origin',
      headers: { 'X-Requested-With': 'XMLHttpRequest' }
    }).then(function(resp) { return resp.text(); })
      .then(function(html) { $('#csvPreviewBody').html(html); })
      .catch(function(err) {
        alert('Could not refresh the preview: ' + err.message);
      });
  });
})();
</script>
{% endblock %}