{% extends "base.html" %}
{% block title %}Cloud Storage · SD RMM{% endblock %}
{% block content %}

<style>
  .cs-intro { color:var(--muted); max-width:780px; margin-bottom:18px; }
  .cs-grid { width:100%; border-collapse:collapse; margin-bottom:26px; }
  .cs-grid th, .cs-grid td { text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); font-size:13px; vertical-align:middle; }
  .cs-grid th { color:var(--muted); font-weight:600; font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; }
  .cs-bar { width:160px; height:8px; background:var(--surface-2); border:1px solid var(--line); border-radius:999px; overflow:hidden; display:inline-block; vertical-align:middle; }
  .cs-bar > span { display:block; height:100%; background:var(--accent, #3b82f6); }
  .cs-bar > span.warn { background:#e0a800; } .cs-bar > span.crit { background:#dc3545; }
  .cs-quota-form { display:inline-flex; gap:5px; align-items:center; }
  .cs-quota-form input { width:78px; padding:4px 6px; font-size:12px; background:var(--surface-2); border:1px solid var(--line); border-radius:6px; color:inherit; }
  .cs-card { background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-md); padding:16px 18px; max-width:680px; margin-bottom:24px; }
  .cs-card h3 { margin:0 0 12px; font-size:14px; }
  .cs-row { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:10px; }
  .cs-row label { display:flex; flex-direction:column; font-size:11.5px; color:var(--muted); gap:4px; }
  .cs-row input { padding:6px 8px; font-size:13px; background:var(--surface); border:1px solid var(--line); border-radius:6px; color:inherit; min-width:150px; }
  .btn-sm { padding:5px 10px; font-size:12px; border-radius:6px; border:1px solid var(--line); background:var(--surface-2); color:inherit; cursor:pointer; }
  .btn-sm.danger { color:#dc3545; } .btn-sm.primary { background:var(--accent,#3b82f6); color:#fff; border-color:transparent; }
  .cs-flash { padding:9px 12px; border-radius:8px; margin-bottom:16px; font-size:13px; }
  .cs-flash.ok { background:rgba(40,167,69,.12); border:1px solid rgba(40,167,69,.4); }
  .cs-flash.err { background:rgba(220,53,69,.12); border:1px solid rgba(220,53,69,.4); }
  .cs-muted { color:var(--muted); font-size:12px; }
  .cs-pill { font-size:11px; padding:1px 7px; border-radius:999px; border:1px solid var(--line); }
  .cs-pill.off { color:#dc3545; }
</style>

<h1 style="margin:0 0 4px;">Cloud Storage</h1>
<p class="cs-intro">Master controls for <strong>SD&nbsp;Secure&nbsp;Cloud</strong> &mdash; allocate and adjust each
person&rsquo;s storage, add or remove accounts, all from here. New people get an emailed link to set their own
password. <a href="{{ console_url }}" target="_blank" rel="noopener">Open the full cloud &rarr;</a></p>

{% if request.query_params.get('saved') %}<div class="cs-flash ok">Saved.</div>{% endif %}
{% if request.query_params.get('err') %}<div class="cs-flash err">{{ request.query_params.get('err') }}</div>{% endif %}
{% if err %}<div class="cs-flash err">{{ err }}</div>{% endif %}

{% if users %}
<table class="cs-grid">
  <thead><tr><th>User</th><th>Email</th><th>Usage</th><th>Allocated</th><th>Set quota</th><th></th></tr></thead>
  <tbody>
  {% for u in users %}
    <tr>
      <td><strong>{{ u.display }}</strong><br><span class="cs-muted">{{ u.id }}</span>
          {% if not u.enabled %} <span class="cs-pill off">disabled</span>{% endif %}</td>
      <td class="cs-muted">{{ u.email or '—' }}</td>
      <td><span class="cs-bar"><span class="{{ 'crit' if u.pct>=90 else 'warn' if u.pct>=75 else '' }}" style="width:{{ u.pct }}%"></span></span>
          <br><span class="cs-muted">{{ u.used_h }} {% if u.pct %}({{ u.pct }}%){% endif %}</span></td>
      <td>{{ u.quota_h }}</td>
      <td>
        <form class="cs-quota-form" method="post" action="/cloud/storage/quota">
          <input type="hidden" name="userid" value="{{ u.id }}">
          <input type="text" name="quota" placeholder="50 GB">
          <button class="btn-sm" type="submit">Set</button>
        </form>
      </td>
      <td style="white-space:nowrap;">
        <form method="post" action="/cloud/storage/toggle" style="display:inline;">
          <input type="hidden" name="userid" value="{{ u.id }}">
          <input type="hidden" name="enabled" value="{{ 0 if u.enabled else 1 }}">
          <button class="btn-sm" type="submit">{{ 'Disable' if u.enabled else 'Enable' }}</button>
        </form>
        {% if u.id not in ('sdadmin','svcstorage') %}
        <form method="post" action="/cloud/storage/delete" style="display:inline;"
              onsubmit="return confirm('Delete {{ u.id }} and ALL their files? This cannot be undone.');">
          <input type="hidden" name="userid" value="{{ u.id }}">
          <button class="btn-sm danger" type="submit">Delete</button>
        </form>
        {% endif %}
      </td>
    </tr>
  {% endfor %}
  </tbody>
</table>
{% elif not err %}
<p class="cs-muted">No cloud accounts yet.</p>
{% endif %}

<div class="cs-card">
  <h3>Add a person</h3>
  <form method="post" action="/cloud/storage/add">
    <div class="cs-row">
      <label>Username <input type="text" name="userid" required placeholder="jane" pattern="[a-zA-Z0-9._-]+"></label>
      <label>Full name <input type="text" name="display" placeholder="Jane Smith"></label>
    </div>
    <div class="cs-row">
      <label>Email (gets set-password link) <input type="email" name="email" required placeholder="jane@example.com"></label>
      <label>Storage quota <input type="text" name="quota" placeholder="50 GB"></label>
    </div>
    <button class="btn-sm primary" type="submit">Create account &amp; send invite</button>
    <div class="cs-muted" style="margin-top:8px;">Quota examples: <code>50 GB</code>, <code>500 MB</code>, <code>2 TB</code>, or <code>none</code> for unlimited.</div>
  </form>
</div>

{% endblock %}