{% extends "base.html" %}
{% block content %}
<h1>PPPoE Subscriber Server</h1>
<p class="page-subtitle">Sell credentialed PPPoE accounts to wired subscribers (routers/PCs), alongside the coin hotspot.</p>

{% if flash_msg %}
<div class="flash flash-good"><span>{{ flash_msg }}</span><button class="flash-close" type="button">&times;</button></div>
{% endif %}
{% if error_msg %}
<div class="flash flash-error"><span>{{ error_msg }}</span><button class="flash-close" type="button">&times;</button></div>
{% endif %}

<!-- ===== Config card ===== -->
<section>
  <div class="card">
    <div class="section-head" style="margin-bottom:14px;">
      <h2 style="margin:0;">Server Settings</h2>
      {% if cfg.enabled %}
        <span class="badge badge-active">{{ 'Running' if cfg.service_active else 'Enabled' }}</span>
      {% else %}
        <span class="badge badge-expired">Disabled</span>
      {% endif %}
    </div>
    <form method="POST" action="/pppoe/config"{% if cfg.enabled %} onsubmit="return confirm('Saving restarts the PPPoE server — active PPPoE sessions will disconnect and reconnect. Continue?');"{% endif %}>
      <label style="display:flex;align-items:center;gap:10px;margin-bottom:16px;font-weight:600;color:var(--text);cursor:pointer;">
        <input type="checkbox" name="pppoe_enabled" value="on" {{ 'checked' if cfg.enabled else '' }} style="width:18px;height:18px;">
        Enable PPPoE subscriber server
      </label>
      <div class="form-grid">
        <div>
          <label>VLAN id (tagged on the WAN trunk eth0)</label>
          <input type="number" name="pppoe_vlan_id" value="{{ cfg.vlan_id }}" min="2" max="4094" required>
        </div>
        <div>
          <label>Segment subnet (/24)</label>
          <input type="text" name="pppoe_subnet" value="{{ cfg.subnet }}" placeholder="10.0.30.0/24" required>
        </div>
        <div>
          <label>Max concurrent sessions</label>
          <input type="number" name="pppoe_max_sessions" value="{{ cfg.max_sessions }}" min="1" max="512" required>
        </div>
        <div>
          <label>Client DNS (comma-separated)</label>
          <input type="text" name="pppoe_dns" value="{{ cfg.dns }}" placeholder="8.8.8.8, 1.1.1.1">
        </div>
      </div>
      <p class="form-hint">
        Server: <code>{{ cfg.vlan_iface }}</code> at <code>{{ cfg.server_ip }}</code>, client pool from <code>{{ cfg.pool_start }}</code>.
        Wired clients dial with their account username/password. Enabling restarts the hotspot briefly; the WAN is never touched.
      </p>
      <p class="form-hint" style="background:var(--warn-light);color:var(--warn-text);border:1px solid rgba(245,158,11,0.35);border-radius:var(--radius);padding:10px 12px;">
        ⚠ Saving restarts the PPPoE server, so <strong>active PPPoE sessions disconnect</strong> and reconnect. Changing the VLAN id also requires the downstream switch port to be re-tagged to the new VLAN.
      </p>
      <div class="form-actions" style="margin-top:14px;">
        <button type="submit" class="btn-primary">Save Settings</button>
      </div>
    </form>
  </div>
</section>

<!-- ===== Accounts ===== -->
<section>
  <div class="section-head">
    <h2 style="margin:0;">Accounts ({{ accounts|length }})</h2>
  </div>
  <div class="page-actions">
    <button type="button" class="btn-primary" onclick="openModal('add-modal')">+ Add Account</button>
  </div>

  {% if accounts %}
  <div class="table-scroll">
    <table>
      <thead>
        <tr>
          <th>Username</th>
          <th>Status</th>
          <th class="col-hide-mobile">Download</th>
          <th class="col-hide-mobile">Upload</th>
          <th class="col-hide-mobile">Expires</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        {% for a in accounts %}
        <tr>
          <td><span class="code">{{ a.username }}</span></td>
          <td>
            {% if a.expired %}
              <span class="badge badge-expired">Expired</span>
            {% elif a.status == 'suspended' %}
              <span class="badge badge-paused">Suspended</span>
            {% else %}
              <span class="badge badge-active">Active</span>
            {% endif %}
          </td>
          <td class="col-hide-mobile">{{ a.down_disp }}</td>
          <td class="col-hide-mobile">{{ a.up_disp }}</td>
          <td class="col-hide-mobile">{{ a.expiry_date if a.expiry_date else '—' }}</td>
          <td class="actions-cell">
            <button type="button" class="btn-sm"
                    data-id="{{ a.id }}" data-username="{{ a.username }}"
                    data-down="{{ '%g'|format((a.down_kbps or 0) / 1000) }}"
                    data-up="{{ '%g'|format((a.up_kbps or 0) / 1000) }}"
                    data-expires="{{ a.expiry_date }}"
                    onclick="openEdit(this)">Edit</button>
            <form method="POST" action="/pppoe/account/{{ a.id }}/toggle">
              <button type="submit" class="btn-sm">{{ 'Activate' if a.status == 'suspended' else 'Suspend' }}</button>
            </form>
            <form method="POST" action="/pppoe/account/{{ a.id }}/delete"
                  onsubmit="return confirm('Delete PPPoE account {{ a.username }}? This drops any live session.');">
              <button type="submit" class="btn-sm-danger">Delete</button>
            </form>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  {% else %}
  <div class="empty-state">
    No PPPoE accounts yet. <strong>Add Account</strong> to create one for a wired subscriber.
  </div>
  {% endif %}
