{% extends "base.html" %}
{% block title %}Tariffs — VPN Control Panel{% endblock %}
{% block content %}
<h2>Tariffs</h2>

<div class="card" style="margin-bottom:20px;padding:16px;">
    <form action="/admin/tariffs/create" method="post" style="display:flex;gap:8px;align-items:end;flex-wrap:wrap;">
        <div>
            <label style="font-size:11px;color:#888;display:block;margin-bottom:2px;">Name</label>
            <input type="text" name="name" required style="padding:6px 10px;border:1px solid #ddd;border-radius:4px;font-size:13px;">
        </div>
        <div>
            <label style="font-size:11px;color:#888;display:block;margin-bottom:2px;">Days</label>
            <input type="number" name="duration_days" required value="30" style="padding:6px 10px;border:1px solid #ddd;border-radius:4px;font-size:13px;width:60px;">
        </div>
        <div>
            <label style="font-size:11px;color:#888;display:block;margin-bottom:2px;">Price</label>
            <input type="number" step="0.01" name="price" required value="0" style="padding:6px 10px;border:1px solid #ddd;border-radius:4px;font-size:13px;width:80px;">
        </div>
        <div>
            <label style="font-size:11px;color:#888;display:block;margin-bottom:2px;">Currency</label>
            <select name="currency" style="padding:6px 10px;border:1px solid #ddd;border-radius:4px;font-size:13px;">
                <option value="RUB">RUB</option>
                <option value="USD">USD</option>
            </select>
        </div>
        <div>
            <label style="font-size:11px;color:#888;display:block;margin-bottom:2px;">Devices</label>
            <input type="number" name="max_devices" value="1" style="padding:6px 10px;border:1px solid #ddd;border-radius:4px;font-size:13px;width:60px;">
        </div>
        <div>
            <label style="font-size:11px;color:#888;display:block;margin-bottom:2px;">Traffic GB</label>
            <input type="number" name="traffic_gb" value="0" placeholder="0=unlimited" style="padding:6px 10px;border:1px solid #ddd;border-radius:4px;font-size:13px;width:70px;">
        </div>
        <button type="submit" style="padding:7px 16px;background:#1a1a2e;color:#fff;border:none;border-radius:4px;font-size:13px;cursor:pointer;">+ Add Tariff</button>
    </form>
</div>

<div class="count">{{ tariffs|length }} total</div>
<table>
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Duration</th>
            <th>Price</th>
            <th>Max Devices</th>
            <th>Traffic</th>
            <th>Status</th>
            <th>Created</th>
        </tr>
    </thead>
    <tbody>
        {% for t in tariffs %}
        <tr>
            <td>{{ t.id }}</td>
            <td>{{ t.name }}</td>
            <td>{{ t.duration_days }} days</td>
            <td>{{ "%.2f"|format(t.price) }} {{ t.currency }}</td>
            <td>{{ t.max_devices }}</td>
            <td>{% if t.traffic_gb %}{{ t.traffic_gb }} GB{% else %}Unlimited{% endif %}</td>
            <td>
                {% if t.is_active %}
                <span class="badge badge-green">Active</span>
                {% else %}
                <span class="badge badge-red">Inactive</span>
                {% endif %}
            </td>
            <td>{{ t.created_at.strftime("%Y-%m-%d") }}</td>
        </tr>
        {% endfor %}
    </tbody>
</table>
{% endblock %}