{% extends "base.html" %}
{% block content %}
<div class="page-actions">
  <a class="button primary" href="/clients?create=1"><i data-lucide="plus"></i>Create Client</a>
</div>

{% if created_label and download_id %}
<div class="banner success inline-banner">Created {{ created_label }}. <a href="/clients/{{ download_id }}/download">Download config</a></div>
{% endif %}

{% if show_create %}
<section class="card form-panel">
  <div class="panel-title"><h2>Create Client</h2><a href="/clients">Close</a></div>
  <form method="post" action="/clients" class="inline-form">
    <input type="hidden" name="instance_id" value="{{ instance_id }}">
    <label><span>Label</span><input name="label" placeholder="field-laptop-01" required></label>
    <div class="route-checks">
      {% for route in routes %}
        <label><input type="checkbox" name="route_{{ loop.index }}" value="{{ route.cidr }}" checked><span>{{ route.cidr }}</span></label>
      {% else %}
        <p class="empty-copy">No advertised routes available.</p>
      {% endfor %}
    </div>
    <button class="button primary" type="submit">Create</button>
  </form>
</section>
{% endif %}

<section class="card">
  {% if clients %}
  <table class="data-table">
    <thead><tr><th>Label</th><th>Tunnel IP</th><th>Allowed Routes</th><th>Created</th><th>Actions</th></tr></thead>
    <tbody>
      {% for client in clients %}
      <tr>
        <td><strong>{{ client.label }}</strong></td>
        <td>{{ client.tunnel_ip }}</td>
        <td>{{ client.allowed_routes }}</td>
        <td>{{ client.created_at }}</td>
        <td class="actions">
          <a class="button secondary small" href="/clients/{{ client.id }}/download"><i data-lucide="download"></i>Download</a>
          <label class="button secondary small" for="qr-{{ client.id }}"><i data-lucide="qr-code"></i>QR Code</label>
          {% if confirm_revoke == client.id %}
            <form method="post" action="/clients/{{ client.id }}/revoke" class="inline"><span class="confirm">Are you sure?</span><button class="button danger small" type="submit">Revoke</button></form>
          {% else %}
            <a class="button danger small" href="/clients?confirm_revoke={{ client.id }}"><i data-lucide="trash-2"></i>Revoke</a>
          {% endif %}
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  {% else %}
  <div class="empty-state">
    <img src="/static/logo.png" alt="wg-diglett mascot">
    <h2>No clients yet.</h2>
    <p>Create your first client config above.</p>
  </div>
  {% endif %}
</section>

{% for client in clients %}
<input class="modal-toggle" id="qr-{{ client.id }}" type="checkbox">
<label class="modal-backdrop" for="qr-{{ client.id }}"></label>
<div class="qr-modal" role="dialog" aria-label="QR code for {{ client.label }}">
  <label class="modal-close" for="qr-{{ client.id }}"><i data-lucide="x"></i></label>
  <h2>{{ client.label }}</h2>
  <p>{{ client.tunnel_ip }}</p>
  <img src="/api/clients/{{ client.id }}/qr?v={{ client.tunnel_ip | urlencode }}" alt="WireGuard QR code for {{ client.label }}">
</div>
{% endfor %}
{% endblock %}