{% 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">
                {% if bento.installed %}
                  <button class="btn btn-disabled btn-sm">Loaded</button>
                {% else %}
                  <button class="btn btn-primary btn-sm" onclick="installBento('{{ bento.name }}')">Install</button>
                {% endif %}
              </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 %}
