<!DOCTYPE html>
<html lang="en">

<head>
  {{> header }}
  <link rel="stylesheet" href="/css/api.css" />
  <title>API Reference - {{ siteTitle }}</title>
  <meta name="description" content="API Reference for {{ siteTitle }}" />
</head>

<body>
  {{#if githubPath}}
  <a href="https://github.com/{{ githubPath }}" class="github-corner" aria-label="View source on GitHub"><svg width="80"
      height="80" viewBox="0 0 250 250" style="color:#fff; position: absolute; top: 0; border: 0; right: 0;"
      aria-hidden="true">
      <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
      <path
        d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
        fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
      <path
        d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
        fill="currentColor" class="octo-body"></path>
    </svg></a>
  <style>
    .github-corner:hover .octo-arm { animation: octocat-wave 560ms ease-in-out }
    @keyframes octocat-wave { 0%,100% { transform: rotate(0) } 20%,60% { transform: rotate(-25deg) } 40%,80% { transform: rotate(10deg) } }
    @media (max-width:500px) { .github-corner:hover .octo-arm { animation: none } .github-corner .octo-arm { animation: octocat-wave 560ms ease-in-out } }
  </style>
  {{/if}}

  {{#if apiSpec}}
  <div class="api-mobile-toggle">
    <button id="api-sidebar-toggle">
      <span>API Navigation</span>
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>
    </button>
  </div>

  <div class="api-reference">
    <aside class="api-sidebar" id="api-sidebar">
      <input type="text" class="api-search" id="api-search" placeholder="Search endpoints..." />

      {{#each apiSpec.groups}}
      <div class="api-sidebar__group" data-group="{{this.id}}">
        <button class="api-sidebar__group-toggle">
          <span>{{this.name}}</span>
          <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
        </button>
        <div class="api-sidebar__group-items">
          {{#each this.operations}}
          <a href="#{{this.id}}" class="api-sidebar__item" data-method="{{this.method}}" data-path="{{this.path}}">
            <span class="method-badge method-badge--{{this.method}}">{{this.methodUpper}}</span>
            <span class="api-sidebar__item-path">{{this.path}}</span>
          </a>
          {{/each}}
        </div>
      </div>
      {{/each}}
    </aside>

    <main class="api-content">
      <section class="api-info">
        <h1 class="api-info__title">{{apiSpec.info.title}}</h1>
        {{#if apiSpec.info.version}}
        <span class="api-info__version">v{{apiSpec.info.version}}</span>
        {{/if}}
        {{#if apiSpec.info.description}}
        <div class="api-info__description">{{{apiSpec.info.description}}}</div>
        {{/if}}
        {{#if apiSpec.servers}}
        <div class="api-info__servers">
          <div class="api-info__server-label">Server</div>
          {{#each apiSpec.servers}}
          <code class="api-info__server-url">{{this.url}}</code>
          {{/each}}
        </div>
        {{/if}}
        <div class="api-auth">
          <div class="api-auth__label">Authorization</div>
          <div class="api-auth__controls">
            <select class="api-auth__type" id="api-auth-type">
              <option value="none">None</option>
              <option value="apikey">API Key (x-api-key)</option>
              <option value="bearer">Bearer Token</option>
            </select>
            <input type="password" class="api-auth__value api-auth__value--hidden" id="api-auth-value" placeholder="Enter value..." />
          </div>
        </div>
      </section>

      {{#each apiSpec.groups}}
      <div class="api-group" id="group-{{this.id}}">
        <div class="api-group__header">
          <h2 class="api-group__title">{{this.name}}</h2>
          {{#if this.description}}
          <div class="api-group__description">{{{this.description}}}</div>
          {{/if}}
        </div>

        {{#each this.operations}}
        <div class="api-operation api-operation--collapsed" id="{{this.id}}">
          <div class="api-operation__header" data-toggle="operation">
            <span class="method-badge method-badge--{{this.method}}">{{this.methodUpper}}</span>
            <span class="api-operation__path">{{this.path}}</span>
            {{#if this.summary}}
            <span class="api-operation__summary">{{this.summary}}</span>
            {{/if}}
            <svg class="api-operation__toggle-icon" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
          </div>
          <div class="api-operation__body">
            <div class="api-operation__docs">
              {{#if this.description}}
              <div class="api-operation__description">{{{this.description}}}</div>
              {{/if}}

              {{#if this.parameters.length}}
              <div class="api-section-title">Parameters</div>
              <table class="api-params-table">
                <thead><tr><th>Name</th><th>Type</th><th>In</th><th>Description</th></tr></thead>
                <tbody>
                  {{#each this.parameters}}
                  <tr>
                    <td><span class="api-param-name">{{this.name}}</span>{{#if this.required}}<span class="api-param-required">*</span>{{/if}}</td>
                    <td><span class="api-param-type">{{this.type}}</span></td>
                    <td><span class="api-param-in">{{this.in}}</span></td>
                    <td><span class="api-param-desc">{{this.description}}</span></td>
                  </tr>
                  {{/each}}
                </tbody>
              </table>
              {{/if}}

              {{#if this.requestBody}}
              <div class="api-section-title">Request Body <span class="api-param-type">{{this.requestBody.contentType}}</span></div>
              {{#if this.requestBody.schemaProperties.length}}
              <div class="api-schema"><div class="api-schema-props">
                {{#each this.requestBody.schemaProperties}}
                <div class="api-schema-prop">
                  <span class="api-schema-prop-name">{{this.name}}{{#if this.required}}<span class="api-param-required">*</span>{{/if}}</span>
                  <span class="api-schema-prop-type">{{this.type}}</span>
                  <span class="api-schema-prop-desc">{{this.description}}</span>
                </div>
                {{/each}}
              </div></div>
              {{/if}}
              {{#if this.requestBody.example}}
              <div class="api-response__example"><pre><code>{{this.requestBody.example}}</code></pre></div>
              {{/if}}
              {{/if}}

              {{#if this.responses.length}}
              <div class="api-section-title">Responses</div>
              {{#each this.responses}}
              <div class="api-response">
                <div class="api-response__status">
                  <span class="api-status-code api-status-code--{{this.statusClass}}">{{this.statusCode}}</span>
                  <span class="api-response__desc">{{this.description}}</span>
                </div>
                {{#if this.schemaProperties.length}}
                <div class="api-schema"><div class="api-schema-props">
                  {{#each this.schemaProperties}}
                  <div class="api-schema-prop">
                    <span class="api-schema-prop-name">{{this.name}}</span>
                    <span class="api-schema-prop-type">{{this.type}}</span>
                    <span class="api-schema-prop-desc">{{this.description}}</span>
                  </div>
                  {{/each}}
                </div></div>
                {{/if}}
                {{#if this.example}}
                <div class="api-response__example"><pre><code>{{this.example}}</code></pre></div>
                {{/if}}
              </div>
              {{/each}}
              {{/if}}

              <div class="api-code-examples">
                <div class="api-code-tabs">
                  <button class="api-code-tab api-code-tab--active" data-tab="curl">cURL</button>
                  <button class="api-code-tab" data-tab="javascript">JavaScript</button>
                  <button class="api-code-tab" data-tab="python">Python</button>
                </div>
                <div class="api-code-panel api-code-panel--active" data-panel="curl">
                  <button class="api-copy-btn" data-copy>Copy</button>
                  <pre><code>{{this.codeExamples.curl}}</code></pre>
                </div>
                <div class="api-code-panel" data-panel="javascript">
                  <button class="api-copy-btn" data-copy>Copy</button>
                  <pre><code>{{this.codeExamples.javascript}}</code></pre>
                </div>
                <div class="api-code-panel" data-panel="python">
                  <button class="api-copy-btn" data-copy>Copy</button>
                  <pre><code>{{this.codeExamples.python}}</code></pre>
                </div>
              </div>
            </div>

            {{> api-try-it }}
          </div>
        </div>
        {{/each}}
      </div>
      {{/each}}
    </main>
  </div>
  {{/if}}

  {{> footer}}
  {{> scripts }}

  <script src="/js/api.js"></script>
</body>

</html>
