{% extends "base.html" %}
{% block title %}Add Policer - {{ device.name }}{% endblock %}
{% block content %}
<h1>Add Policer — {{ device.name }}</h1>

{% if fetch_error %}
<div class="flash flash-danger">Could not fetch live interface list: {{ fetch_error }}. Type the interface name manually below.</div>
{% endif %}

<div class="card" style="max-width:560px;">
  <form method="post" novalidate>
    {{ form.hidden_tag() }}

    <div class="form-group">
      {{ form.policer_name.label }}
      {{ form.policer_name(placeholder="e.g. LIMIT-10M") }}
      {% for error in form.policer_name.errors %}<div class="hint status-bad">{{ error }}</div>{% endfor %}
    </div>

    <div class="form-group">
      <label>Bandwidth Limit</label>
      <div style="display:flex;gap:8px;">
        {{ form.bandwidth_value(placeholder="10") }}
        {{ form.bandwidth_unit() }}
      </div>
      {% for error in form.bandwidth_value.errors %}<div class="hint status-bad">{{ error }}</div>{% endfor %}
    </div>

    <div class="form-group">
      <label>Burst Size Limit</label>
      <div style="display:flex;gap:8px;">
        {{ form.burst_value(placeholder="625") }}
        {{ form.burst_unit() }}
      </div>
      {% for error in form.burst_value.errors %}<div class="hint status-bad">{{ error }}</div>{% endfor %}
    </div>

    <div class="form-group">
      {{ form.then_action.label }}
      {{ form.then_action() }}
    </div>

    <div class="form-group">
      <label for="interface">Interface</label>
      {% if interfaces %}
      <select id="interface" name="interface">
        <option value="">Select an interface...</option>
        {% for iface in interfaces %}
        <option value="{{ iface.name }}" {{ 'selected' if form.interface.data == iface.name else '' }}>
          {{ iface.name }} ({{ iface.admin_status }}/{{ iface.oper_status }}{% if iface.description %} — {{ iface.description }}{% endif %})
        </option>
        {% endfor %}
      </select>
      {% else %}
      {{ form.interface(placeholder="e.g. ge-0/0/5", id="interface") }}
      {% endif %}
      {% for error in form.interface.errors %}<div class="hint status-bad">{{ error }}</div>{% endfor %}
    </div>

    <div class="form-group">
      {{ form.unit.label }}
      {{ form.unit() }}
    </div>

    <div class="form-group">
      {{ form.direction.label }}
      {{ form.direction() }}
    </div>

    <button type="submit" class="btn btn-primary">Preview Diff</button>
    <a href="{{ url_for('devices.device_detail', device_id=device.id) }}" class="btn">Cancel</a>
  </form>
</div>
{% endblock %}