{% extends 'layout/base.html' %}
{% block title %}Ящики · Админка{% endblock %}
{% block body %}
<div class="content">
  {% include 'admin/_flash.html' %}

  <div class="card">
    <div class="card-head">
      <div class="card-title">Создать ящик</div>
    </div>
    <div class="card-body">
      <form method="post" class="form-row">
        <input type="hidden" name="action" value="add">
        <input class="compose-input" name="email" placeholder="user@domain.tld" required style="flex:1;border:0.5px solid var(--color-border-tertiary);border-radius:6px;padding:6px 10px">
        <input class="compose-input" name="password" type="password" placeholder="пароль (≥6)" required style="flex:1;border:0.5px solid var(--color-border-tertiary);border-radius:6px;padding:6px 10px">
        <button class="btn btn-primary" type="submit">Создать</button>
      </form>
    </div>
  </div>

  <div class="card" style="margin-top:14px">
    <div class="card-head"><div class="card-title">Существующие ящики ({{ mailboxes|length }})</div></div>
    <div class="card-body" style="padding:0">
      <table class="tbl">
        <thead><tr><th>Email</th><th>Домен</th><th>Использовано</th><th style="width:1%">Действия</th></tr></thead>
        <tbody>
        {% for mb in mailboxes %}
          <tr>
            <td>{{ mb.email }}</td>
            <td>{{ mb.domain }}</td>
            <td>{{ mb.used_human }} / {{ mb.quota_human }} <span style="color:var(--color-text-tertiary)">[{{ mb.pct }}%]</span></td>
            <td style="white-space:nowrap;display:flex;gap:6px">
              <form method="post" style="display:inline-flex;gap:4px">
                <input type="hidden" name="action" value="passwd">
                <input type="hidden" name="email" value="{{ mb.email }}">
                <input name="password" type="password" placeholder="новый пароль" style="border:0.5px solid var(--color-border-tertiary);border-radius:6px;padding:4px 8px;font-size:12px">
                <button class="btn" type="submit" style="font-size:12px">Сменить</button>
              </form>
              <form method="post" onsubmit="return confirm('Удалить {{ mb.email }}?')">
                <input type="hidden" name="action" value="delete">
                <input type="hidden" name="email" value="{{ mb.email }}">
                <button class="btn" type="submit" style="font-size:12px;color:var(--color-text-danger)">Удалить</button>
              </form>
            </td>
          </tr>
        {% else %}
          <tr><td colspan="4" style="color:var(--color-text-tertiary);text-align:center;padding:20px">Нет ящиков</td></tr>
        {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>

<style>
.form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.flash-stack{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.flash{padding:8px 12px;border-radius:6px;border:0.5px solid var(--color-border-tertiary);font-size:12px}
.flash-ok{background:#e8f5e9;color:#1b5e20;border-color:#c8e6c9}
.flash-err{background:#fce8e6;color:#9b2c2c;border-color:#f5c0c0}
body.dark .flash-ok{background:#0f3a18;color:#a8e8b9;border-color:#1f5a2d}
body.dark .flash-err{background:#3a1212;color:#f0a8a8;border-color:#5c2020}
</style>
{% endblock %}