{% extends "api_portal/base.html" %} {% load static %} {% block extra_head %}
<style>
  .endpoint-panel {
    height: calc(100vh - 8rem);
  }
</style>
<script>
  // Pass Django settings to JavaScript
  window.PORTAL_CONFIG = {
    endpointsCollapsible: {{ endpoints_collapsible|lower }},
    endpointsDefaultCollapsed: {{ endpoints_default_collapsed|lower }}
  };
</script>
{% endblock %} {% block content %}
<div class="flex gap-4 endpoint-panel">
  <!-- Left Panel: Endpoint List -->
  <div
    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>

  <!-- Middle Panel: Request Editor -->
  <div
    class="flex-1 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>

  <!-- Right Panel: Response Viewer -->
  <div
    class="flex-1 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>
{% endblock %} {% block extra_scripts %}
<script src="{% static 'api_portal/js/endpoint-list.js' %}"></script>
<script src="{% static 'api_portal/js/request-editor.js' %}"></script>
<script src="{% static 'api_portal/js/response-viewer.js' %}"></script>
<script src="{% static 'api_portal/js/docs.js' %}"></script>
{% endblock %}