{% extends "admin/change_list.html" %}
{% load i18n %}

{% block content %}
<div class="container mt-4">
  <h1 class="mb-4">{% trans "Seleccionar Servidor" %}</h1>
  <form method="post" action="{% url 'admin:home_serverselection_changelist' %}" class="needs-validation" novalidate>
    {% csrf_token %}
    <div class="form-group">
      <label for="serverSelection">{% trans "Seleccionar servidor" %}</label>
      <select class="form-control" id="serverSelection" name="server_selection" required>
        <option value="" disabled selected>{% trans "Elija un servidor" %}</option>
        {% for server in servers %}
          <option value="{{ server.0 }}">{{ server.1 }}</option>
        {% endfor %}
      </select>
      <div class="invalid-feedback">
        {% trans "Debe seleccionar un servidor antes de continuar." %}
      </div>
    </div>
    <div class="submit-row">
      <input type="submit" value='{% trans "Guardar selección" %}' class="default" name="_save">
    </div>
  </form>
</div>
<script>
  // Validación de formulario con Bootstrap
  (function () {
    'use strict';
    window.addEventListener('load', function () {
      var forms = document.getElementsByClassName('needs-validation');
      Array.prototype.filter.call(forms, function (form) {
        form.addEventListener('submit', function (event) {
          if (form.checkValidity() === false) {
            event.preventDefault();
            event.stopPropagation();
          }
          form.classList.add('was-validated');
        }, false);
      });
    }, false);
  })();
</script>
{% endblock %}