{% extends "base.html" %}
{% load i18n %}
{% load paginacion %}

{% block actions %}
    {% if lot %}
    <a href="{% url 'lot:documents' object.id %}" type="button" class="btn btn-green-admin">
      <i class="bi bi-folder2"></i>
      {% trans 'Documents' %}
    </a>
    {% endif %}
    <a href="{# url 'dashboard:exports' object.id #}" type="button" class="btn btn-todo" data-bs-toggle="tooltip" title="NOT IMPLEMENTED. This action tries to emulate what devicehub-teal did, which was related to opening a dialog where you can select different options for export the devices as csv for all selected devices" >
      <i class="bi bi-reply"></i>
      {% trans 'Exports' %}
    </a>
    {% if lot %}
    <a href="{% url 'lot:annotations' object.id %}" type="button" class="btn btn-green-admin" >
      <i class="bi bi-tag"></i>
      {% trans 'properties' %}
    </a>
    {% endif %}

{% endblock%}

{% block content %}
<h3>{{ subtitle }}</h3>

<div class="dataTable-container mt-4">
  <form method="post">
    {% csrf_token %}

    <div class="d-flex justify-content-end m-2 mb-4">
      <button id="remove-button" class="btn btn btn-danger me-2" type="submit" value="{% url 'lot:del_devices' %}" name="url" disabled>
        <i class="bi bi-folder-minus pe-2"></i>
        {% trans 'Unassign' %}
      </button>
      <button class="btn btn-green-user" type="submit" name="url" value="{% url 'lot:add_devices' %}">
        <i class="bi bi-folder-symlink"></i>
        {% trans 'Assign to lot' %}
      </button>
    </div>

    <table class="table table-hover table-bordered">
      <thead class="table-light">
        <tr>
          <th scope="col" class="text-center">
            <input type="checkbox" id="select-all" />
          </th>
          <th scope="col" class="text-center">
            {% trans "Short ID" %}
          </th>
          <th scope="col" class="text-center">
            {% trans "Type" %}
          </th>
          <th scope="col" class="text-center">
            {% trans "Manufacturer" %}
          </th>
          <th scope="col" class="text-center">
            {% trans "Model" %}
          </th>
          <th scope="col" class="text-center">
            {% trans "Current State" %}
          </th>
          <th scope="col" data-type="date" class="text-center" data-format="YYYY-MM-DD HH:mm">
            {% trans "Evidence last updated" %}
          </th>
        </tr>
      </thead>
      <tbody>
        {% for dev in devices %}
        <tr>
          <td class="text-center">
            <input type="checkbox" name="devices" value="{{ dev.id }}" />
          </td>
          <td class="text-center">
            <a href="{% url 'device:details' dev.id %}">
              {{ dev.shortid }}
            </a>
          </td>
          <td class="text-center">
            {{ dev.type }}
          </td>
          <td class="text-center">
            {{ dev.manufacturer }}
          </td>
          <td class="text-center">
	          {% if dev.version %}
              {{dev.version}} {{ dev.model }}
	          {% else %}
              {{ dev.model }}
	          {% endif %}
          </td>
          <td class="text-center">
            {{ dev.get_current_state.state|default:"N/A" }}
          </td>
          <td class="text-center">
            {{ dev.last_evidence.created }}
          </td>
        </tr>
      </tbody>
    {% endfor %}
  </table>
  </form>
</div>

<div class="row mt-3">
  <div class="col">
    {% render_pagination page total_pages limit %}
  </div>
</div>

<script>
  // Placeholder check-all js
  document.getElementById('select-all').onclick = function() {
    var checkboxes = document.querySelectorAll('input[type="checkbox"]');
    for (var checkbox of checkboxes) {
      checkbox.checked = this.checked;
    }
  }

</script>
{% endblock %}