{% 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="src" placeholder="исходный@domain.tld" required style="flex:1;border:0.5px solid var(--color-border-tertiary);border-radius:6px;padding:6px 10px">
        <span style="color:var(--color-text-tertiary)">→</span>
        <input class="compose-input" name="dst" placeholder="получатель@domain.tld" 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">Алиасы ({{ aliases|length }})</div></div>
    <div class="card-body" style="padding:0">
      <table class="tbl">
        <thead><tr><th>Исходный адрес</th><th>Получатель</th><th style="width:1%"></th></tr></thead>
        <tbody>
        {% for a in aliases %}
          <tr>
            <td>{{ a['from'] }}</td>
            <td>{{ a['to'] }}</td>
            <td style="white-space:nowrap">
              <form method="post" onsubmit="return confirm('Удалить алиас?')">
                <input type="hidden" name="action" value="delete">
                <input type="hidden" name="src" value="{{ a['from'] }}">
                <input type="hidden" name="dst" value="{{ a['to'] }}">
                <button class="btn" type="submit" style="font-size:12px;color:var(--color-text-danger)">Удалить</button>
              </form>
            </td>
          </tr>
        {% else %}
          <tr><td colspan="3" 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 %}