{% extends "gateways/base.html" %}{% load i18n %}
{% block title %}{% translate "Add gateway" %} – Rivet{% endblock %}
{% block breadcrumbs %}<nav class="crumbs" aria-label="{% translate "Breadcrumb" %}"><ol>
  <li><a href="{% url 'gateway-list' %}">{% translate "Gateways" %}</a></li><li><span aria-current="page">{% translate "Add gateway" %}</span></li>
</ol></nav>{% endblock %}
{% block head %}<style>
  fieldset.kinds { border:1px solid var(--line); border-radius:8px; padding:8px 12px; margin:0 0 12px; }
  fieldset.kinds legend { padding:0 4px; }
  label.kind { display:flex; gap:10px; align-items:flex-start; margin:10px 0; }
  label.kind input { margin-top:5px; }
</style>{% endblock %}
{% block content %}
<h1>{% translate "Add gateway" %}</h1>
<div class="card">
  <p>{% translate "Choose how the gateway is connected to the server." %}</p>
  <form method="post">{% csrf_token %}
    {% for e in form.non_field_errors %}<div class="msg error">{{ e }}</div>{% endfor %}
    {% if single_org %}{{ form.organisation }}<p class="muted">{% blocktranslate trimmed with name=single_org.name %}Customer: {{ name }}{% endblocktranslate %}</p>
    {% else %}
    <p><label for="id_organisation">{{ form.organisation.label }}</label><br>{{ form.organisation }}</p>
    {% endif %}
    {% for e in form.organisation.errors %}<div class="msg error">{{ e }}</div>{% endfor %}
    <p><label for="id_name">{{ form.name.label }}</label><br>{{ form.name }}</p>
    {% for e in form.name.errors %}<div class="msg error">{{ e }}</div>{% endfor %}
    <p class="muted">{{ form.name.help_text }}</p>
    <fieldset class="kinds"><legend>{{ form.kind.label }}</legend>
      {% for radio in form.kind %}<label class="kind">{{ radio.tag }} <span>{{ radio.choice_label }}</span></label>{% endfor %}
    </fieldset>
    {% for e in form.kind.errors %}<div class="msg error">{{ e }}</div>{% endfor %}
    <p><button type="submit">{% translate "Create" %}</button> <a class="btn secondary" href="{% url 'gateway-list' %}">{% translate "Cancel" %}</a></p>
  </form>
</div>
{% endblock %}