{% raw %}
<!DOCTYPE html>
<html lang="en" data-bs-theme="light">

<head>
  <!-- Meta tags for charset, IE compatibility, and responsive design -->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Page title displayed in browser tab -->
  <title>Moto</title>

  <!-- Bootstrap 5 CSS for responsive design and UI components -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">

  <!-- Bootstrap Table CSS for enhanced table functionality -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-table@1.25.0/dist/bootstrap-table.min.css">

</head>

<body>
  <!-- Sticky header section containing navigation and service tabs -->
  <div class="sticky-top">
    <!-- Main navigation bar with dark primary background -->
    <nav class="navbar navbar-expand-lg bg-body-secondary">
      <div class="container-fluid justify-content-center">
        <!-- Moto brand/logo -->
        <a class="navbar-brand" href="#">Moto objects</a>

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

        <!-- Collapsible navigation menu -->
        <div class="collapse navbar-collapse flex-grow-0" id="navbarNav">
          <ul class="navbar-nav">
            <!-- Home/Dashboard link -->
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="/moto-api">Home</a>
            </li>

            <!-- External link to Moto documentation with document icon -->
            <li class="nav-item">
              <a class="nav-link" target="_blank" rel="noopener noreferrer" href="https://docs.getmoto.org">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                  class="bi bi-file-earmark-text" viewBox="0 0 16 16">
                  <path
                    d="M5.5 7a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1zM5 9.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5m0 2a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5" />
                  <path
                    d="M9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4.5zm0 1v2A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1z" />
                </svg> Doc
              </a>
            </li>

            <!-- External link to Moto GitHub repository with Git icon -->
            <li class="nav-item">
              <a class="nav-link" target="_blank" rel="noopener noreferrer" href="https://github.com/getmoto/moto">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-git"
                  viewBox="0 0 16 16">
                  <path
                    d="M15.698 7.287 8.712.302a1.03 1.03 0 0 0-1.457 0l-1.45 1.45 1.84 1.84a1.223 1.223 0 0 1 1.55 1.56l1.773 1.774a1.224 1.224 0 0 1 1.267 2.025 1.226 1.226 0 0 1-2.002-1.334L8.58 5.963v4.353a1.226 1.226 0 1 1-1.008-.036V5.887a1.226 1.226 0 0 1-.666-1.608L5.093 2.465l-4.79 4.79a1.03 1.03 0 0 0 0 1.457l6.986 6.986a1.03 1.03 0 0 0 1.457 0l6.953-6.953a1.03 1.03 0 0 0 0-1.457" />
                </svg> GitHub
              </a>
            </li>

            <!-- About modal trigger link -->
            <li class="nav-item"><a class="nav-link" href="#about" data-bs-toggle="modal"
                data-bs-target="#aboutModal">About</a></li>
            <li class="nav-item py-2 py-lg-1 col-12 col-lg-auto">
              <div class="vr d-none d-lg-flex h-100 mx-lg-2"></div>
              <hr class="d-lg-none my-2">
            </li>


            <li class="nav-item dropdown"> <button class="btn btn-link nav-link dropdown-toggle" id="bd-theme"
                type="button" aria-expanded="false" data-bs-toggle="dropdown" data-bs-display="static"
                aria-label="Toggle theme (light)"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                  fill="currentColor" class="bi bi-circle-half" viewBox="0 0 16 16">
                  <path d="M8 15A7 7 0 1 0 8 1zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16" />
                </svg><span class="d-lg-none ms-2" id="bd-theme-text">Toggle theme</span> </button>
              <ul class="dropdown-menu dropdown-menu-start" aria-labelledby="bd-theme-text">
                <li> <button type="button" class="dropdown-item active" data-bs-theme-value="light" aria-pressed="true">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                      class="bi bi-sun-fill" viewBox="0 0 16 16">
                      <path
                        d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8M8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0m0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13m8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5M3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8m10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0m-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0m9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707M4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708" />
                    </svg>
                    Light
                  </button> </li>
                <li> <button type="button" class="dropdown-item" data-bs-theme-value="dark" aria-pressed="false"> <svg
                      xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                      class="bi bi-moon-stars-fill" viewBox="0 0 16 16">
                      <path
                        d="M6 .278a.77.77 0 0 1 .08.858 7.2 7.2 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277q.792-.001 1.533-.16a.79.79 0 0 1 .81.316.73.73 0 0 1-.031.893A8.35 8.35 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.75.75 0 0 1 6 .278" />
                      <path
                        d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.73 1.73 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.73 1.73 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.73 1.73 0 0 0 1.097-1.097zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.16 1.16 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.16 1.16 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732z" />
                    </svg>
                    Dark
                  </button> </li>

              </ul>
            </li>
          </ul>
        </div>
      </div>
    </nav>

    <!-- Secondary navigation bar for service tabs/pills -->
    <div class="d-flex container-fluid justify-content-center bg-body-tertiary">
      <div class="flex-grow-0">
        <!-- Service navigation tabs - populated dynamically by JavaScript -->
        <ul class="nav nav-pills px-5 my-2" id="list-service" role="tablist"></ul>
      </div>
    </div>
  </div>

  <!-- Main content area where service tables will be displayed -->
  <div class="container-fluid justify-content-center">
    <!-- Data container - dynamically populated by lib.js with service tables -->
    <div id="data" class="tab-content px-5">
      <!-- Initial loading state display -->
      <p>Loading Data.json</p>
      <div class="spinner-border text-secondary" role="status">
        <span class="visually-hidden">Loading...</span>
      </div>
    </div>
  </div>

  <!-- About Modal Dialog -->
  <div class="modal fade" id="aboutModal" tabindex="-1" role="dialog" aria-labelledby="aboutModal">
    <div class="modal-dialog">
      <div class="modal-content">
        <!-- Modal header with title and close button -->
        <div class="modal-header">
          <h4 class="modal-title" id="myModalLabel">About Moto</h4>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>

        <!-- Modal body with information about Moto project -->
        <div class="modal-body">
          <!-- Creator and contributors information -->
          <p>Moto was created by <a href="https://twitter.com/spulec">Steve Pulec</a> and <a
              href="https://github.com/getmoto/moto/blob/master/AUTHORS.md">many other contributors</a>.</p>

          <!-- Link to issue tracker for bug reports and feature requests -->
          <p>Please open any issues <a href="https://github.com/getmoto/moto/issues">here</a>.</p>
        </div>
      </div>
    </div>
  </div>


  <!-- JavaScript Dependencies -->

  <!-- jQuery library - required for Bootstrap Table functionality -->
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"
    integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>

  <!-- Bootstrap 5 JavaScript bundle including Popper.js for modals, dropdowns, and other interactive components -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI"
    crossorigin="anonymous"></script>

  <!-- Bootstrap Table JavaScript - provides enhanced table functionality (pagination, search, sorting) -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap-table@1.25.0/dist/bootstrap-table.min.js"></script>

  <!-- Custom JavaScript library - handles data fetching and table generation for Moto services -->
  <script src="/moto-api/lib.js"></script>

</body>

</html>
{% endraw %}