{% extends 'generic/bulk_edit.html' %}
{% load helpers %}
{% load form_helpers %}
{% load render_table from django_tables2 %}
{% load i18n %}

{% block title %}
  {% trans "Onboarding" %} {{ table.rows|length }} {{ model|meta:"verbose_name_plural"|bettertitle }}
  <style>
    label.required:after {
      color: red !important;
    }
    span.required {
      color: red !important;
    }
  </style> 
{% endblock %}

 {% block content %}
    <div class="tab-content">

      {# Edit form #}
      <div class="tab-pane show active" id="edit-form" role="tabpanel" aria-labelledby="edit-form-tab">
        <form action="" method="post" id="bulkForm" class="form form-horizontal">

          {% csrf_token %}
          {% if request.POST.return_url %}
            <input type="hidden" name="return_url" value="{{ request.POST.return_url }}" />
          {% endif %}
          {% for field in form.hidden_fields %}
            {{ field }}
          {% endfor %}

          <div class="row">
            <div class="col col-md-12 col-lg-10 offset-lg-1">
              <label class="text-lg"><span class="required">*</span> required fields</label>
              <div class="card">
                <div class="card-body">
                  {% if form.fieldsets %}

                    {# Render grouped fields according to declared fieldsets #}
                    {% for group, fields in form.fieldsets %}
                      <div class="field-group mb-5">
                        <div class="row mb-2">
                          <h5 class="offset-sm-3">
                            {% if group %}{{ group }}{% else %}{{ model|meta:"verbose_name"|bettertitle }}{% endif %}
                          </h5>
                        </div>
                        {% for name in fields %}
                          {% with field=form|getfield:name %}
                            {% if field.name in form.nullable_fields %}
                              {% render_field field bulk_nullable=True %}
                            {% else %}
                              {% render_field field %}
                            {% endif %}
                          {% endwith %}
                        {% endfor %}
                      </div>
                    {% endfor %}

                    {# Render tag add/remove fields #}
                    {% if form.add_tags and form.remove_tags %}
                      <div class="field-group mb-5">
                        <div class="row mb-2">
                          <h5 class="offset-sm-3">{% trans "Tags" %}</h5>
                        </div>
                        {% render_field form.add_tags %}
                        {% render_field form.remove_tags %}
                      </div>
                    {% endif %}

                    {# Render custom fields #}
                    {% if form.custom_fields %}
                      <div class="field-group mb-5">
                        <div class="row mb-2">
                          <h5 class="offset-sm-3">{% trans "Custom Fields" %}</h5>
                        </div>
                        {% render_custom_fields form %}
                      </div>
                    {% endif %}

                    {# Render comments #}
                    {% if form.comments %}
                      <div class="field-group mb-5">
                        <div class="row mb-2">
                          <h5 class="offset-sm-3">{% trans "Comments" %}</h5>
                        </div>
                        {% render_field form.comments bulk_nullable=True %}
                      </div>
                    {% endif %}

                  {% else %}

                    {# Render all fields #}
                    {% for field in form.visible_fields %}
                      {% if field.name in form.nullable_fields %}
                        {% render_field field bulk_nullable=True %}
                      {% else %}
                        {% render_field field %}
                      {% endif %}
                    {% endfor %}

                  {% endif %}
                  
                </div>
              </div>

              <div class="alert alert-warning bg-warning-subtle" role="alert">
                <div class="d-flex">
                  <div>
                    <i class="mdi mdi-alert-octagon p-2"></i>
                  </div>
                  <div>
                    <h4 class="alert-title">Warning</h4>
                    Depending on the number of devices, onboarding can take a couple of minutes. Please keep this page open until onboarding is finished. 
                  </div>
                </div>
              </div>

              <div class="text-end">
                <button type="submit" name="_apply" id="applyButton" disabled-onclick="set_apply_btn()" class="btn btn-primary">{% trans "Apply" %}</button>
                <a href="{{ return_url }}" class="btn btn-outline-danger">{% trans "Cancel" %}</a>
              </div>
            </div>
          </div>

        </form>
      </div>

      {# Selected objects list #}
      <div class="tab-pane" id="object-list" role="tabpanel" aria-labelledby="object-list-tab">
        <div class="card">
          <div class="card-body table-responsive">
            {% render_table table 'inc/table.html' %}
          </div>
        </div>
      </div>
    </div>

  <script>

    function set_apply_btn(){

        var applyButton = document.getElementById('applyButton');
        var bulkForm = document.getElementById('bulkForm');

        // Show alert to not leave this page until all devices are onboarded
        alert("Depending on the number of devices, onboarding can take a couple of minutes. Please keep this page open until onboarding is finished.");

        // Disable the button
        applyButton.disabled = true;

        // Change the text
        applyButton.innerHTML = 'Please wait...';

        // Submit form
        bulkForm.submit();

    };
  </script>
  {% endblock content %}