{% 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">
  <section class="col-span-12 lg:col-span-8 lg:col-start-3">
    <div class="card bg-base-100 shadow-xl">
      <div class="card-body">
        <div class="flex justify-between items-center mb-6">
          <a href="{% url 'dashboard:home' %}" class="btn">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" 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>
            Back
          </a>
          <div class="flex items-center gap-4">
            <div class="flex items-center gap-2">
              <h2 class="card-title text-2xl">Simple RAG Bento</h2>
              <div class="badge badge-secondary">v{{ config.version }}</div>
            </div>
            <a href="{% url 'simple_rag:settings' 'kitchenai_rag_simple_bento' %}" class="btn btn-primary">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd" />
              </svg>
              Settings
            </a>
          </div>
        </div>
        

        {% if handlers %}
        {% for handler_id, handler in handlers.items %}
        <div class="card bg-base-300 shadow-lg mb-6">
          <div class="card-body">
            <h3 class="card-title text-xl text-base-content">{{ handler.name }}</h3>
            <div class="divider"></div>
            <div class="mockup-code bg-neutral overflow-x-auto w-full">
              <pre data-prefix="$" class="whitespace-pre-wrap break-all text-neutral-content"><code>{{ handler.code }}</code></pre>
            </div>
            <div class="mt-4">
              <p class="text-sm bg-secondary text-secondary-content p-3 rounded-lg whitespace-pre-wrap">{{ handler.docstring }}</p>
            </div>
          </div>
        </div>
        {% endfor %}
        {% else %}
        <div class="alert alert-warning">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current shrink-0 w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
          <span>No handlers configured yet. Please check your configuration.</span>
        </div>
        {% endif %}

        <div class="card-actions justify-end">
        </div>
      </div>
    </div>
  </section>
</div>

</div>
{% endblock content %}
