{% extends "rest_framework/tailwind/base.html" %}
{% load tailwind_tags rest_framework %}

{% block content %}
<div class="flex-1 flex w-full items-stretch">

  {# Left: endpoint navigation — sticky, fixed width #}
  <aside class="hidden lg:block shrink-0 w-64 self-stretch border-r border-border bg-sidebar">
    <div class="sticky top-14 max-h-[calc(100vh-3.5rem)] overflow-y-auto pl-6 pr-4 py-8">
      {% include "rest_framework/tailwind/components/endpoint_nav.html" %}
    </div>
  </aside>

  {# Center: fluid content #}
  <main class="flex-1 min-w-0 px-8 lg:px-14 py-8">
    <div class="mx-auto max-w-3xl space-y-10">

      {% if breadcrumblist %}
        <nav class="text-[13px]">
          <ol class="flex flex-wrap items-center gap-2 text-muted-foreground">
            {% for name, url in breadcrumblist %}
              {% if forloop.last %}
                <li class="font-medium text-foreground">{{ name }}</li>
              {% else %}
                <li class="flex items-center gap-2">
                  <a href="{{ url }}" class="hover:text-foreground transition-colors">{{ name }}</a>
                  <span class="text-muted-foreground/50">/</span>
                </li>
              {% endif %}
            {% endfor %}
          </ol>
        </nav>
      {% endif %}

      {# Endpoint header #}
      {% if name or description %}
        <header>
          <h1 class="text-3xl font-semibold tracking-tight text-foreground">{{ name }}</h1>
          {% if description %}
            <div class="prose prose-sm dark:prose-invert max-w-none mt-3 text-muted-foreground">{{ description }}</div>
          {% endif %}

          {# Request line: method + URL + copy, single quiet bar #}
          <div class="mt-5 flex items-center gap-3 rounded-lg border border-border bg-muted pl-2.5 pr-1.5 py-1.5">
            <span class="{{ request.method|method_badge }}">{{ request.method|default:"GET" }}</span>
            <code class="flex-1 text-[13px] font-mono overflow-x-auto text-foreground">{{ request.get_full_path }}</code>
            <button @click="copy('{{ request.build_absolute_uri }}', 'URL copied')"
                    class="shrink-0 h-7 w-7 inline-flex items-center justify-center rounded-md text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
                    title="Copy URL">
              <i data-lucide="copy" class="w-4 h-4"></i>
            </button>
          </div>

          {% if available_formats %}
            <div class="mt-2 flex items-center gap-2 text-[12px] text-muted-foreground">
              <span>Formats:</span>
              {% for format in available_formats %}
                <a href="{% add_query_param request api_settings.URL_FORMAT_OVERRIDE format %}"
                   class="font-mono hover:text-foreground transition-colors">{{ format }}</a>
              {% endfor %}
            </div>
          {% endif %}
        </header>
      {% endif %}

      {% include "rest_framework/tailwind/components/response_viewer.html" %}

      {% include "rest_framework/tailwind/components/request_console.html" %}

      {% include "rest_framework/tailwind/components/pagination.html" %}

      {# Meta moves below content on narrow screens #}
      <div class="xl:hidden pt-2">
        {% include "rest_framework/tailwind/components/sidebar.html" %}
      </div>
    </div>
  </main>

  {# Right: API meta (info / auth) — sticky, fixed width #}
  <aside class="hidden xl:block shrink-0 w-72 self-stretch border-l border-border bg-sidebar">
    <div class="sticky top-14 max-h-[calc(100vh-3.5rem)] overflow-y-auto px-6 py-8">
      {% include "rest_framework/tailwind/components/sidebar.html" %}
    </div>
  </aside>
</div>
{% endblock %}