{% extends "base.html" %}

{% block header_right %}
  <span class="tierpill">{{ tier.name }}</span>
  <a class="btn ghost sm" href="{{ url_for('lock') }}" style="margin-left:10px">Lock</a>
{% endblock %}

{% block content %}
<div class="card">
  <h2>Add Item</h2>
  <form method="post" action="{{ url_for('add') }}" enctype="multipart/form-data"
        style="display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap">
    <div style="flex:1;min-width:260px">
      <label for="file">Select a file to encrypt and store</label>
      <input type="file" id="file" name="file" required>
    </div>
    <button class="btn" type="submit">Encrypt &amp; Store</button>
  </form>
  <div class="hint">
    The file is encrypted with AES-256-GCM before touching disk. Only an opaque
    token and masked metadata are shown afterward — never the plaintext.
  </div>
</div>

<div class="card">
  <h2>Stored Items — {{ items|length }}</h2>
  {% if items %}
  <table>
    <thead>
      <tr>
        <th>Token</th>
        <th>Masked Name</th>
        <th>Size</th>
        <th>Added</th>
        <th style="text-align:right">Actions</th>
      </tr>
    </thead>
    <tbody>
      {% for it in items %}
      <tr>
        <td class="token">{{ it.token }}</td>
        <td class="masked">{{ it.masked_name }}</td>
        <td class="muted">{{ fmt_size(it.size) }}</td>
        <td class="muted">{{ it.added_at_iso() }}</td>
        <td style="text-align:right;white-space:nowrap">
          <a class="btn ghost sm" href="{{ url_for('get', token=it.token) }}">Download</a>
          <form class="inline" method="post" action="{{ url_for('delete', token=it.token) }}"
                onsubmit="return confirm('Delete {{ it.token }}? This is irreversible.');">
            <button class="btn danger sm" type="submit">Delete</button>
          </form>
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  {% else %}
    <div class="empty">Vault is empty. Add a file above to get started.</div>
  {% endif %}
</div>
{% endblock %}