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

{% load i18n static rest_framework drf_redesign %}

{% block meta %}
{{ block.super }}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{% endblock %}

{% block style %}
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap" rel="stylesheet">

{% block bootstrap_theme %}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
  integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
  integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@latest/font/bootstrap-icons.min.css">
{% endblock %}

<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/http.min.js"></script>
<script>hljs.highlightAll()</script>

{% block highlight_theme %}
<link id="hljs-theme" rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/a11y-dark.min.css">
{% endblock %}

<!-- Style overrides -->
<style>
  {% if code_style %}{{ code_style }}{% endif %}

  .dropdown-toggle::after {
    content: none;
  }

  pre code.hljs,
  code.hljs,
  .hljs {
    padding: 0px;
    font-family: 'Jetbrains Mono', monospace;
    background-color: transparent;
  }
</style>

<script>
    /*!
      * Color mode toggler for Bootstrap's docs (https://getbootstrap.com/)
      * Copyright 2011-2023 The Bootstrap Authors
      * Licensed under the Creative Commons Attribution 3.0 Unported License.
      */

    (() => {
      'use strict'

      const getStoredTheme = () => localStorage.getItem('theme')
      const setStoredTheme = theme => localStorage.setItem('theme', theme)

      const getPreferredTheme = () => {
        const storedTheme = getStoredTheme()
        if (storedTheme) {
          return storedTheme
        }

        return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
      }

      const setTheme = theme => {
        if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
          document.documentElement.setAttribute('data-bs-theme', 'dark')
          document.getElementById('hljs-theme').setAttribute('href', 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/a11y-dark.min.css')
        } else {
          document.documentElement.setAttribute('data-bs-theme', theme)
          if (theme === 'light') {
            document.getElementById('hljs-theme').setAttribute('href', 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/a11y-light.min.css')
          } else {
            document.getElementById('hljs-theme').setAttribute('href', 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/a11y-dark.min.css')
          }
        }
      }

      setTheme(getPreferredTheme())

      window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
        const storedTheme = getStoredTheme()
        if (storedTheme !== 'light' && storedTheme !== 'dark') {
          setTheme(getPreferredTheme())
        }
      })

      window.addEventListener('DOMContentLoaded', () => {
        document.querySelectorAll('[data-bs-theme-value]')
          .forEach(toggle => {
            toggle.addEventListener('click', () => {
              const theme = toggle.getAttribute('data-bs-theme-value')
              setStoredTheme(theme)
              setTheme(theme)
            })
          })
      })
    })()
</script>
{% endblock %}

{% block bodyclass %}my-5 py-5{% endblock %}

