{% extends "base.html" %}
{% load partials static %}

{% block content %}
<div class="grid grid-cols-12 grid-rows-[min-content] gap-y-12 p-4 lg:gap-x-12 lg:p-10">
  {% include "includes/header.html" %}
</div>
<div class="grid grid-cols-12 grid-rows-[min-content] gap-y-12 p-4 lg:gap-x-12 lg:p-10">
  <div class="col-span-12 lg:col-span-8 lg:col-start-3">
    <a href="{% url 'dashboard:home' %}" class="flex items-center gap-2 text-gray-600 hover:text-gray-900">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
        <path fill-rule="evenodd" d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z" clip-rule="evenodd" />
      </svg>
      <span>Back to Dashboard</span>
    </a>
  </div>
</div>
<div class="grid grid-cols-12 grid-rows-[min-content] gap-y-12 p-4 lg:gap-x-12 lg:p-10">
  <div class="col-span-12 lg:col-span-8 lg:col-start-3">
    <h2 class="text-2xl font-bold text-center mb-6">Available Bento Boxes</h2>
  </div>
</div>

<div class="grid grid-cols-12 grid-rows-[min-content] gap-y-12 p-4 lg:gap-x-12 lg:p-10">
  <section class="col-span-12 lg:col-span-8 lg:col-start-3">
    <div class="bg-white shadow-sm rounded-lg border border-gray-200">
      <div class="overflow-x-auto">
        <table class="table w-full">
          <thead class="bg-gray-50">
            <tr>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Description</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Namespace</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tags</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Action</th>
            </tr>
          </thead>
          <tbody class="bg-white divide-y divide-gray-200">
            {% for bento in bento_boxes %}
            <tr>
              <td class="px-6 py-4 whitespace-nowrap">{{ bento.name }}</td>
              <td class="px-6 py-4">{{ bento.description }}</td>
              <td class="px-6 py-4 whitespace-nowrap">{{ bento.namespace }}</td>
              <td class="px-6 py-4">
                {% for tag in bento.tags %}
                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800 mr-2">
                  {{ tag }}
                </span>
                {% endfor %}
              </td>
              <td class="px-6 py-4 whitespace-nowrap">
                <span class="badge badge-neutral">Loaded</span>
                {% comment %} {% if bento.installed %}
                  <span class="badge badge-neutral">Loaded</span>
                {% else %}
                  <form method="POST" action="?bento={{ bento.name }}" class="inline"
                        hx-post="?bento={{ bento.name }}"
                        hx-trigger="submit"
                        hx-indicator="#loading-{{ bento.name }}">
                    {% csrf_token %}
                    <button type="submit" class="badge badge-primary flex items-center justify-center gap-2" id="install-btn-{{ bento.name }}">
                      <div class="flex items-center justify-center">    
                        Install
                        <span class="htmx-indicator loading loading-spinner loading-sm" id="loading-{{ bento.name }}"></span>
                      </div>
                    </button>
                  </form>
                {% endif %} {% endcomment %}
              </td>
            </tr>
            {% empty %}
            <tr>
              <td colspan="5" class="px-6 py-4 text-center text-sm text-gray-500">
                No bento boxes available
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </section>
</div>
{% endblock content %}

{% block inline_javascript %}
<script>
document.querySelectorAll('form').forEach(form => {
  form.addEventListener('submit', function(e) {
    const button = this.querySelector('button[type="submit"]');
    const normalState = button.querySelector('.normal-state');
    const loadingState = button.querySelector('.loading-state');
    
    // Disable button and show loading state
    button.disabled = true;
    button.classList.add('loading');
    normalState.classList.add('hidden');
    loadingState.classList.remove('hidden');
    
    // Optional: Add loading cursor to whole page
    document.body.style.cursor = 'wait';
  });
});
</script>
{% endblock %}