</section>

<!-- ===== Add modal ===== -->
<div class="modal" id="add-modal" hidden>
  <div class="modal-backdrop" onclick="closeModal('add-modal')"></div>
  <div class="modal-dialog">
    <div class="modal-header">
      <h3 class="modal-title">Add PPPoE Account</h3>
      <button type="button" class="modal-close" onclick="closeModal('add-modal')">&times;</button>
    </div>
    <div class="modal-body">
      <form method="POST" action="/pppoe/account/add">
        <div class="form-grid form-grid--2col">
          <div>
            <label>Username</label>
            <input type="text" name="username" required maxlength="64" autocomplete="off">
          </div>
          <div>
            <label>Password</label>
            <input type="text" name="password" required maxlength="64" autocomplete="off">
          </div>
          <div>
            <label>Download cap (Mbps)</label>
            <input type="number" name="down_mbps" placeholder="0 = unlimited" min="0" step="0.1">
          </div>
          <div>
            <label>Upload cap (Mbps)</label>
            <input type="number" name="up_mbps" placeholder="0 = unlimited" min="0" step="0.1">
          </div>
          <div class="col-span-all">
            <label>Expires (optional — blank = no expiry)</label>
            <input type="date" name="expires_date">
          </div>
        </div>
        <p class="form-hint">Caps: 0 or blank = unlimited. No expiry = a monthly account you suspend manually; set a date for a prepaid-time account.</p>
        <div class="form-actions" style="margin-top:14px;">
          <button type="submit" class="btn-primary">Create Account</button>
          <button type="button" class="btn-secondary" onclick="closeModal('add-modal')">Cancel</button>
        </div>
      </form>
    </div>
  </div>
</div>

<!-- ===== Edit modal (shared, populated by JS) ===== -->
<div class="modal" id="edit-modal" hidden>
  <div class="modal-backdrop" onclick="closeModal('edit-modal')"></div>
  <div class="modal-dialog">
    <div class="modal-header">
      <h3 class="modal-title">Edit <span id="edit-username-label"></span></h3>
      <button type="button" class="modal-close" onclick="closeModal('edit-modal')">&times;</button>
    </div>
    <div class="modal-body">
      <form method="POST" id="edit-form">
        <div class="form-grid form-grid--2col">
          <div class="col-span-all">
            <label>New password (blank = keep current)</label>
            <input type="text" id="edit-password" name="password" maxlength="64" autocomplete="off" placeholder="unchanged">
          </div>
          <div>
            <label>Download cap (Mbps)</label>
            <input type="number" id="edit-down" name="down_mbps" min="0" step="0.1" placeholder="0 = unlimited">
          </div>
          <div>
            <label>Upload cap (Mbps)</label>
            <input type="number" id="edit-up" name="up_mbps" min="0" step="0.1" placeholder="0 = unlimited">
          </div>
          <div class="col-span-all">
            <label>Expires (optional — blank = no expiry)</label>
            <input type="date" id="edit-expires" name="expires_date">
          </div>
        </div>
        <p class="form-hint">Caps: 0 or blank = unlimited.</p>
        <div class="form-actions" style="margin-top:14px;">
          <button type="submit" class="btn-primary">Save Changes</button>
          <button type="button" class="btn-secondary" onclick="closeModal('edit-modal')">Cancel</button>
        </div>
      </form>
    </div>
  </div>
</div>

<script>
  function openModal(id) { document.getElementById(id).hidden = false; }
  function closeModal(id) { document.getElementById(id).hidden = true; }
  function openEdit(btn) {
    document.getElementById('edit-username-label').textContent = btn.dataset.username;
    document.getElementById('edit-form').action = '/pppoe/account/' + btn.dataset.id + '/edit';
    document.getElementById('edit-password').value = '';
    document.getElementById('edit-down').value = btn.dataset.down;
    document.getElementById('edit-up').value = btn.dataset.up;
    document.getElementById('edit-expires').value = btn.dataset.expires || '';
    openModal('edit-modal');
  }
  // Re-open the Add modal if its submission bounced back with an error.
  {% if add_form_error %}openModal('add-modal');{% endif %}
</script>
{% endblock %}