{% extends "modern_drf_swagger/base.html" %} 

{% load static %} 
{% block extra_head %}

<style>
  .docs-workspace {
    height: calc(100vh - 8rem);
  }

  @media (max-width: 1023px) {
    .docs-workspace {
      height: auto;
      min-height: calc(100vh - 10rem);
    }
  }
</style>
<script>
  // Pass Django settings to JavaScript
  window.PORTAL_CONFIG = {
    endpointsCollapsible: {% if endpoints_collapsible %}true{% else %}false{% endif %},
    endpointsDefaultCollapsed: {% if endpoints_default_collapsed %}true{% else %}false{% endif %},
    canSendRequest: {% if can_send_request %}true{% else %}false{% endif %},
    codeGenerationEnabled: {% if code_generate_enable %}true{% else %}false{% endif %},
    userRole: "{{ user_role|default:"" }}",
    authSchemes: {{ auth_schemes|safe }}
  };
</script>
{% endblock %} 

{% block content %}
<div class="docs-layout-toolbar mb-3">
  <div class="docs-layout-toolbar__group">
    <select
      id="layout-mode-select"
      class="dark-input rounded-md border px-2 py-1 text-sm"
      aria-label="Choose docs layout mode"
    >
      <option value="split">Split</option>
      <option value="stacked">Stacked</option>
    </select>
    <button
      id="layout-reset-btn"
      class="rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-3 py-1 text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 transition"
      type="button"
      title="Reset panel sizes"
    >
      Reset Panels
    </button>
  </div>
</div>

<div id="docs-workspace" class="docs-workspace layout-split">
  <!-- Left Panel: Endpoint List -->
  <div
    id="endpoints-panel"
    class="w-1/4 bg-gray-50 dark:bg-gray-800 rounded-lg border border-gray-300 dark:border-gray-700 overflow-hidden flex flex-col transition-colors duration-200"
  >
    <div class="p-4 border-b border-gray-300 dark:border-gray-700">
      <div class="flex items-center justify-between mb-3">
        <h2 class="text-xl font-semibold text-gray-900 dark:text-gray-100">
          Endpoints
        </h2>
        {% if endpoints_collapsible %}
        <div class="flex gap-1">
          <button
            id="collapse-all-btn"
            class="px-2 py-1 text-xs bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 rounded transition text-gray-700 dark:text-gray-300"
            title="Collapse all groups"
          >
            <svg
              class="w-3 h-3"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M5 15l7-7 7 7"
              ></path>
            </svg>
          </button>
          <button
            id="expand-all-btn"
            class="px-2 py-1 text-xs bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 rounded transition text-gray-700 dark:text-gray-300"
            title="Expand all groups"
          >
            <svg
              class="w-3 h-3"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M19 9l-7 7-7-7"
              ></path>
            </svg>
          </button>
        </div>
        {% endif %}
      </div>
      <input
        type="text"
        id="endpoint-search"
        placeholder="Search endpoints..."
        class="dark-input w-full px-3 py-2 rounded-lg text-sm border transition-colors duration-200"
      />
    </div>
    <div id="endpoint-list" class="flex-1 overflow-y-auto custom-scrollbar p-2">
      <div class="flex items-center justify-center h-full">
        <div class="spinner"></div>
      </div>
    </div>
  </div>

  <div
    id="resize-endpoints"
    class="panel-resizer panel-resizer-vertical"
    title="Resize endpoint panel"
    role="separator"
    aria-orientation="vertical"
    aria-label="Resize endpoint panel"
  ></div>

  <div id="docs-main-stack" class="docs-main-stack">
    <!-- Middle Panel: Request Editor -->
    <div
      id="request-panel"
      class="bg-gray-50 dark:bg-gray-800 rounded-lg border border-gray-300 dark:border-gray-700 overflow-hidden flex flex-col transition-colors duration-200"
    >
      <div class="p-4 border-b border-gray-300 dark:border-gray-700">
        <h2 class="text-xl font-semibold text-gray-900 dark:text-gray-100">
          Request
        </h2>
      </div>
      <div
        id="request-editor"
        class="flex-1 overflow-y-auto custom-scrollbar p-4"
      >
        <div class="text-center text-gray-500 dark:text-gray-400 py-12">
          <svg
            class="w-16 h-16 mx-auto mb-4 text-gray-400 dark:text-gray-600"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
            ></path>
          </svg>
          <p>Select an endpoint to start testing</p>
        </div>
      </div>
    </div>

    <div
      id="resize-main"
      class="panel-resizer panel-resizer-contextual"
      title="Resize request and response panels"
      role="separator"
      aria-label="Resize request and response panels"
    ></div>

    <!-- Right Panel: Response Viewer -->
    <div
      id="response-panel"
      class="bg-gray-50 dark:bg-gray-800 rounded-lg border border-gray-300 dark:border-gray-700 overflow-hidden flex flex-col transition-colors duration-200"
    >
      <div
        class="p-4 border-b border-gray-300 dark:border-gray-700 flex items-center justify-between"
      >
        <h2 class="text-xl font-semibold text-gray-900 dark:text-gray-100">
          Response
        </h2>
      </div>
      <div
        id="response-viewer"
        class="flex-1 overflow-y-auto custom-scrollbar p-4"
      >
        <div class="text-center text-gray-500 dark:text-gray-400 py-12">
          <svg
            class="w-16 h-16 mx-auto mb-4 text-gray-400 dark:text-gray-600"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
            ></path>
          </svg>
          <p>Send a request to see the response</p>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %} 

{% block extra_scripts %}
<script src="{% static 'modern_drf_swagger/js/endpoint-list.js' %}"></script>
<script src="{% static 'modern_drf_swagger/js/request-editor.js' %}"></script>
<script src="{% static 'modern_drf_swagger/js/response-viewer.js' %}"></script>
<script src="{% static 'modern_drf_swagger/js/code-generator.js' %}"></script>
<script src="{% static 'modern_drf_swagger/js/docs.js' %}"></script>
{% endblock %}