<main class="py-12">
   <article class="prose">
      <!-- Hero Section -->
      <div class="mb-10">
         <div class="flex items-center gap-3 mb-4">
            <div class="flex items-center justify-center w-10 h-10 rounded-xl bg-indigo-600 shadow-lg shadow-indigo-500/30">
               <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"></path>
               </svg>
            </div>
            <span class="text-xs font-semibold text-indigo-600 uppercase tracking-wider">Guide</span>
         </div>
         <h1 class="font-bold text-3xl text-slate-900 tracking-tight mb-3">Authentication</h1>
         <p class="text-lg text-slate-600 leading-relaxed max-w-2xl">You'll need to authenticate your requests to access any of the endpoints in the OneUptime API. In this guide, we'll look at how authentication works. OneUptime offers one way to authenticate your API requests - by using an API Key.</p>
      </div>

      <h2 id="generate-api-key" class="scroll-mt-24 text-xl font-semibold text-slate-900 mb-4 mt-12">
         Generate an API Key
      </h2>
      <p class="text-slate-600 leading-relaxed">Please head over to <strong class="text-slate-800">Project Settings</strong> > <strong class="text-slate-800">API Keys</strong>. Create a new API Key. Please note: New API Keys have no permissions assigned to them, so you will have to assign a permission before you can use it.</p>
      <a class="mt-4 inline-flex gap-1 items-center font-medium text-indigo-600 hover:text-indigo-700 transition-colors" href="/reference/permissions">
         Read more about permissions
         <svg viewBox="0 0 20 20" fill="none" aria-hidden="true" class="h-5 w-5">
            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m11.5 6.5 3 3.5m0 0-3 3.5m3-3.5h-9"></path>
         </svg>
      </a>

      <h2 id="project-id" class="scroll-mt-24 text-xl font-semibold text-slate-900 mb-4 mt-12">
         Project ID
      </h2>
      <p class="text-slate-600 leading-relaxed">Please head over to <strong class="text-slate-800">Project Settings</strong> > <strong class="text-slate-800">Project</strong>. You should see your Project ID there.</p>

      <h2 id="auth-with-api-key" class="scroll-mt-24 text-xl font-semibold text-slate-900 mb-4 mt-12">
         Authentication with API Key
      </h2>
      <p class="text-slate-600 leading-relaxed mb-6">You can use OneUptime API Key on Request Header when you're making a request. You can use <code class="inline-code">ApiKey</code> header with your API Key when you make a request.</p>

      <%- include('../partials/code', {title: "Example request with API Key" , requestUrl: "" , requestType: "" , code: "curl --header \"ApiKey: {secret-api-key}\" https://oneuptime.com/api/\<path\>" }) -%>

      <div class="mt-6 rounded-xl border border-amber-200 bg-amber-50 p-4">
         <div class="flex gap-3">
            <div class="flex-shrink-0">
               <svg class="h-5 w-5 text-amber-500" viewBox="0 0 20 20" fill="currentColor">
                  <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>
            <p class="text-sm text-amber-800">Please don't commit your OneUptime API Key to GitHub, or on any other source control project. Please regenerate a new API Key if your API Key is committed by mistake.</p>
         </div>
      </div>
   </article>
</main>
