{% extends 'lara_django_base/lara_base.html' %}

{% block toolbar %}
  <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
    <h1 class="h2">{{ section_title }}</h1>
    <div class="btn-toolbar mb-2 mb-md-0">
      <div class="btn-group me-2">
        <a href="{% url create_link %}" class="btn btn-warning btn-sm btn-outline-secondary" role="button">Add</a>
        <button type="button" class="btn btn-sm btn-outline-secondary">Export</button>
      </div>
      <button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle">
        <span data-feather="sync"></span>
        Sync
      </button>
    </div>
  </div>
{% endblock %}

{% load render_table from django_tables2 %}

{% block content %}
  {% if messages %}
    <div class="messages">
      {% for message in messages %}
        <div class="alert alert-{{ message.tags }}">{{ message }}</div>
      {% endfor %}
    </div>
  {% endif %}
  <div class="h1 p-4 text-3xl font-bold text-gray-700">Device Instances</div>
  <h1 class="h1 p-4">
    <a href="{% url create_link %}" class="btn bg-green-500 text-white float-right">Add</a>
    <span class="h1 p-4">{{ section_title }}</span>
    current basket: {{ current_basket.name_display }}
    <span class="float-right">
      {% if can_view_device_order %}
        <a class="btn btn-sm bg-blue-200 btn-outline-secondary" href="{% url orders_admin_link %}">
          <span data-feather="shopping-cart"></span>
          Orders admin
        </a>
      {% endif %}
      <a class="btn btn-sm bg-blue-200 btn-outline-secondary" href="{% url orders_link %}">
        <span data-feather="shopping-cart"></span>
        Orders
      </a>
      <div class="dropdown dropdown-hover">
        <div tabindex="0" role="button" class="mr-5">
          <a class="btn btn-sm bg-blue-200 btn-outline-secondary" href="{% url baskets_link %}">
            <span data-feather="shopping-cart"></span>
            Baskets
          </a>
        </div>
        <ul tabindex="0" class="dropdown-content menu bg-blue-100 rounded-box z-[1] w-auto p-2 shadow">
          {% for basket in baskets %}
            <li class="menu-item">
              <a href="{% url list basket_id=basket.devicebasket_id %}">{{ basket.name_display }}</a>
            </li>
          {% endfor %}
        </ul>
      </div>
    </span>
  </h1>

  {% for pair in device_table_pairs %}
    <div class="collapse bg-base-100 border-base-300 border">
      <input type="checkbox" checked/>
      <div class="collapse-title font-semibold">Device: {{pair.device.name}}</div>
      <div class="collapse-content text-sm">
        {% render_table pair.table %}
      </div>
    </div>
  {% endfor %}
{% endblock %}