{% extends 'base.html' %}
{% load helpers %}
{% load form_helpers %}
{% load render_table from django_tables2 %}
{% load i18n %}2

{% block title %}
  Onboard Devices
{% endblock %}


{% block header %}
  <div class="title-container ps-4 pb-3">
    <div id="content-title" class="d-flex align-items-center">
        {% include "slurpit_nautobot/logo.html" %}
        <h1 class="ms-3 mb-0">{% trans "Onboarding" %} {{ table.rows|length }} {{ model|meta:"verbose_name_plural"|bettertitle }}</h1>
        <style>
        h1:before {
            content: '';
        }
        </style>
    </div>
  </div>

  <ul class="nav nav-tabs px-3">    
    <li class="nav-item" role="presentation">
      <a class="nav-tab nav-link active" id="edit-form-tab" data-bs-toggle="tab" href="#edit-form" >
        {% trans "Bulk Edit" %}
      </a>
    </li>

    <li class="nav-item" role="presentation">
      <a class="nav-tab nav-link" id="object-list-tab" data-bs-toggle="tab" href="#object-list" >
        {% trans "Selected Objects" %}
        {% badge table.rows|length %}
      </a>
    </li>
  </ul>
{% endblock header %}

{% block content %}
        {% if form.errors %}
        <div class="card border-danger mb-3">
            <div class="card-header bg-danger text-white"><strong>Errors</strong></div>
            <div class="card-body">
                {{ form.non_field_errors }}
                {% for field in form %}
                    {% if field.errors %}
                        <strong class="card-title">{{ field.label }}</strong>: {{ field.errors }}
                    {% endif %}
                {% endfor %}
            </div>
        </div>
        {% endif %}


        <div class="tab-content">
        
            <div class="tab-pane fade show active" id="edit-form" >
                <form action="" method="post" 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">
                        <div class="card">
                            <div class="card-body">
                        
                                {# 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 %}

                            
                            </div>
                        </div>

                        <div class="float-end">
                            <button type="submit" name="_apply" class="btn btn-primary protect-btn">{% trans "Apply" %}</button>
                            <a href="{{ return_url }}" class="btn btn-sm btn-outline-danger protect-btn">{% trans "Cancel" %}</a>
                        </div>
                    </div>
                </div>

                </form>
            </div>

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

        </div>
        <script>
            const projectButtons = document.querySelectorAll('.protect-btn');
        
            projectButtons.forEach(button => {
                button.addEventListener('click', protectButton);
            });
            function protectButton(event) {
                buttonName = event.target.textContent
                setTimeout(() => recoverButton(event, buttonName), 1500);
                event.target.classList.add('disabled');
                event.target.textContent = 'Please wait'
            }
            function recoverButton(event, buttonName) {
                event.target.classList.remove('disabled');
                event.target.textContent = buttonName
            }
        </script>
      
  {% endblock content %}