<main class="py-16">
   <article class="prose ">
      <h1>
         <%= pageData.title -%>
      </h1>
      <p class="lead">
         <%= pageData.description -%>
      </p>

      <h2 id="the-contact-model" class="scroll-mt-24">
         The <%= pageData.title -%> Model
      </h2>

      <script>
         function showPermissions(id) {
            var permissionsblock = document.getElementById(id + "-permissions");
            var viewPermissionsBtn = document.getElementById(id + "-view-permissions");

            if (permissionsblock.style.display === "none") {
               permissionsblock.style.display = "block";
               viewPermissionsBtn.innerHTML = "Hide Permissions";
            } else {
               permissionsblock.style.display = "none";
               viewPermissionsBtn.innerHTML = "View Permissions";
            }
         }
      </script>

      <h3>Properties</h3>
      <div class="my-6">
         <ul role="list" class="m-0 w-full list-none divide-y divide-zinc-900/5 p-0 ">
            <% for(var i=0; i<Object.keys(pageData.columns).length; i++) {%>
               <li class="m-0 px-0 py-4 first:pt-0 last:pb-0 mt-5">
                  <dl class="m-0 flex flex-wrap items-center gap-x-3 gap-y-2">
                     <dt class="sr-only">Name</dt>
                     <dd><code class="model-inline-code"><%= Object.keys(pageData.columns)[i] -%></code></dd>
                     <dt class="sr-only">Type</dt>
                     <dd class="font-mono text-xs text-zinc-400 ">

                        <%= pageData.columns[Object.keys(pageData.columns)[i]].type -%>

                           <% if(pageData.columns[Object.keys(pageData.columns)[i]].required){ %>
                              (Required)
                              <% } %>


                     </dd>
                     <dt class="sr-only">Description</dt>
                     <dd class="w-full flex-none text-sm [&amp;>:first-child]:mt-0 [&amp;>:last-child]:mb-0">
                        <p>
                           <%= pageData.columns[Object.keys(pageData.columns)[i]].description -%> <a
                                 class="text-gray-500 hover:underline cursor-pointer text-xs"
                                 id="<%= Object.keys(pageData.columns)[i] -%>-view-permissions"
                                 onclick="showPermissions('<%= Object.keys(pageData.columns)[i] -%>')">View
                                 Permissions</a>
                        </p>
                     </dd>

                     <dd class="font-mono text-xs" style="display: none;"
                        id="<%= Object.keys(pageData.columns)[i] -%>-permissions">

                        <div class="mb-3 mt-3">
                           <span class="text-gray-700  text-xs">Permissions to Create:&nbsp;</span>

                           <% for(var j=0; j <
                              pageData.columns[Object.keys(pageData.columns)[i]].permissions.create.length; j++) {%>
                              <span
                                 class="rounded-xl p-0.5 px-1 text-xs text-slate-500 bg-slate-100 border-2 border-slate-200">
                                 <%= pageData.columns[Object.keys(pageData.columns)[i]].permissions.create[j] -%>
                              </span>

                              <% if(j
                                 !==pageData.columns[Object.keys(pageData.columns)[i]].permissions.create.length-1){ %>
                                 <span class="text-gray-400 text-xs ml-1 mr-1">or</span>
                                 <% } %>

                                    <% } %>

                                       <% if(pageData.columns[Object.keys(pageData.columns)[i]].permissions.create.length===0){
                                          %>
                                          <span class="p-0.5 px-1 text-xs text-rose-400"> This property is
                                             autogenerated. </span>
                                          <% } %>


                        </div>

                        <div class="mb-3 mt-3">
                           <span class="text-gray-700  text-xs">Permissions to Read:&nbsp;</span>

                           <% for(var j=0; j <
                              pageData.columns[Object.keys(pageData.columns)[i]].permissions.read.length; j++) {%>
                              <span
                                 class="rounded-xl p-0.5 px-1 text-xs text-slate-500 bg-slate-100 border-2 border-slate-200">
                                 <%= pageData.columns[Object.keys(pageData.columns)[i]].permissions.read[j] -%>
                              </span>

                              <% if(j !==pageData.columns[Object.keys(pageData.columns)[i]].permissions.read.length-1){
                                 %>
                                 <span class="text-gray-400 text-xs ml-1 mr-1">or</span>
                                 <% } %>

                                    <% } %>

                                       <% if(pageData.columns[Object.keys(pageData.columns)[i]].permissions.read.length===0){
                                          %>
                                          <span class="p-0.5 px-1 text-xs text-rose-400"> This property cannot be read.
                                          </span>
                                          <% } %>


                        </div>

                        <div class="mb-3 mt-3">
                           <span class="text-gray-700 text-xs">Permissions to Update:&nbsp;</span>

                           <% for(var j=0; j <
                              pageData.columns[Object.keys(pageData.columns)[i]].permissions.update.length; j++) {%>
                              <span
                                 class="rounded-xl p-0.5 px-1 text-xs text-slate-500 bg-slate-100 border-2 border-slate-200">
                                 <%= pageData.columns[Object.keys(pageData.columns)[i]].permissions.update[j] -%>
                              </span>

                              <% if(j
                                 !==pageData.columns[Object.keys(pageData.columns)[i]].permissions.update.length-1){ %>
                                 <span class="text-gray-400 text-xs ml-1 mr-1">or</span>
                                 <% } %>

                                    <% } %>


                                       <% if(pageData.columns[Object.keys(pageData.columns)[i]].permissions.update.length===0){
                                          %>
                                          <span class="p-0.5 px-1 text-xs text-rose-400"> This property cannot be
                                             updated. </span>
                                          <% } %>

                        </div>




                     </dd>
                  </dl>
               </li>
               <% } %>
         </ul>
      </div>


      <div class="mt-10">
         <hr>
         <div class="flex items-center gap-x-3 mt-10"><span
               class="font-mono text-[0.625rem] font-semibold leading-6 rounded-lg px-1.5 ring-1 ring-inset ring-emerald-300  bg-emerald-400/10 text-emerald-500 ">GET</span>
            <span class="font-mono text-xs text-zinc-400">or</span> <span
               class="font-mono text-[0.625rem] font-semibold leading-6 rounded-lg px-1.5 ring-1 ring-inset ring-sky-300  bg-sky-400/10 text-sky-500 ">POST</span><span
               class="h-0.5 w-0.5 rounded-full bg-zinc-300 "></span><span class="font-mono text-xs text-zinc-400">
               <%= pageData.apiPath -%>/get-list
            </span>
         </div>
         <div class="-mt-20">
            <h2 id="list-all-contacts" class="mt-2 scroll-mt-32"><span
                  class="group text-inherit no-underline hover:text-inherit">List</span></h2>

            <div class="grid grid-cols-1 items-start gap-x-16 gap-y-10 xl:max-w-none xl:grid-cols-2">
               <div class="[&amp;>:first-child]:mt-0 [&amp;>:last-child]:mb-0">
                  <p>This endpoint allows you to retrieve a paginated list of all your <%= pageData.title -%>. By
                        default, a maximum of ten
                        <%= pageData.title -%> are shown per page.</p>
                  <h3>Optional Query Params</h3>
                  <div class="my-6">
                     <ul role="list"
                        class="m-0 max-w-[calc(theme(maxWidth.lg)-theme(spacing.8))] list-none divide-y divide-zinc-900/5 p-0 ">
                        <li class="m-0 px-0 py-4 first:pt-0 last:pb-0">

                           <dl class="m-0 flex flex-wrap items-center gap-x-3 gap-y-2">
                              <dt class="sr-only">Limit</dt>
                              <dd><code class="inline-code">limit</code></dd>
                              <dt class="sr-only">Type</dt>
                              <dd class="font-mono text-xs text-zinc-400 ">number</dd>
                              <dt class="sr-only">Description</dt>
                              <dd class="w-full flex-none [&amp;>:first-child]:mt-0 [&amp;>:last-child]:mb-0">
                                 <p>Number of objects to fetch. By default 10, you can increase this count up to 100</p>
                              </dd>
                           </dl>
                        </li>
                        <li class="m-0 px-0 py-4 first:pt-0 last:pb-0">
                           <dl class="m-0 flex flex-wrap items-center gap-x-3 gap-y-2">
                              <dt class="sr-only">Skip</dt>
                              <dd><code class="inline-code">skip</code></dd>
                              <dt class="sr-only">Type</dt>
                              <dd class="font-mono text-xs text-zinc-400 ">number</dd>
                              <dt class="sr-only">Description</dt>
                              <dd class="w-full flex-none [&amp;>:first-child]:mt-0 [&amp;>:last-child]:mb-0">
                                 <p>Number of objects to skip. This can be useful in pagination</p>
                              </dd>
                           </dl>
                        </li>
                     </ul>
                  </div>
                  <h3>Optional Request Body</h3>
                  <div class="my-6">
                     <ul role="list"
                        class="m-0 max-w-[calc(theme(maxWidth.lg)-theme(spacing.8))] list-none divide-y divide-zinc-900/5 p-0 ">
                        <li class="m-0 px-0 py-4 first:pt-0 last:pb-0">
                           <dl class="m-0 flex flex-wrap items-center gap-x-3 gap-y-2">
                              <dt class="sr-only">Query</dt>
                              <dd><code class="inline-code">query</code></dd>
                              <dt class="sr-only">Type</dt>
                              <dd class="font-mono text-xs text-zinc-400 ">query</dd>
                              <dt class="sr-only">Description</dt>
                              <dd class="w-full flex-none [&amp;>:first-child]:mt-0 [&amp;>:last-child]:mb-0">
                                 <p>If you would like to filter on <%= pageData.title -%>. You can specify include a
                                       query here. For more information, <a class="link" target="_blank"
                                          href="/reference/data-types#queries">please check out writing queries
                                          here.</a></p>
                              </dd>
                           </dl>

                        </li>
                        <li class="m-0 px-0 py-4 first:pt-0 last:pb-0">
                           <dl class="m-0 flex flex-wrap items-center gap-x-3 gap-y-2">
                              <dt class="sr-only">Select</dt>
                              <dd><code class="inline-code">select</code></dd>
                              <dt class="sr-only">Type</dt>
                              <dd class="font-mono text-xs text-zinc-400 ">select</dd>
                              <dt class="sr-only">Description</dt>
                              <dd class="w-full flex-none [&amp;>:first-child]:mt-0 [&amp;>:last-child]:mb-0">
                                 <p> By default you will only retrieve ID of objects, to retrieve more fields you need
                                    to select them. For more information, <a class="link" target="_blank"
                                       href="/reference/data-types#select">please check how to select here.</a></p>
                              </dd>
                           </dl>
                        </li>
                        <li class="m-0 px-0 py-4 first:pt-0 last:pb-0">
                           <dl class="m-0 flex flex-wrap items-center gap-x-3 gap-y-2">
                              <dt class="sr-only">Sort</dt>
                              <dd><code class="inline-code">sort</code></dd>
                              <dt class="sr-only">Type</dt>
                              <dd class="font-mono text-xs text-zinc-400 ">sort</dd>
                              <dt class="sr-only">Description</dt>
                              <dd class="w-full flex-none [&amp;>:first-child]:mt-0 [&amp;>:last-child]:mb-0">
                                 <p> Objects will be sorted based on created date by default. You can change the sort
                                    order by passing <a class="link" target="_blank"
                                       href="/reference/data-types#select">please check how to select here.</a></p>
                              </dd>
                           </dl>
                        </li>
                     </ul>
                  </div>
               </div>

               <div class="[&amp;>:first-child]:mt-0 [&amp;>:last-child]:mb-0 xl:sticky xl:top-24">
                  <%- include('../partials/code', {title: "Example List Request" , requestUrl:
                     pageData.apiPath+"/get-list?skip=0&limit=10", code: pageData.listRequest, requestType: "POST" })
                     -%>
                     <%- include('../partials/code', {title: "Example List Response" , code: pageData.listResponse,
                        requestType: "" }) -%>
               </div>
            </div>
         </div>
      </div>

      <div class="mt-10">
         <hr>
         <div class="flex items-center gap-x-3 mt-10"><span
               class="font-mono text-[0.625rem] font-semibold leading-6 rounded-lg px-1.5 ring-1 ring-inset ring-emerald-300  bg-emerald-400/10 text-emerald-500 ">GET</span>
            <span class="font-mono text-xs text-zinc-400">or</span> <span
               class="font-mono text-[0.625rem] font-semibold leading-6 rounded-lg px-1.5 ring-1 ring-inset ring-sky-300  bg-sky-400/10 text-sky-500 ">POST</span><span
               class="h-0.5 w-0.5 rounded-full bg-zinc-300 "></span><span class="font-mono text-xs text-zinc-400">
               <%= pageData.apiPath -%>/:id/get-item
            </span>
         </div>
         <div class="-mt-20">
            <h2 id="list-all-contacts" class="mt-2 scroll-mt-32"><span
                  class="group text-inherit no-underline hover:text-inherit">Get item by ID</span></h2>

            <div class="grid grid-cols-1 items-start gap-x-16 gap-y-10 xl:max-w-none xl:grid-cols-2">
               <div class="[&amp;>:first-child]:mt-0 [&amp;>:last-child]:mb-0">
                  <p>This endpoint allows you to retrieve <%= pageData.title -%> by ID.
                        <h3>Required Query Params</h3>
                        <div class="my-6">
                           <ul role="list"
                              class="m-0 max-w-[calc(theme(maxWidth.lg)-theme(spacing.8))] list-none divide-y divide-zinc-900/5 p-0 ">
                              <li class="m-0 px-0 py-4 first:pt-0 last:pb-0">

                                 <dl class="m-0 flex flex-wrap items-center gap-x-3 gap-y-2">
                                    <dt class="sr-only">ID</dt>
                                    <dd><code class="inline-code">id</code></dd>
                                    <dt class="sr-only">Type</dt>
                                    <dd class="font-mono text-xs text-zinc-400 ">text</dd>
                                    <dt class="sr-only">Description</dt>
                                    <dd class="w-full flex-none [&amp;>:first-child]:mt-0 [&amp;>:last-child]:mb-0">
                                       <p>ID of the Object</p>
                                    </dd>
                                 </dl>
                              </li>
                           </ul>
                        </div>
                        <h3>Optional Request Body</h3>
                        <div class="my-6">
                           <ul role="list"
                              class="m-0 max-w-[calc(theme(maxWidth.lg)-theme(spacing.8))] list-none divide-y divide-zinc-900/5 p-0 ">

                              <li class="m-0 px-0 py-4 first:pt-0 last:pb-0">
                                 <dl class="m-0 flex flex-wrap items-center gap-x-3 gap-y-2">
                                    <dt class="sr-only">Select</dt>
                                    <dd><code class="inline-code">select</code></dd>
                                    <dt class="sr-only">Type</dt>
                                    <dd class="font-mono text-xs text-zinc-400 ">select</dd>
                                    <dt class="sr-only">Description</dt>
                                    <dd class="w-full flex-none [&amp;>:first-child]:mt-0 [&amp;>:last-child]:mb-0">
                                       <p> By default you will only retrieve ID of objects, to retrieve more fields you
                                          need to select them. For more information, <a class="link" target="_blank"
                                             href="/reference/data-types#select">please check how to select here.</a>
                                       </p>
                                    </dd>
                                 </dl>
                              </li>

                           </ul>
                        </div>
               </div>

               <div class="[&amp;>:first-child]:mt-0 [&amp;>:last-child]:mb-0 xl:sticky xl:top-24">
                  <%- include('../partials/code', {title: "Example Item Request" , requestUrl:
                     pageData.apiPath+"/:id/get-item", code: pageData.itemRequest, requestType: "POST" }) -%>
                     <%- include('../partials/code', {title: "Example Item Response" , code: pageData.itemResponse,
                        requestType: "" }) -%>
               </div>
            </div>
         </div>
      </div>




      <div class="mt-10">
         <hr>
         <div class="flex items-center gap-x-3 mt-10"><span
               class="font-mono text-[0.625rem] font-semibold leading-6 rounded-lg px-1.5 ring-1 ring-inset ring-sky-300  bg-sky-400/10 text-sky-500 ">POST</span><span
               class="h-0.5 w-0.5 rounded-full bg-zinc-300 "></span><span class="font-mono text-xs text-zinc-400">
               <%= pageData.apiPath -%>/count
            </span></div>
         <div class="-mt-20">
            <h2 id="list-all-contacts" class="mt-2 scroll-mt-32"><span
                  class="group text-inherit no-underline hover:text-inherit">Count</span></h2>

            <div class="grid grid-cols-1 items-start gap-x-16 gap-y-10 xl:max-w-none xl:grid-cols-2">
               <div class="[&amp;>:first-child]:mt-0 [&amp;>:last-child]:mb-0">
                  <p>This endpoint allows you to retrieve the count of all your <%= pageData.title -%>. </p>


                  <h3>Optional Request Body</h3>
                  <div class="my-6">
                     <ul role="list"
                        class="m-0 max-w-[calc(theme(maxWidth.lg)-theme(spacing.8))] list-none divide-y divide-zinc-900/5 p-0 ">
                        <li class="m-0 px-0 py-4 first:pt-0 last:pb-0">
                           <dl class="m-0 flex flex-wrap items-center gap-x-3 gap-y-2">
                              <dt class="sr-only">Query</dt>
                              <dd><code class="inline-code">query</code></dd>
                              <dt class="sr-only">Type</dt>
                              <dd class="font-mono text-xs text-zinc-400 ">query</dd>
                              <dt class="sr-only">Description</dt>
                              <dd class="w-full flex-none [&amp;>:first-child]:mt-0 [&amp;>:last-child]:mb-0">
                                 <p>If you would like to filter on <%= pageData.title -%>. You can specify include a
                                       query here. For more information, <a class="link" target="_blank"
                                          href="/reference/data-types#queries">please check out writing queries
                                          here.</a></p>
                              </dd>
                           </dl>

                        </li>

                     </ul>
                  </div>
               </div>

               <div class="[&amp;>:first-child]:mt-0 [&amp;>:last-child]:mb-0 xl:sticky xl:top-24">
                  <%- include('../partials/code', {title: "Example Count Request" , requestUrl:
                     pageData.apiPath+"/count", code: pageData.countRequest, requestType: "POST" }) -%>
                     <%- include('../partials/code', {title: "Example Count Response" , code: pageData.countResponse,
                        requestType: "" }) -%>
               </div>
            </div>
         </div>
      </div>


      <div class="mt-10">
         <hr>
         <div class="flex items-center gap-x-3 mt-10"><span
               class="font-mono text-[0.625rem] font-semibold leading-6 rounded-lg px-1.5 ring-1 ring-inset ring-sky-300  bg-sky-400/10 text-sky-500 ">POST</span><span
               class="h-0.5 w-0.5 rounded-full bg-zinc-300 "></span><span class="font-mono text-xs text-zinc-400">
               <%= pageData.apiPath -%>
            </span></div>
         <div class="-mt-20">
            <h2 id="list-all-contacts" class="mt-2 scroll-mt-32"><span
                  class="group text-inherit no-underline hover:text-inherit">Create <%= pageData.title -%> </span></h2>

            <div class="grid grid-cols-1 items-start gap-x-16 gap-y-10 xl:max-w-none xl:grid-cols-2">
               <div class="[&amp;>:first-child]:mt-0 [&amp;>:last-child]:mb-0">
                  <p>This endpoint allows you to create a new object. </p>


                  <h3>Request Body</h3>
                  <div class="my-6">
                     <ul role="list"
                        class="m-0 max-w-[calc(theme(maxWidth.lg)-theme(spacing.8))] list-none divide-y divide-zinc-900/5 p-0 ">
                        <li class="m-0 px-0 py-4 first:pt-0 last:pb-0">
                           <dl class="m-0 flex flex-wrap items-center gap-x-3 gap-y-2">
                              <dt class="sr-only">Data</dt>
                              <dd><code class="inline-code">data</code></dd>
                              <dt class="sr-only">Type</dt>
                              <dd class="font-mono text-xs text-zinc-400 ">JSON</dd>
                              <dt class="sr-only">Description</dt>
                              <dd class="w-full flex-none [&amp;>:first-child]:mt-0 [&amp;>:last-child]:mb-0">
                                 <p>Object to update as JSON</p>
                              </dd>
                           </dl>

                        </li>

                     </ul>
                  </div>
               </div>

               <div class="[&amp;>:first-child]:mt-0 [&amp;>:last-child]:mb-0 xl:sticky xl:top-24">
                  <%- include('../partials/code', {title: "Example Create Request" , requestUrl: pageData.apiPath, code:
                     pageData.createRequest, requestType: "POST" }) -%>
                     <%- include('../partials/code', {title: "Example Create Response" , code: pageData.createResponse,
                        requestType: "" }) -%>
               </div>
            </div>
         </div>
      </div>



      <div class="mt-10">
         <hr>
         <div class="flex items-center gap-x-3 mt-10"><span
               class="font-mono text-[0.625rem] font-semibold leading-6 rounded-lg px-1.5 ring-1 ring-inset ring-amber-300  bg-amber-400/10 text-amber-500 ">PUT</span><span
               class="h-0.5 w-0.5 rounded-full bg-zinc-300 "></span><span class="font-mono text-xs text-zinc-400">
               <%= pageData.apiPath -%>/:id
            </span></div>
         <div class="-mt-20">
            <h2 id="list-all-contacts" class="mt-2 scroll-mt-32"><span
                  class="group text-inherit no-underline hover:text-inherit">Update by ID</span></h2>

            <div class="grid grid-cols-1 items-start gap-x-16 gap-y-10 xl:max-w-none xl:grid-cols-2">
               <div class="[&amp;>:first-child]:mt-0 [&amp;>:last-child]:mb-0">
                  <p>This endpoint allows you to update object by its ID. </p>


                  <h3>Request Body</h3>
                  <div class="my-6">
                     <ul role="list"
                        class="m-0 max-w-[calc(theme(maxWidth.lg)-theme(spacing.8))] list-none divide-y divide-zinc-900/5 p-0 ">
                        <li class="m-0 px-0 py-4 first:pt-0 last:pb-0">
                           <dl class="m-0 flex flex-wrap items-center gap-x-3 gap-y-2">
                              <dt class="sr-only">Data</dt>
                              <dd><code class="inline-code">data</code></dd>
                              <dt class="sr-only">Type</dt>
                              <dd class="font-mono text-xs text-zinc-400 ">JSON</dd>
                              <dt class="sr-only">Description</dt>
                              <dd class="w-full flex-none [&amp;>:first-child]:mt-0 [&amp;>:last-child]:mb-0">
                                 <p>Object to update as JSON</p>
                              </dd>
                           </dl>

                        </li>

                     </ul>
                  </div>
                  <div class="border border-gray-100 bg-gray-50 rounded-md p-4 text-sm mt-10">
                     <h4 class="font-semibold text-gray-700 ">For clients that do not support PUT requests<h4>
                           <p class="text-gray-500 text-xs mt-4">
                              You can also update an object by sending a POST or GET request to these endpoints with the
                              same
                              request headers and body.
                           </p>

                           <div class="flex items-center gap-x-3 mt-10"><span
                                 class="font-mono text-[0.625rem] font-semibold leading-6 rounded-lg px-1.5 ring-1 ring-inset ring-sky-300  bg-sky-400/10 text-sky-500 ">POST</span><span
                                 class="h-0.5 w-0.5 rounded-full bg-zinc-300 "></span><span
                                 class="font-mono text-xs text-zinc-400">
                                 <%= pageData.apiPath -%>/:id/update-item
                              </span></div>
                           <div class="flex items-center gap-x-3 mt-10"><span
                                 class="font-mono text-[0.625rem] font-semibold leading-6 rounded-lg px-1.5 ring-1 ring-inset ring-emerald-300  bg-emerald-400/10 text-emerald-500 ">GET</span><span
                                 class="h-0.5 w-0.5 rounded-full bg-zinc-300 "></span><span
                                 class="font-mono text-xs text-zinc-400">
                                 <%= pageData.apiPath -%>/:id/update-item
                              </span></div>
                  </div>
               </div>



               <div class="[&amp;>:first-child]:mt-0 [&amp;>:last-child]:mb-0 xl:sticky xl:top-24">
                  <%- include('../partials/code', {title: "Example Update Request" , requestUrl:
                     pageData.apiPath+"/:id", code: pageData.updateRequest, requestType: "PUT" }) -%>
                     <%- include('../partials/code', {title: "Example Update Response" , code: pageData.updateResponse,
                        requestType: "" }) -%>
               </div>
            </div>
         </div>
      </div>


      <div class="mt-10">
         <hr>
         <div class="flex items-center gap-x-3 mt-10"><span
               class="font-mono text-[0.625rem] font-semibold leading-6 rounded-lg px-1.5 ring-1 ring-inset ring-red-300  bg-red-400/10 text-red-500 ">DELETE</span><span
               class="h-0.5 w-0.5 rounded-full bg-zinc-300 "></span><span class="font-mono text-xs text-zinc-400">
               <%= pageData.apiPath -%>/:id
            </span></div>
         <div class="-mt-20">
            <h2 id="list-all-contacts" class="mt-2 scroll-mt-32"><span
                  class="group text-inherit no-underline hover:text-inherit">Delete by ID</span></h2>

            <div class="grid grid-cols-1 items-start gap-x-16 gap-y-10 xl:max-w-none xl:grid-cols-2">
               <div class="[&amp;>:first-child]:mt-0 [&amp;>:last-child]:mb-0">
                  <p>This endpoint allows you to delete object by its ID. </p>


                  <div class="border border-gray-100 bg-gray-50 rounded-md p-4 text-sm mt-10">
                     <h4 class="font-semibold text-gray-700 ">For clients that do not support DELETE requests<h4>
                           <p class="text-gray-500 text-xs mt-4">
                              You can also delete an object by sending a POST or GET request to these endpoints with the
                              same
                              request headers and body.
                           </p>

                           <div class="flex items-center gap-x-3 mt-10"><span
                                 class="font-mono text-[0.625rem] font-semibold leading-6 rounded-lg px-1.5 ring-1 ring-inset ring-sky-300  bg-sky-400/10 text-sky-500 ">POST</span><span
                                 class="h-0.5 w-0.5 rounded-full bg-zinc-300 "></span><span
                                 class="font-mono text-xs text-zinc-400">
                                 <%= pageData.apiPath -%>/:id/delete-item
                              </span></div>
                           <div class="flex items-center gap-x-3 mt-10"><span
                                 class="font-mono text-[0.625rem] font-semibold leading-6 rounded-lg px-1.5 ring-1 ring-inset ring-emerald-300  bg-emerald-400/10 text-emerald-500 ">GET</span><span
                                 class="h-0.5 w-0.5 rounded-full bg-zinc-300 "></span><span
                                 class="font-mono text-xs text-zinc-400">
                                 <%= pageData.apiPath -%>/:id/delete-item
                              </span></div>
                  </div>


               </div>

               <div class="[&amp;>:first-child]:mt-0 [&amp;>:last-child]:mb-0 xl:sticky xl:top-24">
                  <%- include('../partials/code', {title: "Example Delete Request" , requestUrl:
                     pageData.apiPath+"/:id", code: pageData.deleteRequest, requestType: "DELETE" }) -%>
                     <%- include('../partials/code', {title: "Example Delete Response" , code: pageData.deleteResponse,
                        requestType: "" }) -%>
               </div>
            </div>
         </div>
      </div>

      <h2>Permissions</h2>

      <% if(!pageData.isMasterAdminApiDocs){ %>
         <p class="lead"> Your API Token needs permissions to create, update, read or delete this resource. If you do
            not have permissions to make a request a <code class="inline-code">4xx</code> status will be sent as
            response. </p>




         <h3 id="consuming-webhooks">
            Read Permissions
         </h3>
         <p>You need one of these permissions to read <%= pageData.title -%>:</p>
         <div class="grid grid-cols-1 items-start gap-x-16 gap-y-10">
            <div class="[&amp;>:first-child]:mt-0 [&amp;>:last-child]:mb-0">
               <div class="my-6">
                  <ul role="list" class="m-0 w-full">
                     <% for(var i=0; i<pageData.tablePermissions.read.length; i++) {%>
                        <li class="m-0 px-0 py-4 first:pt-0 last:pb-0">
                           <dl class="m-0 flex flex-wrap items-center gap-x-3 gap-y-2">
                              <dt class="sr-only">Name</dt>
                              <dd><code class="inline-code"> <%= pageData.tablePermissions.read[i].permission -%></code>
                              </dd>
                              <dt class="sr-only">Type</dt>
                              <dd class="font-mono text-xs text-zinc-400 ">
                                 <%= pageData.tablePermissions.read[i].title -%>
                              </dd>
                              <dt class="sr-only">Description</dt>
                              <dd class="w-full text-sm flex-none [&amp;>:first-child]:mt-0 [&amp;>:last-child]:mb-0">
                                 <p>
                                    <%= pageData.tablePermissions.read[i].description -%>
                                 </p>
                              </dd>
                           </dl>
                        </li>
                        <% } %>


                  </ul>
               </div>
            </div>

         </div>


         <h3 id="consuming-webhooks">
            Create Permissions
         </h3>
         <p>You need one of these permissions to create <%= pageData.title -%>:</p>
         <div class="grid grid-cols-1 items-start gap-x-16 gap-y-10">
            <div class="[&amp;>:first-child]:mt-0 [&amp;>:last-child]:mb-0">
               <div class="my-6">
                  <ul role="list" class="m-0 w-full">
                     <% for(var i=0; i<pageData.tablePermissions.create.length; i++) {%>
                        <li class="m-0 px-0 py-4 first:pt-0 last:pb-0">
                           <dl class="m-0 flex flex-wrap items-center gap-x-3 gap-y-2">
                              <dt class="sr-only">Name</dt>
                              <dd><code
                                    class="inline-code"> <%= pageData.tablePermissions.create[i].permission -%></code>
                              </dd>
                              <dt class="sr-only">Type</dt>
                              <dd class="font-mono text-xs text-zinc-400 ">
                                 <%= pageData.tablePermissions.create[i].title -%>
                              </dd>
                              <dt class="sr-only">Description</dt>
                              <dd class="w-full text-sm flex-none [&amp;>:first-child]:mt-0 [&amp;>:last-child]:mb-0">
                                 <p>
                                    <%= pageData.tablePermissions.create[i].description -%>
                                 </p>
                              </dd>
                           </dl>
                        </li>
                        <% } %>


                  </ul>
               </div>
            </div>

         </div>




         <h3 id="consuming-webhooks">
            Update Permissions
         </h3>
         <p>You need one of these permissions to update <%= pageData.title -%>:</p>
         <div class="grid grid-cols-1 items-start gap-x-16 gap-y-10">
            <div class="[&amp;>:first-child]:mt-0 [&amp;>:last-child]:mb-0">
               <div class="my-6">
                  <ul role="list" class="m-0 w-full">
                     <% for(var i=0; i<pageData.tablePermissions.update.length; i++) {%>
                        <li class="m-0 px-0 py-4 first:pt-0 last:pb-0">
                           <dl class="m-0 flex flex-wrap items-center gap-x-3 gap-y-2">
                              <dt class="sr-only">Name</dt>
                              <dd><code
                                    class="inline-code"> <%= pageData.tablePermissions.update[i].permission -%></code>
                              </dd>
                              <dt class="sr-only">Type</dt>
                              <dd class="font-mono text-xs text-zinc-400 ">
                                 <%= pageData.tablePermissions.update[i].title -%>
                              </dd>
                              <dt class="sr-only">Description</dt>
                              <dd class="w-full flex-none text-sm [&amp;>:first-child]:mt-0 [&amp;>:last-child]:mb-0">
                                 <p>
                                    <%= pageData.tablePermissions.update[i].description -%>
                                 </p>
                              </dd>
                           </dl>
                        </li>
                        <% } %>


                  </ul>
               </div>
            </div>

         </div>



         <h3 id="consuming-webhooks">
            Delete Permissions
         </h3>
         <p>You need one of these permissions to delete <%= pageData.title -%>:</p>
         <div class="grid grid-cols-1 items-start gap-x-16 gap-y-10">
            <div class="[&amp;>:first-child]:mt-0 [&amp;>:last-child]:mb-0">
               <div class="my-6">
                  <ul role="list" class="m-0 w-full">
                     <% for(var i=0; i<pageData.tablePermissions.delete.length; i++) {%>
                        <li class="m-0 px-0 py-4 first:pt-0 last:pb-0">
                           <dl class="m-0 flex flex-wrap items-center gap-x-3 gap-y-2">
                              <dt class="sr-only">Name</dt>
                              <dd><code
                                    class="inline-code"> <%= pageData.tablePermissions.delete[i].permission -%></code>
                              </dd>
                              <dt class="sr-only">Type</dt>
                              <dd class="font-mono text-xs text-zinc-400 ">
                                 <%= pageData.tablePermissions.delete[i].title -%>
                              </dd>
                              <dt class="sr-only">Description</dt>
                              <dd class="w-full text-sm flex-none [&amp;>:first-child]:mt-0 [&amp;>:last-child]:mb-0">
                                 <p>
                                    <%= pageData.tablePermissions.delete[i].description -%>
                                 </p>
                              </dd>
                           </dl>
                        </li>
                        <% } %>


                  </ul>
               </div>
            </div>

         </div>

         <% } %>

            <% if(pageData.isMasterAdminApiDocs){ %>


               <div class="border-l-4 border-yellow-400 bg-yellow-50 p-4">
                  <div class="flex">
                     <div class="flex-shrink-0">
                        <svg class="h-5 w-5 text-yellow-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                           <path fill-rule="evenodd"
                              d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z"
                              clip-rule="evenodd" />
                        </svg>
                     </div>
                     <div class="ml-3">
                        <div class="text-sm font-medium text-yellow-700 mb-0">
                           This API can only be accessed through a Master API Token. You can create one on the Admin
                           Dashboard. Please add the token to the <code class="inline-code">ApiKey</code> header to make
                           the request.
                        </div>
                     </div>
                  </div>
               </div>

               <% } %>

   </article>
</main>