{% block navbar %}
<header class="fixed-top bg-danger p-1 shadow">
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark rounded-1 {% block bootstrap_navbar_variant %}{% endblock %}"
    role="navigation" aria-label="{% translate 'navbar' %}">
    <div class="container-fluid">
      {% block branding %}
      <a class="navbar-brand btn btn-danger" title="Django Rest Framework" data-bs-toggle="tooltip" rel="nofollow"
        href="https://www.django-rest-framework.org/">
        <abbr title="Django Rest Framework" class="text-decoration-none">
          <strong>DRF</strong>
        </abbr>
      </a>
      {% endblock %}

      <button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbar"
        aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbar">
        <ul class="navbar-nav me-auto">
          {% block userlinks %}
          <li class="nav-item">
            <a href="https://www.django-rest-framework.org/" class="nav-link">
              <i class="mx-2 bi bi-house-fill"></i>
              {% translate "Home" %}
            </a>
          </li>
          <li class="nav-item">
            <a href="https://www.django-rest-framework.org/tutorial/quickstart/" class="nav-link">
              <i class="mx-2 bi bi-journal-code"></i>
              {% translate "Tutorial" %}
            </a>
          </li>
          <li class="nav-item">
            <a href="https://github.com/encode/django-rest-framework/" class="nav-link">
              <i class="mx-2 bi bi-github"></i>
              {% translate "Github" %}
            </a>
          </li>
          <li class="nav-item">
            <a href="https://github.com/youzarsiph/rest-framework-redesign/" class="nav-link">
              <i class="mx-2 bi bi-code-slash"></i>
              {% translate "Redesign" %}
            </a>
          </li>
          {% endblock %}
        </ul>

        <ul class="navbar-nav gap-lg-4">
          <li class="nav-item dropdown">
            <a href="#" class="nav-link" data-bs-toggle="dropdown">
              <i class="mx-2 bi bi-person-fill"></i>
              {% if user.is_authenticated %}{{ request.user }}{% else %}{% translate "Account" %}{% endif %}
              <i class="mx-2 bi bi-chevron-down"></i>
            </a>
            <ul class="dropdown-menu dropdown-menu-end rounded-4 border-0 pb-3 shadow">
              <li>
                <h2 class="dropdown-header">
                  {% translate 'Account' %}
                </h2>
              </li>
              <li>
                {% if user.is_authenticated %}
                {% optional_logout request user csrf_token %}
                {% else %}
                {% optional_login request %}
                {% endif %}
              </li>
            </ul>
          </li>
          <li class="nav-item dropdown">
            <a href="#" class="nav-link" data-bs-toggle="dropdown">
              <i class="mx-2 bi bi-palette"></i>
              {% translate 'Theme' %}
              <i class="mx-2 bi bi-chevron-down"></i>
            </a>
            <ul class="dropdown-menu dropdown-menu-end rounded-4 border-0 pb-3 shadow">
              <li>
                <h2 class="dropdown-header">
                  {% translate 'Theme' %}
                </h2>
              </li>
              <li>
                <a class="dropdown-item px-4" href="#" data-bs-theme-value="auto">
                  <i class="mx-2 bi bi-circle-half"></i>
                  {% translate 'Auto' %}
                </a>
              </li>
              <li>
                <a class="dropdown-item px-4" href="#" data-bs-theme-value="light">
                  <i class="mx-2 bi bi-sun"></i>
                  {% translate 'Light' %}
                </a>
              </li>
              <li>
                <a class="dropdown-item px-4" href="#" data-bs-theme-value="dark">
                  <i class="mx-2 bi bi-moon-stars-fill"></i>
                  {% translate 'Dark' %}
                </a>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</header>
{% endblock %}

{% block breadcrumbs %}
<div class="card card-body mb-5">
  <nav aria-label="breadcrumb">
    <ol class="breadcrumb mb-0">
      {% for breadcrumb_name, breadcrumb_url in breadcrumblist %}
      {% if forloop.last %}
      <li class="breadcrumb-item active" aria-current="page">
        {{ breadcrumb_name }}
      </li>
      {% else %}
      <li class="breadcrumb-item">
        <a href="{{ breadcrumb_url }}">{{ breadcrumb_name }}</a>
      </li>
      {% endif %}
      {% empty %}
      {% block breadcrumbs_empty %}&nbsp;{% endblock breadcrumbs_empty %}
      {% endfor %}
    </ol>
  </nav>
</div>
{% endblock %}

