{% load i18n %}
<div class="card">
  <h2>{% translate "Services" %}</h2>
  <p class="muted">{% blocktranslate trimmed with addr=gateway.uplink_address %}“Local”: the service runs on this
  device (WireGuard address {{ addr }}). “Forward”: to the given address in the local network. “View” opens a service
  for all phones (access “operation”), “manage” additionally opens its administration ports for service devices
  only.{% endblocktranslate %}</p>
  {% if service_error %}<div class="msg error">{{ service_error }}</div>{% endif %}
  <form method="post" action="{{ services_action }}">{% csrf_token %}
    <input type="hidden" name="action" value="services">
    <input type="hidden" name="next" value="{{ request.get_full_path }}">
    <div class="table-wrap"><table class="list">
      <tr><th>{% translate "Service" %}</th><th>{% translate "View" %}</th><th>{% translate "Manage" %}</th><th>{% translate "Target" %}</th></tr>
      {% for r in service_rows %}
      <tr>
        <td><strong>{{ r.name }}</strong></td>
        <td>{% if r.has_view %}<label class="check"><input type="checkbox" name="{{ r.key }}_view"{% if r.view %} checked{% endif %}> <span class="muted">{{ r.view_ports }}</span></label>{% else %}–{% endif %}</td>
        <td><label class="check"><input type="checkbox" name="{{ r.key }}_manage"{% if r.manage %} checked{% endif %}> <span class="muted">{{ r.manage_ports }}</span></label></td>
        <td class="svc-target">
          <select name="{{ r.key }}_target" aria-label="{% translate 'Target' %}">
            <option value="self"{% if r.target != "ip" %} selected{% endif %}>{% translate "Local" %}</option>
            <option value="ip"{% if r.target == "ip" %} selected{% endif %}>{% translate "Forward" %}</option>
          </select>
          <input class="svc-ip" type="text" name="{{ r.key }}_ip" value="{{ r.target_ip }}" placeholder="192.168.1.50"
                 inputmode="decimal" aria-label="{% translate 'Target address' %}">
        </td>
      </tr>
      {% endfor %}
    </table></div>
    <p><button type="submit">{% translate "Save services" %}</button></p>
  </form>
</div>
<style>
  /* Adresse nur bei „Weiterleitung“ (ohne JavaScript: :has). */
  td.svc-target:has(option[value="self"]:checked) .svc-ip { display:none; }
</style>