<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>{{title}}</title>

    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
      integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
      crossorigin="anonymous"
    />
    <script
      src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
      integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
      crossorigin="anonymous"
    ></script>

    <style>
      h4 {
        display: inline;
      }

      p {
        word-wrap: break-word;
      }

      .sidenav,
      .content {
        overflow-y: auto;
        height: calc(100vh - 57px);
        max-height: calc(100vh - 57px);
      }

      .sidenav {
        padding: 0;
        display: flex;
        flex-wrap: nowrap;
        flex-direction: column;
        justify-content: start;
        align-items: stretch;
        align-content: start
      }

      #toc {
        overflow-y: auto;
      }

      .card {
        margin-bottom: 15px;
      }

      .card-header {
        cursor: pointer;
      }

      .content,
      .card-block,
      .search-form {
        padding: 15px;
      }

      .nav-link {
        color: #343a40 !important;
      }

      .nav-pills .nav-link.active,
      .nav-pills .show > .nav-link {
        color: #f8f9fa !important;
        background-color: #343a40 !important;
      }

      .card.disabled, .nav-link.disabled {
        opacity: 0.5;
      }
    </style>
  </head>

  <body class="bg-light">
    <nav
      class="navbar navbar-dark bg-dark justify-content-between sticky-top border-bottom"
    >
      <a class="navbar-brand">{{title}} {{version}}</a>
    </nav>

    <div class="container-fluid">
      <div class="row">
        <div class="sidenav col-2 bg-white border-right">
          <form class="search-form border-bottom" onsubmit="return false">
            <input class="form-control search-input" type="search" placeholder="Search" />
          </form>

          <nav id="toc">
            <ul class="nav nav-pills flex-column">
              {{#methods}}
              <li class="nav-item">
                <a class="nav-link" href="#{{id}}">{{name}}</a>
              </li>
              {{/methods}}
            </ul>
          </nav>
        </div>

        <div class="content col-10" data-spy="scroll" data-target="#toc">
          <div class="card border">
            <div class="card-block">{{{description}}}</div>

            {{#servers.length}}
            <div class="card-block table-responsive">
              <h5>Servers</h5>
              <table class="table table-striped table-hover table-sm">
                <tr>
                  <th>URL</th>
                  <th>Description</th>
                </tr>
                {{#servers}}
                <tr>
                  <td>{{{url}}}</td>
                  <td>{{{description}}}</td>
                </tr>
                {{/servers}}
              </table>
            </div>
            {{/servers.length}}
          </div>

          {{#methods}}
          <div class="card method" id="{{id}}">
            <div
              class="card-header text-light bg-dark"
              data-toggle="collapse"
              href="#{{id}}-content"
            >
              <h4>
                <span>{{name}}</span>

                <div class="float-right">
                  {{#tags}}
                  <span class="badge badge-light">{{.}}</span>
                  {{/tags}}
                </div>
              </h4>
            </div>

            <div class="card-block collapse show" id="{{id}}-content">
              {{#summary}}
              <p>{{summary}}</p>
              {{/summary}}
              
              {{#description}}
              <p>{{{description}}}</p>
              {{/description}}

              <hr />

              <div class="container-fluid">
                <div class="row">
                  <div class="col-8 border-right">

                    {{#params.length}}
                    <h5>Parameters</h5>
                    <div class="table-responsive">
                      <table class="table table-striped table-hover table-sm">
                        <tr>
                          <th>Name</th>
                          <th>Type</th>
                          <th>Constraints</th>
                          <th>Description</th>
                        </tr>
                        {{#params}}
                        <tr>
                          <td>{{name}}</td>
                          <td>{{type}}</td>
                          <td>{{{constraints}}}</td>
                          <td>{{{description}}}</td>
                        </tr>
                        {{/params}}
                      </table>
                    </div>
                    {{/params.length}}
                    
                    {{#result.length}}
                    <h5>Result</h5>
                    <div class="table-responsive">
                      <table class="table table-striped table-hover table-sm">
                        <tr>
                          <th>Name</th>
                          <th>Type</th>
                          <th>Constraints</th>
                          <th>Description</th>
                        </tr>
                        {{#result}}
                        <tr>
                          <td>{{name}}</td>
                          <td>{{type}}</td>
                          <td>{{{constraints}}}</td>
                          <td>{{{description}}}</td>
                        </tr>
                        {{/result}}
                      </table>
                    </div>
                    {{/result.length}}
                    
                    {{#errors.length}}
                    <h5>Errors</h5>
                    <div class="table-responsive">
                      <table class="table table-striped table-hover table-sm">
                        <tr>
                          <th>Code</th>
                          <th>Message</th>
                          <th>Description</th>
                        </tr>
                        {{#errors}}
                        <tr>
                          <td>{{code}}</td>
                          <td>{{message}}</td>
                          <td>{{{description}}}</td>
                        </tr>
                        {{/errors}}
                      </table>
                    </div>
                    {{/errors.length}}

                  </div>

                  <div class="col-4">
                    <h5>Request example</h5>
                    <pre class="bg-light">{{{requestExample}}}</pre>

                    <h5>Response example</h5>
                    <pre class="bg-light">{{{responseExample}}}</pre>
                  </div>
                </div>
              </div>
            </div>
          </div>
          {{/methods}}
        </div>
      </div>
    </div>

    <script>
      $.expr[":"].contains = $.expr.createPseudo(function(arg) {
        return function(elem) {
          return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
        };
      });

      $(".search-input").on("paste keyup search", (event) => {
        const inputValue = event.target.value;
        
        $(`a`).removeClass("disabled");

        if(inputValue) {
          $(`.card.method:contains("${inputValue}")`).removeClass("disabled");
          $(`.card.method:contains("${inputValue}") .collapse`).collapse("show");
          $(`.card.method:not(:contains("${inputValue}"))`).addClass("disabled");
          $(`.card.method:not(:contains("${inputValue}")) .collapse`).collapse("hide");
          $(`.card.method:not(:contains("${inputValue}"))`).each((index, element) => {
           $(`a[href='#${element.id}']`).addClass("disabled");
          });

          document.querySelector('.card.method:not(.disabled)').scrollIntoView();
        }
        else {
          $(".card.method").removeClass("disabled");
          $(".card.method .collapse").collapse("show");
        }
      });
    </script>
  </body>
</html>