{% block content %}
<main>
  <section title="{% translate 'Page Header' %}">
    <h1 class="display-4"><strong>{{ name }}</strong></h1>
    <div class="lead">
      {% block description %}{{ description }}{% endblock %}
    </div>
  </section>

  {% block request_forms %}
  <section class="d-grid d-md-flex align-items-center gap-4 mb-4" aria-label="{% translate 'Request form' %}">
    {% if 'GET' in allowed_methods %}
    <form id="get-form">
      <fieldset>
        {% if api_settings.URL_FORMAT_OVERRIDE %}
        <div class="btn-group w-100" role="group">
          <a class="btn btn-primary w-100 shadow-sm" href="{{ request.get_full_path }}" rel="nofollow"
            title="Make a GET request on the {{ name }} resource" data-bs-toggle="tooltip">
            <i class="mx-2 bi bi-arrow-clockwise"></i>
            {% translate "GET" %}
          </a>
          <button class="btn btn-outline-primary dropdown-toggle shadow-sm" type="button" id="dropdownMenuButton"
            data-bs-toggle="dropdown" aria-expanded="false">
            <i class="mx-2 bi bi-chevron-down"></i>
          </button>
          <div class="dropdown">
            <ul class="dropdown-menu dropdown-menu-end rounded-4 border-0 pb-3 shadow w-100"
              aria-labelledby="dropdownMenuButton">
              <li>
                <h6 class="dropdown-header">
                  {% translate 'Select a format' %}
                </h6>
              </li>
              {% for format in available_formats %}
              <li>
                <a class="dropdown-item" data-bs-toggle="tooltip"
                  href="{% add_query_param request api_settings.URL_FORMAT_OVERRIDE format %}" rel="nofollow"
                  title="Make a GET request on the {{ name }} resource with the format set to `{{ format|upper }}`">
                  {{ format|upper }}
                </a>
              </li>
              {% endfor %}
            </ul>
          </div>
        </div>
        {% else %}
        <a class="btn btn-primary shadow-sm" href="{{ request.get_full_path }}" rel="nofollow"
          title="Make a GET request on the {{ name }} resource" data-bs-toggle="tooltip">
          <i class="mx-2 bi bi-arrow-clockwise"></i>
          {% translate "GET" %}
        </a>
        {% endif %}
      </fieldset>
    </form>
    {% endif %}

    {% if options_form %}
    <form class="button-form" action="{{ request.get_full_path }}" data-method="OPTIONS">
      <button type="submit" class="btn btn-info w-100 shadow-sm"
        title="Make an OPTIONS request on the {{ name }} resource" data-bs-toggle="tooltip">
        <i class="mx-2 bi bi-info-square"></i>
        {% translate "OPTIONS" %}
      </button>
    </form>
    {% endif %}

    {% if delete_form %}
    <div>
      <button type="button" class="btn btn-danger w-100 shadow-sm" data-bs-toggle="modal" data-bs-target="#deleteModal"
        title="Make a DELETE request on the {{ name }} resource">
        <i class="mx-2 bi bi-trash"></i>
        {% translate "DELETE" %}
      </button>
    </div>

    <div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content p-md-3 p-lg-4 rounded-4 shadow">
          <div class="modal-header border-bottom-0">
            <h3 class="modal-title" id="exampleModalLabel">
              {% translate 'Delete' %} {{ name }}
            </h3>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <p class="mb-4">
              {% translate "Are you sure you want to delete this" %} {{ name }}?
            </p>
            <div class="d-grid d-lg-flex align-items-lg-center gap-4">
              <form class="button-form w-100" action="{{ request.get_full_path }}" data-method="DELETE">
                <button class="btn btn-danger w-100 shadow-sm">
                  <i class="mx-2 bi bi-trash"></i>
                  {% translate "Delete" %}
                </button>
              </form>
              <button type="button" class="btn btn-outline-secondary w-100 shadow-sm" data-bs-dismiss="modal">
                <i class="mx-2 bi bi-x-lg"></i>
                {% translate "Cancel" %}
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
    {% endif %}

    {% if extra_actions %}
    <div class="dropdown">
      <button class="btn btn-warning w-100 shadow-sm" id="extra-actions-menu" data-bs-toggle="dropdown"
        aria-haspopup="true" aria-expanded="true">
        {% translate "Extra Actions" %}
        <i class="mx-2 bi bi-chevron-down"></i>
      </button>
      <ul class="dropdown-menu rounded-4 border-0 pb-3 shadow w-100" aria-labelledby="extra-actions-menu">
        <li>
          <h3 class="dropdown-header">
            {% translate 'Select an action' %}
          </h3>
        </li>
        {% for action_name, url in extra_actions|items %}
        <li>
          <a class="dropdown-item" href="{{ url }}">
            {{ action_name }}
          </a>
        </li>
        {% endfor %}
      </ul>
    </div>
    {% endif %}

    {% if filter_form %}
    <button data-bs-toggle="modal" data-bs-target="#filtersModal" class="btn btn-success shadow-sm">
      <i class="mx-2 bi bi-filter"></i>
      {% translate "Filters" %}
    </button>
    {% endif %}
  </section>
  {% endblock %}

  {% if paginator %}
  <section title="{% translate 'Pagination' %}" class="fixed-bottom shadow">
    <div class="card card-body border-0 shadow">
      {% get_pagination_html paginator %}
    </div>
  </section>
  {% endif %}

  <div class="row g-4 mb-4" aria-label="{% translate 'Main content' %}">
    <section class="col-12 col-lg-8 order-last order-lg-first" role="main" aria-label="{% translate 'Main content' %}">
      <div class="card card-body grid gap-4 border-0 rounded-4 p-4 shadow">
        <div class="request-info" aria-label="{% translate 'Request info' %}">
          <pre
            class="prettyprint mb-0"><code class="language-http">{{ request.method }} {{ request.get_full_path }}</code></pre>
        </div>

        <div class="response-info" aria-label="{% translate 'response info' %}">
          <pre class="prettyprint mb-0 d-grid"><code class="language-http">HTTP {{ response.status_code }} {{ response.status_text }}
{% for key, val in response_headers|items %}{{ key }}: {{ val|break_long_headers|urlize }}
{% endfor %}</code><code class="language-json">{{ content|urlize }}</code></pre>
        </div>
      </div>
    </section>

    <section class="col-12 col-lg-4">
      {% if display_edit_forms %}
      {% if post_form or raw_data_post_form %}
      <div {% if post_form %}class="card card-body border-0 rounded-4 p-4 shadow" {% endif %}>
        {% if post_form %}
        <ul class="nav nav-pills nav-fill gap-4 p-1 rounded-5 border mb-4 shadow-sm" role="tablist">
          <li class="nav-item" role="presentation">
            <button class="nav-link active rounded-5" id="form-tab" data-bs-toggle="tab" data-bs-target="#form"
              type="button" role="tab" aria-controls="form" aria-selected="true">
              <i class="mx-2 bi bi-filetype-html"></i>
              {% translate 'HTML form' %}
            </button>
          </li>
          <li class="nav-item" role="presentation">
            <button class="nav-link rounded-5" id="raw-tab" data-bs-toggle="tab" data-bs-target="#raw" type="button"
              role="tab" aria-controls="raw" aria-selected="false">
              <i class="mx-2 bi bi-filetype-json"></i>
              {% translate 'Raw data' %}
            </button>
          </li>
        </ul>
        {% endif %}

        <div class="tab-content">
          {% if post_form %}
          <div class="tab-pane active" id="form" role="tabpanel" aria-labelledby="form-tab" tabindex="0">
            {% with form=post_form %}
            <form action="{{ request.get_full_path }}" method="POST" enctype="multipart/form-data"
              class="form-horizontal">
              <fieldset>
                {% csrf_token %}
                {{ post_form }}
                <div class="form-actions">
                  <button class="btn btn-primary w-100 shadow-sm" title="Make a POST request on the {{ name }} resource"
                    data-bs-toggle="tooltip">
                    <i class="mx-2 bi bi-send-fill"></i>
                    {% translate "POST" %}
                  </button>
                </div>
              </fieldset>
            </form>
            {% endwith %}
          </div>
          {% endif %}

          <div class="tab-pane" id="raw" role="tabpanel" aria-labelledby="raw-tab" tabindex="0">
            {% with form=raw_data_post_form %}
            <form action="{{ request.get_full_path }}" method="POST" class="form-horizontal">
              <fieldset>
                {% include "rest_framework/raw_data_form.html" %}
                <div class="form-actions">
                  <button class="btn btn-primary w-100 shadow-sm" title="Make a POST request on the {{ name }} resource"
                    data-bs-toggle="tooltip">
                    <i class="mx-2 bi bi-send-fill"></i>
                    {% translate "POST" %}
                  </button>
                </div>
              </fieldset>
            </form>
            {% endwith %}
          </div>
        </div>

        <p class="small mt-4 mb-0">
          <span class="text-danger">*</span> Indicates Required
        </p>
      </div>
      {% endif %}

      {% if put_form or raw_data_put_form or raw_data_patch_form %}
      <div {% if put_form %}class="card card-body border-0 rounded-4 p-4 shadow" {% endif %}>
        {% if put_form %}
        <ul class="nav nav-pills nav-fill gap-4 p-1 rounded-5 border mb-4 shadow-sm" role="tablist">
          <li class="nav-item" role="presentation">
            <button class="nav-link active rounded-5" id="form-tab" data-bs-toggle="tab"
              data-bs-target="#put-object-form" type="button" role="tab" aria-controls="form" aria-selected="true">
              <i class="mx-2 bi bi-filetype-html"></i>
              {% translate 'HTML form' %}
            </button>
          </li>
          <li class="nav-item" role="presentation">
            <button class="nav-link rounded-5" id="raw-tab" data-bs-toggle="tab"
              data-bs-target="#put-generic-content-form" type="button" role="tab" aria-controls="raw"
              aria-selected="false">
              <i class="mx-2 bi bi-filetype-json"></i>
              {% translate 'Raw data' %}
            </button>
          </li>
        </ul>
        {% endif %}

        <div class="tab-content">
          {% if put_form %}
          <div class="tab-pane active" id="put-object-form">
            <form action="{{ request.get_full_path }}" data-method="PUT" enctype="multipart/form-data"
              class="form-horizontal">
              <fieldset>
                {{ put_form }}
                <div class="form-actions">
                  <button class="btn btn-primary w-100 shadow-sm" title="Make a PUT request on the {{ name }} resource"
                    data-bs-toggle="tooltip">
                    <i class="mx-2 bi bi-send-fill"></i>
                    {% translate "PUT" %}
                  </button>
                </div>
              </fieldset>
            </form>
          </div>
          {% endif %}

          <div {% if put_form %}class="tab-pane" {% endif %} id="put-generic-content-form">
            {% with form=raw_data_put_or_patch_form %}
            <form action="{{ request.get_full_path }}" data-method="PUT" class="form-horizontal">
              <fieldset>
                {% include "rest_framework/raw_data_form.html" %}
                <div class="form-actions">
                  {% if raw_data_put_form %}
                  <button class="btn btn-primary w-100 shadow-sm" title="Make a PUT request on the {{ name }} resource"
                    data-bs-toggle="tooltip">
                    <i class="mx-2 bi bi-send-fill"></i>
                    {% translate "PUT" %}
                  </button>
                  {% endif %}
                  {% if raw_data_patch_form %}
                  <button data-method="PATCH" class="btn btn-outline-primary w-100 mt-4 shadow-sm"
                    title="Make a PATCH request on the {{ name }} resource" data-bs-toggle="tooltip">
                    <i class="mx-2 bi bi-send-fill"></i>
                    {% translate "PATCH" %}
                  </button>
                  {% endif %}
                </div>
              </fieldset>
            </form>
            {% endwith %}
          </div>
        </div>
      </div>
      {% endif %}
      {% endif %}
    </section>
  </div>
</main>
{% endblock %}

{% if filter_form %}
{{ filter_form }}
{% endif %}

{% block script %}
{{ block.super }}
<script>
  // Make all links in response section clickable
  setTimeout(() =>
    document.querySelectorAll('.response-info .language-json .hljs-string .str').forEach(e => {
      if (e.innerHTML.startsWith('"http')) {
        e.innerHTML = `<a href="${e.innerHTML.slice(1, e.innerHTML.length - 1)}">${e.innerHTML}</a>`
      }
    }), 100);

  const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
  const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
</script>
{% endblock %}