{% extends "ereuse_devicehub/base_site.html" %}
{% block main %}
<link href="https://cdn.jsdelivr.net/npm/simple-datatables@latest/dist/style.css" rel="stylesheet" type="text/css">

<div class="pagetitle">
  <h1>Inventory</h1>
  <nav>
    <ol class="breadcrumb">
      <li class="breadcrumb-item"><a href="index.html">Inventory</a></li>
      <li class="breadcrumb-item">Devices</li>
      <li class="breadcrumb-item active">Unassgined</li>
    </ol>
  </nav>
</div><!-- End Page Title -->

<section class="section profile">
  <div class="row">

    <div class="col-xl-12">

      <div class="card">
        <div class="card-body pt-3">
          <!-- Bordered Tabs -->

            <div class="btn-group dropdown ml-1">
              <button id="btnLots" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                <i class="bi bi-folder2"></i>
                Lots
                <span class="caret"></span>
              </button>
              <ul class="dropdown-menu" aria-labelledby="btnLots"">
                <li>
                  <a href="javascript:void()" class="dropdown-item" data-bs-toggle="modal" data-bs-target="#addingLotModal">
                    <i class="bi bi-plus"></i>
                    Adding to a lot
                  </a>
                </li>
                <li>
                  <a href="javascript:void()" class="dropdown-item" data-bs-toggle="modal" data-bs-target="#removeLotModal">
                    <i class="bi bi-x"></i>
                    Removing from a lot
                  </a>
                </li>
              </ul>
            </div>

            <div class="btn-group dropdown ml-1" uib-dropdown="">
              <button id="btnActions" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                  <i class="bi bi-plus"></i>
                  New Actions
              </button>
              <ul class="dropdown-menu" aria-labelledby="btnLots"">
                <li>
                  <a href="javascript:openAdd()" class="dropdown-item">
                    <i class="bi bi-plus"></i>
                    Añadir dispositivos a lotes
                  </a>
                </li>
                <li>
                  <a href="javascript:openRemove()" class="dropdown-item">
                    <i class="fa fa-fw fa-minus"></i>
                    Eliminar dispisitvos de lotes
                  </a>
                </li>
              </ul>
            </div>

            <div class="btn-group dropdown ml-1" uib-dropdown="">
              <button id="btnExport" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                  <i class="bi bi-reply"></i>
                  Exports
              </button>
              <ul class="dropdown-menu" aria-labelledby="btnLots"">
                <li>
                  <a href="javascript:openAdd()" class="dropdown-item">
                    <i class="bi bi-plus"></i>
                    Añadir dispositivos a lotes
                  </a>
                </li>
                <li>
                  <a href="javascript:openRemove()" class="dropdown-item">
                    <i class="fa fa-fw fa-minus"></i>
                    Eliminar dispisitvos de lotes
                  </a>
                </li>
              </ul>
            </div>

            <div class="btn-group dropdown ml-1" uib-dropdown="">
              <button id="btnTags" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                  <i class="bi bi-tag"></i>
                  Tags
              </button>
              <ul class="dropdown-menu" aria-labelledby="btnLots"">
                <li>
                  <a href="javascript:openAdd()" class="dropdown-item">
                    <i class="bi bi-plus"></i>
                    Adding Tag
                  </a>
                </li>
                <li>
                  <a href="javascript:openRemove()" class="dropdown-item">
                    <i class="bi bi-x"></i>
                    Remove Tag
                  </a>
                </li>
              </ul>
            </div>

          <div class="tab-content pt-2">

            <div class="tab-pane fade show active profile-overview" id="profile-overview">

              <h5 class="card-title">Computers</h5>
                <table class="table">
                  <thead>
                    <tr>
                      <th scope="col">Select all</th>
                      <th scope="col">Title</th>
                      <th scope="col">DHID</th>
                      <th scope="col">Tags</th>
                      <th scope="col">Status</th>
                      <th scope="col" data-type="date" data-format="DD-MM-YYYY">Update</th>
                    </tr>
                  </thead>
                  <tbody>
                    {% for dev in devices %}
                    <tr>
                      <td><input type="checkbox" class="deviceSelect" data="{{ dev.id }}"/></td>
                      <td>{{ dev.type }} {{ dev.manufacturer }} {{ dev.model }}</td>
                      <td>{{ dev.devicehub_id }}</td>
                      <td>
                        {% for t in dev.tags %}
                            {{ t.code }}{% if not loop.last %},{% endif %}
                        {% endfor %}
                      </td>
                      <td>{% if dev.status %}{{ dev.status }}{% endif %}</td>
                      <td>{{ dev.updated.strftime('%H:%M %d-%m-%Y') }}</td>
                    </tr>
                    {% endfor %}
                  </tbody>
                </table>

          </div><!-- End Bordered Tabs -->

        </div>
      </div>

    </div>
  </div>
</section>
{% include "inventory/addinglot.html" %}
{% include "inventory/removinglot.html" %}

<!-- CDN -->
<script src="https://cdn.jsdelivr.net/npm/simple-datatables@latest"></script>
<!-- Custom Code -->
<script>
  const table = new simpleDatatables.DataTable("table")
</script>
<script>

</script>
<script src="{{ url_for('static', filename='js/jquery-3.6.0.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/main_inventory.js') }}"></script>
{% endblock main %}
