{% extends "base.html" %}
{% from "partials/_macros.html" import empty_row %}
{% block content %}
{% if error %}<div class="error">{{ error }}</div>{% endif %}
{% if flash %}
  <div class="flash flash-{{ flash.kind }}">{{ flash.msg }}</div>
{% endif %}

<h2 class="section-title">Safe</h2>
<p class="modal-meta">
  Idempotent operations that don't lose data. Use these to force
  immediate cleanup that would otherwise wait for the background sweepers.
</p>
<div class="page-actions">
  <form method="post" action="/maintenance/fsync" class="inline-form">
    <button type="submit" class="btn-secondary">Force checkpoint (fsync)</button>
  </form>
  <form method="post" action="/maintenance/prune-oplog" class="inline-form">
    <button type="submit" class="btn-secondary">Prune oplog</button>
  </form>
  <form method="post" action="/maintenance/prune-ttl" class="inline-form">
    <button type="submit" class="btn-secondary">Prune TTL</button>
  </form>
</div>

<h2 class="section-title">Danger zone</h2>
<p class="modal-meta">
  Drops are irreversible. Each one requires you to type the target
  name verbatim into the confirmation modal before the wire command
  is issued.
</p>

{% if db_error %}
  <div class="error">{{ db_error }}</div>
{% else %}
  <table class="data-table">
    <thead>
      <tr>
        <th>Database</th>
        <th class="num">Size on disk</th>
        <th class="doc-actions-col">Actions</th>
      </tr>
    </thead>
    <tbody>
      {% for db in databases %}
        <tr>
          <td><code>{{ db.name }}</code></td>
          <td class="num">{{ db.sizeOnDisk or 0 }}</td>
          <td class="doc-actions">
            <button
              type="button"
              class="btn-danger"
              hx-get="/maintenance/drop-database/{{ db.name }}/confirm"
              hx-target="#modal"
              hx-swap="innerHTML"
            >Drop database</button>
          </td>
        </tr>
      {% else %}
        {{ empty_row(3, "No databases.") }}
      {% endfor %}
    </tbody>
  </table>
{% endif %}

<h3 class="section-title">Drop collection</h3>

<datalist id="maint-db-suggestions">
  {% for db in databases %}
    <option value="{{ db.name }}"></option>
  {% endfor %}
</datalist>
<datalist id="maint-coll-suggestions">
  <template x-for="c in collections" :key="c">
    <option :value="c"></option>
  </template>
</datalist>

<form
  class="filter-form"
  x-data="dropCollForm()"
  @submit.prevent="open($event.target)"
>
  <div class="filter-controls">
    <label>Database
      <input type="text" name="db" required autocomplete="off"
             list="maint-db-suggestions"
             x-model="db" @change="onDbChange(db)" />
    </label>
    <label>Collection
      <input type="text" name="coll" required autocomplete="off"
             list="maint-coll-suggestions"
             x-model="coll" />
    </label>
  </div>
  <div class="modal-actions">
    <button type="submit" class="btn-danger" :disabled="!db.trim() || !coll.trim()">Drop collection…</button>
  </div>
</form>

<div id="modal"></div>

<script>
function dropCollForm() {
  return {
    db: "",
    coll: "",
    collections: [],

    async onDbChange(value) {
      this.collections = [];
      if (!value) return;
      try {
        const r = await fetch(`/query/_collections?db=${encodeURIComponent(value)}`);
        if (!r.ok) return;
        const payload = await r.json();
        this.collections = payload.collections || [];
      } catch (_) { /* leave datalist empty on network error */ }
    },

    open(form) {
      const db = this.db.trim();
      const coll = this.coll.trim();
      if (!db || !coll) return;
      openModal(`/maintenance/drop-collection/${encodeURIComponent(db)}/${encodeURIComponent(coll)}/confirm`);
    },
  };
}
</script>
{% endblock %}