<turbo-stream action="update" target="service_details"><template><div @keyup.window.escape="isServiceDetailsOpen = false" aria-labelledby="service-details-title" aria-modal="true" class="
z-50 fixed top-0 left-0 w-full h-screen overflow-y-auto
md:flex md:items-center md:justify-center md:items-start md:bg-black/50
" role="dialog" tabindex="-1" x-init="$nextTick(() =&gt; { isServiceDetailsOpen = true; $dispatch(&#39;close-mobile-menu&#39;); })" x-show="isServiceDetailsOpen">
<div class="w-full flex flex-col bg-white max-w-[946px] md:rounded-lg" style="max-height: 80%">
<div class="" role="document">
<div class="flex-grow overflow-y-auto">
<div class="relative md:h-[76px] md:px-10 md:flex md:items-center md:justify-between md:border-b md:border-border-low">
<div class="flex items-center gap-2">
<div class="
shrink-0 w-[42px] h-[42px] p-2 flex items-center justify-center rounded border border-border-low bg-[#ffffff]
">
<img class="max-w-full" alt="GitHub logo" onerror="this.src=&#39;https://static.statusgator.com/assets/service-placeholder-f730d793d6c3df43ed952c21b14c76e20277895680b3ed9790fb708c1283705f.svg&#39;" src="https://favicons.statusgator.com/VfNi7w8UCBesRDxh.png" />
</div>
<p class="
font-semibold text-lg text-text-level1
md:text-2xl
" id="service-details-title">
GitHub
</p>
</div>
<button @click="isServiceDetailsOpen = false" aria-label="Close service details" class="absolute top-3 right-3 w-6 h-6 flex items-center justify-center text-text-level2 md:static md:w-4 md:h-4" type="button">
<svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 17 17" fill="none" role="img" aria-labelledby="aij3qbxeyu634uiqu211bq4i02l0hts8"><desc id="aij3qbxeyu634uiqu211bq4i02l0hts8">close icon</desc>
<path d="M4.14258 3.9458L13.6641 13.4674M4.14258 13.4674L13.6641 3.9458L4.14258 13.4674Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</button>
</div>
<div @click.outside="isServiceDetailsOpen = false" class="
bg-white rounded-b-lg
max-h-[350px] overflow-y-scroll
max-md:z-50 max-md:fixed max-md:top-0 max-md:left-0 max-md:w-full
" x-data="{
isComponentsOpen: true,
historyOpen: false
}">
<div class="
w-full h-full bg-white rounded-b-lg
md:w-auto md:h-auto
">
<div class="
p-4
md:px-10
">
<p class="text-md text-text-level3 break-words py-4">

</p>
<div @keydown.arrow-left.prevent="isComponentsOpen = true; historyOpen = false; $nextTick(() =&gt; $el.querySelector(&quot;[role=tab][aria-selected=true]&quot;).focus())" @keydown.arrow-right.prevent="historyOpen = true; isComponentsOpen = false; $nextTick(() =&gt; $el.querySelector(&quot;[role=tab][aria-selected=true]&quot;).focus())" aria-label="Service information" class="max-md:hidden mb-7 inline-flex border-b border-border-med" role="tablist">
<button @click.stop="isComponentsOpen = true; historyOpen = false" aria-controls="service-components-panel" class="
relative h-10 px-4 flex items-center justify-center
text-base text-text-level3
" id="service-components-tab" role="tab" x-bind:aria-selected="isComponentsOpen ? &quot;true&quot; : &quot;false&quot;" x-bind:class="{
&#39;font-semibold !text-text-level1 after:content-[&quot;&quot;] after:absolute after:-bottom-[1px] after:w-full after:h-[2px] after:bg-border-high&#39;: isComponentsOpen
}" x-bind:tabindex="isComponentsOpen ? &quot;0&quot; : &quot;-1&quot;">
Components
</button>
<button @click.stop="historyOpen = true; isComponentsOpen = false" aria-controls="service-history-panel" class="
relative h-10 px-4 flex items-center justify-center
text-base text-text-level3
" id="service-history-tab" role="tab" x-bind:aria-selected="historyOpen ? &quot;true&quot; : &quot;false&quot;" x-bind:class="{
&#39;font-semibold !text-text-level1 after:content-[&quot;&quot;] after:absolute after:-bottom-[1px] after:w-full after:h-[2px] after:bg-border-high&#39;: historyOpen
}" x-bind:tabindex="historyOpen ? &quot;0&quot; : &quot;-1&quot;">
History
</button>
</div>
<div aria-labelledby="service-components-tab" id="service-components-panel" role="tabpanel" tabindex="0" x-show="isComponentsOpen">
<p class="md:hidden mb-4 font-semibold text-lg text-text-level1">
Components
</p>
<div aria-label="Service components" role="list">
<div class="p-2 pl-8 flex items-center justify-between border-t border-border-low first:border-t-0" role="listitem">
<span class="text-base text-text-level2">
API Requests
</span>
<div class="md:hidden">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="24" viewBox="0 0 25 24" fill="none" role="img" aria-labelledby="a7pzf7q69cornzqb83jddnthtscskiqv" class="shrink-0 text-up-600"><desc id="a7pzf7q69cornzqb83jddnthtscskiqv">up icon</desc>
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5 21C14.8869 21 17.1761 20.0518 18.864 18.364C20.5518 16.6761 21.5 14.3869 21.5 12C21.5 9.61305 20.5518 7.32387 18.864 5.63604C17.1761 3.94821 14.8869 3 12.5 3C10.1131 3 7.82387 3.94821 6.13604 5.63604C4.44821 7.32387 3.5 9.61305 3.5 12C3.5 14.3869 4.44821 16.6761 6.13604 18.364C7.82387 20.0518 10.1131 21 12.5 21ZM16.6704 10.5454C16.8753 10.3332 16.9887 10.049 16.9861 9.75405C16.9836 9.45908 16.8653 9.17691 16.6567 8.96833C16.4481 8.75975 16.1659 8.64143 15.871 8.63887C15.576 8.6363 15.2918 8.7497 15.0796 8.95463L11.375 12.6593L9.92037 11.2046C9.7082 10.9997 9.42402 10.8863 9.12905 10.8889C8.83408 10.8914 8.55191 11.0097 8.34333 11.2183C8.13475 11.4269 8.01643 11.7091 8.01387 12.004C8.0113 12.299 8.1247 12.5832 8.32963 12.7954L10.5796 15.0454C10.7906 15.2563 11.0767 15.3748 11.375 15.3748C11.6733 15.3748 11.9594 15.2563 12.1704 15.0454L16.6704 10.5454Z" fill="currentColor"></path>
</svg>
</div>
<div class="max-md:hidden">
<div class="shrink-0 min-w-5 inline-flex items-center justify-center gap-1 rounded border border-solid font-inter font-medium bg-up-100 border-up-200 text-up-700 h-7 px-1.5 rounded-lg text-sm [&amp;&gt;svg]:w-[14px] [&amp;&gt;svg]:h-[14px]"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" viewBox="0 0 16 17" fill="none" role="img" aria-labelledby="agsixe76aw2u0imnt2cbby301gekv05g"><desc id="agsixe76aw2u0imnt2cbby301gekv05g">up icon</desc>
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.26868 15C10.1252 15 11.9057 14.2625 13.2184 12.9497C14.5312 11.637 15.2687 9.85652 15.2687 8C15.2687 6.14348 14.5312 4.36301 13.2184 3.05025C11.9057 1.7375 10.1252 1 8.26868 1C6.41216 1 4.63168 1.7375 3.31893 3.05025C2.00617 4.36301 1.26868 6.14348 1.26868 8C1.26868 9.85652 2.00617 11.637 3.31893 12.9497C4.63168 14.2625 6.41216 15 8.26868 15ZM12.1127 6.209C12.2344 6.05146 12.2886 5.85202 12.2633 5.65454C12.2379 5.45706 12.1352 5.27773 11.9777 5.156C11.8201 5.03427 11.6207 4.9801 11.4232 5.00542C11.2257 5.03073 11.0464 5.13346 10.9247 5.291L7.22468 10.081L5.57568 8.248C5.51042 8.17247 5.43075 8.11073 5.34132 8.06639C5.2519 8.02205 5.15452 7.99601 5.0549 7.98978C4.95528 7.98356 4.85542 7.99729 4.76117 8.03016C4.66693 8.06303 4.58019 8.11438 4.50604 8.1812C4.4319 8.24803 4.37184 8.32898 4.32938 8.41931C4.28693 8.50965 4.26293 8.60755 4.2588 8.70728C4.25467 8.807 4.27048 8.90656 4.30532 9.00009C4.34016 9.09363 4.39331 9.17927 4.46168 9.252L6.71168 11.752C6.78517 11.8335 6.87565 11.8979 6.97674 11.9406C7.07782 11.9833 7.18706 12.0034 7.29673 11.9993C7.40639 11.9952 7.51383 11.967 7.61144 11.9169C7.70906 11.8667 7.79448 11.7958 7.86168 11.709L12.1127 6.209Z" fill="currentColor"></path>
</svg>
Up
</div>
</div>
</div>
<div class="p-2 pl-8 flex items-center justify-between border-t border-border-low first:border-t-0" role="listitem">
<span class="text-base text-text-level2">
Git Operations
</span>
<div class="md:hidden">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="24" viewBox="0 0 25 24" fill="none" role="img" aria-labelledby="ajloijhu6fnuvr3u44cfn9bvmgxc0jen" class="shrink-0 text-up-600"><desc id="ajloijhu6fnuvr3u44cfn9bvmgxc0jen">up icon</desc>
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5 21C14.8869 21 17.1761 20.0518 18.864 18.364C20.5518 16.6761 21.5 14.3869 21.5 12C21.5 9.61305 20.5518 7.32387 18.864 5.63604C17.1761 3.94821 14.8869 3 12.5 3C10.1131 3 7.82387 3.94821 6.13604 5.63604C4.44821 7.32387 3.5 9.61305 3.5 12C3.5 14.3869 4.44821 16.6761 6.13604 18.364C7.82387 20.0518 10.1131 21 12.5 21ZM16.6704 10.5454C16.8753 10.3332 16.9887 10.049 16.9861 9.75405C16.9836 9.45908 16.8653 9.17691 16.6567 8.96833C16.4481 8.75975 16.1659 8.64143 15.871 8.63887C15.576 8.6363 15.2918 8.7497 15.0796 8.95463L11.375 12.6593L9.92037 11.2046C9.7082 10.9997 9.42402 10.8863 9.12905 10.8889C8.83408 10.8914 8.55191 11.0097 8.34333 11.2183C8.13475 11.4269 8.01643 11.7091 8.01387 12.004C8.0113 12.299 8.1247 12.5832 8.32963 12.7954L10.5796 15.0454C10.7906 15.2563 11.0767 15.3748 11.375 15.3748C11.6733 15.3748 11.9594 15.2563 12.1704 15.0454L16.6704 10.5454Z" fill="currentColor"></path>
</svg>
</div>
<div class="max-md:hidden">
<div class="shrink-0 min-w-5 inline-flex items-center justify-center gap-1 rounded border border-solid font-inter font-medium bg-up-100 border-up-200 text-up-700 h-7 px-1.5 rounded-lg text-sm [&amp;&gt;svg]:w-[14px] [&amp;&gt;svg]:h-[14px]"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" viewBox="0 0 16 17" fill="none" role="img" aria-labelledby="acmlnhv30hh8dvrj8be6nbc7f97j7okl"><desc id="acmlnhv30hh8dvrj8be6nbc7f97j7okl">up icon</desc>
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.26868 15C10.1252 15 11.9057 14.2625 13.2184 12.9497C14.5312 11.637 15.2687 9.85652 15.2687 8C15.2687 6.14348 14.5312 4.36301 13.2184 3.05025C11.9057 1.7375 10.1252 1 8.26868 1C6.41216 1 4.63168 1.7375 3.31893 3.05025C2.00617 4.36301 1.26868 6.14348 1.26868 8C1.26868 9.85652 2.00617 11.637 3.31893 12.9497C4.63168 14.2625 6.41216 15 8.26868 15ZM12.1127 6.209C12.2344 6.05146 12.2886 5.85202 12.2633 5.65454C12.2379 5.45706 12.1352 5.27773 11.9777 5.156C11.8201 5.03427 11.6207 4.9801 11.4232 5.00542C11.2257 5.03073 11.0464 5.13346 10.9247 5.291L7.22468 10.081L5.57568 8.248C5.51042 8.17247 5.43075 8.11073 5.34132 8.06639C5.2519 8.02205 5.15452 7.99601 5.0549 7.98978C4.95528 7.98356 4.85542 7.99729 4.76117 8.03016C4.66693 8.06303 4.58019 8.11438 4.50604 8.1812C4.4319 8.24803 4.37184 8.32898 4.32938 8.41931C4.28693 8.50965 4.26293 8.60755 4.2588 8.70728C4.25467 8.807 4.27048 8.90656 4.30532 9.00009C4.34016 9.09363 4.39331 9.17927 4.46168 9.252L6.71168 11.752C6.78517 11.8335 6.87565 11.8979 6.97674 11.9406C7.07782 11.9833 7.18706 12.0034 7.29673 11.9993C7.40639 11.9952 7.51383 11.967 7.61144 11.9169C7.70906 11.8667 7.79448 11.7958 7.86168 11.709L12.1127 6.209Z" fill="currentColor"></path>
</svg>
Up
</div>
</div>
</div>
<div class="p-2 pl-8 flex items-center justify-between border-t border-border-low first:border-t-0" role="listitem">
<span class="text-base text-text-level2">
Issues
</span>
<div class="md:hidden">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="24" viewBox="0 0 25 24" fill="none" role="img" aria-labelledby="a4igf2be9t2lz1pqby2kx5xtsz62u1ke" class="shrink-0 text-up-600"><desc id="a4igf2be9t2lz1pqby2kx5xtsz62u1ke">up icon</desc>
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5 21C14.8869 21 17.1761 20.0518 18.864 18.364C20.5518 16.6761 21.5 14.3869 21.5 12C21.5 9.61305 20.5518 7.32387 18.864 5.63604C17.1761 3.94821 14.8869 3 12.5 3C10.1131 3 7.82387 3.94821 6.13604 5.63604C4.44821 7.32387 3.5 9.61305 3.5 12C3.5 14.3869 4.44821 16.6761 6.13604 18.364C7.82387 20.0518 10.1131 21 12.5 21ZM16.6704 10.5454C16.8753 10.3332 16.9887 10.049 16.9861 9.75405C16.9836 9.45908 16.8653 9.17691 16.6567 8.96833C16.4481 8.75975 16.1659 8.64143 15.871 8.63887C15.576 8.6363 15.2918 8.7497 15.0796 8.95463L11.375 12.6593L9.92037 11.2046C9.7082 10.9997 9.42402 10.8863 9.12905 10.8889C8.83408 10.8914 8.55191 11.0097 8.34333 11.2183C8.13475 11.4269 8.01643 11.7091 8.01387 12.004C8.0113 12.299 8.1247 12.5832 8.32963 12.7954L10.5796 15.0454C10.7906 15.2563 11.0767 15.3748 11.375 15.3748C11.6733 15.3748 11.9594 15.2563 12.1704 15.0454L16.6704 10.5454Z" fill="currentColor"></path>
</svg>
</div>
<div class="max-md:hidden">
<div class="shrink-0 min-w-5 inline-flex items-center justify-center gap-1 rounded border border-solid font-inter font-medium bg-up-100 border-up-200 text-up-700 h-7 px-1.5 rounded-lg text-sm [&amp;&gt;svg]:w-[14px] [&amp;&gt;svg]:h-[14px]"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" viewBox="0 0 16 17" fill="none" role="img" aria-labelledby="a97ufiq14logz6eqsx9v30ow94v8wxy0"><desc id="a97ufiq14logz6eqsx9v30ow94v8wxy0">up icon</desc>
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.26868 15C10.1252 15 11.9057 14.2625 13.2184 12.9497C14.5312 11.637 15.2687 9.85652 15.2687 8C15.2687 6.14348 14.5312 4.36301 13.2184 3.05025C11.9057 1.7375 10.1252 1 8.26868 1C6.41216 1 4.63168 1.7375 3.31893 3.05025C2.00617 4.36301 1.26868 6.14348 1.26868 8C1.26868 9.85652 2.00617 11.637 3.31893 12.9497C4.63168 14.2625 6.41216 15 8.26868 15ZM12.1127 6.209C12.2344 6.05146 12.2886 5.85202 12.2633 5.65454C12.2379 5.45706 12.1352 5.27773 11.9777 5.156C11.8201 5.03427 11.6207 4.9801 11.4232 5.00542C11.2257 5.03073 11.0464 5.13346 10.9247 5.291L7.22468 10.081L5.57568 8.248C5.51042 8.17247 5.43075 8.11073 5.34132 8.06639C5.2519 8.02205 5.15452 7.99601 5.0549 7.98978C4.95528 7.98356 4.85542 7.99729 4.76117 8.03016C4.66693 8.06303 4.58019 8.11438 4.50604 8.1812C4.4319 8.24803 4.37184 8.32898 4.32938 8.41931C4.28693 8.50965 4.26293 8.60755 4.2588 8.70728C4.25467 8.807 4.27048 8.90656 4.30532 9.00009C4.34016 9.09363 4.39331 9.17927 4.46168 9.252L6.71168 11.752C6.78517 11.8335 6.87565 11.8979 6.97674 11.9406C7.07782 11.9833 7.18706 12.0034 7.29673 11.9993C7.40639 11.9952 7.51383 11.967 7.61144 11.9169C7.70906 11.8667 7.79448 11.7958 7.86168 11.709L12.1127 6.209Z" fill="currentColor"></path>
</svg>
Up
</div>
</div>
</div>
<div class="p-2 pl-8 flex items-center justify-between border-t border-border-low first:border-t-0" role="listitem">
<span class="text-base text-text-level2">
Pull Requests
</span>
<div class="md:hidden">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="24" viewBox="0 0 25 24" fill="none" role="img" aria-labelledby="anzig14oe3zfkqevi7k6kf0gvyxv9ws5" class="shrink-0 text-up-600"><desc id="anzig14oe3zfkqevi7k6kf0gvyxv9ws5">up icon</desc>
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5 21C14.8869 21 17.1761 20.0518 18.864 18.364C20.5518 16.6761 21.5 14.3869 21.5 12C21.5 9.61305 20.5518 7.32387 18.864 5.63604C17.1761 3.94821 14.8869 3 12.5 3C10.1131 3 7.82387 3.94821 6.13604 5.63604C4.44821 7.32387 3.5 9.61305 3.5 12C3.5 14.3869 4.44821 16.6761 6.13604 18.364C7.82387 20.0518 10.1131 21 12.5 21ZM16.6704 10.5454C16.8753 10.3332 16.9887 10.049 16.9861 9.75405C16.9836 9.45908 16.8653 9.17691 16.6567 8.96833C16.4481 8.75975 16.1659 8.64143 15.871 8.63887C15.576 8.6363 15.2918 8.7497 15.0796 8.95463L11.375 12.6593L9.92037 11.2046C9.7082 10.9997 9.42402 10.8863 9.12905 10.8889C8.83408 10.8914 8.55191 11.0097 8.34333 11.2183C8.13475 11.4269 8.01643 11.7091 8.01387 12.004C8.0113 12.299 8.1247 12.5832 8.32963 12.7954L10.5796 15.0454C10.7906 15.2563 11.0767 15.3748 11.375 15.3748C11.6733 15.3748 11.9594 15.2563 12.1704 15.0454L16.6704 10.5454Z" fill="currentColor"></path>
</svg>
</div>
<div class="max-md:hidden">
<div class="shrink-0 min-w-5 inline-flex items-center justify-center gap-1 rounded border border-solid font-inter font-medium bg-up-100 border-up-200 text-up-700 h-7 px-1.5 rounded-lg text-sm [&amp;&gt;svg]:w-[14px] [&amp;&gt;svg]:h-[14px]"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" viewBox="0 0 16 17" fill="none" role="img" aria-labelledby="a8zxhfqyp9l3u5utna1x6vl95bitran9"><desc id="a8zxhfqyp9l3u5utna1x6vl95bitran9">up icon</desc>
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.26868 15C10.1252 15 11.9057 14.2625 13.2184 12.9497C14.5312 11.637 15.2687 9.85652 15.2687 8C15.2687 6.14348 14.5312 4.36301 13.2184 3.05025C11.9057 1.7375 10.1252 1 8.26868 1C6.41216 1 4.63168 1.7375 3.31893 3.05025C2.00617 4.36301 1.26868 6.14348 1.26868 8C1.26868 9.85652 2.00617 11.637 3.31893 12.9497C4.63168 14.2625 6.41216 15 8.26868 15ZM12.1127 6.209C12.2344 6.05146 12.2886 5.85202 12.2633 5.65454C12.2379 5.45706 12.1352 5.27773 11.9777 5.156C11.8201 5.03427 11.6207 4.9801 11.4232 5.00542C11.2257 5.03073 11.0464 5.13346 10.9247 5.291L7.22468 10.081L5.57568 8.248C5.51042 8.17247 5.43075 8.11073 5.34132 8.06639C5.2519 8.02205 5.15452 7.99601 5.0549 7.98978C4.95528 7.98356 4.85542 7.99729 4.76117 8.03016C4.66693 8.06303 4.58019 8.11438 4.50604 8.1812C4.4319 8.24803 4.37184 8.32898 4.32938 8.41931C4.28693 8.50965 4.26293 8.60755 4.2588 8.70728C4.25467 8.807 4.27048 8.90656 4.30532 9.00009C4.34016 9.09363 4.39331 9.17927 4.46168 9.252L6.71168 11.752C6.78517 11.8335 6.87565 11.8979 6.97674 11.9406C7.07782 11.9833 7.18706 12.0034 7.29673 11.9993C7.40639 11.9952 7.51383 11.967 7.61144 11.9169C7.70906 11.8667 7.79448 11.7958 7.86168 11.709L12.1127 6.209Z" fill="currentColor"></path>
</svg>
Up
</div>
</div>
</div>
</div>

</div>
<div aria-labelledby="service-history-tab" id="service-history-panel" role="tabpanel" tabindex="0" x-show="!isComponentsOpen">
<div @keydown.arrow-left.prevent="moveFocus(-1)" @keydown.arrow-right.prevent="moveFocus(1)" @keydown.end.prevent="focusEdge(&#39;last&#39;)" @keydown.home.prevent="focusEdge(&#39;first&#39;)" aria-label="Service status history over the last 30 days. Use left and right arrow keys to navigate between days." class="
w-full flex items-center justify-between
" role="list" x-data="{
rove(bar) {
if (!bar) return;
this.$el.querySelectorAll(&#39;[role=listitem]&#39;).forEach(b =&gt; b.setAttribute(&#39;tabindex&#39;, &#39;-1&#39;));
bar.setAttribute(&#39;tabindex&#39;, &#39;0&#39;);
bar.focus();
},
moveFocus(offset) {
const bars = Array.from(this.$el.querySelectorAll(&#39;[role=listitem]&#39;));
const current = bars.indexOf(document.activeElement);
if (current === -1) return;
const next = Math.max(0, Math.min(bars.length - 1, current + offset));
this.rove(bars[next]);
},
focusEdge(position) {
const bars = this.$el.querySelectorAll(&#39;[role=listitem]&#39;);
this.rove(position === &#39;first&#39; ? bars[0] : bars[bars.length - 1]);
}
}">
<div aria-label="Day 1 of 31, March 26, 2026: Up all day" aria-posinset="1" aria-setsize="31" class="
w-1 h-16 bg-up-600 rounded-md
md:w-1.5
" role="listitem" tabindex="0"></div>
<div aria-label="Day 2 of 31, March 27, 2026: Warning for 1 Hour and 49 Minutes" aria-posinset="2" aria-setsize="31" class="
w-1 h-16 flex flex-col gap-1
md:w-1.5
" role="listitem" tabindex="-1" x-data="Tippy({ arrow: true, placement: &#39;top&#39;, theme: &#39;tooltip&#39;, interactive: true, appendTo: () =&gt; document.body })">
<div aria-hidden="true" class="
w-full bg-up-600 first:rounded-t-md last:rounded-b-md
" style="height: 54.0px"></div>
<div aria-hidden="true" class="
w-full bg-warn-700 first:rounded-t-md last:rounded-b-md
" style="height: 6.0px"></div>
<div class="hidden" x-ref="content">
March 27, 2026
<br>
Warning for 1 Hour and 49 Minutes
</div>
</div>
<div aria-label="Day 3 of 31, March 28, 2026: Up all day" aria-posinset="3" aria-setsize="31" class="
w-1 h-16 bg-up-600 rounded-md
md:w-1.5
" role="listitem" tabindex="-1"></div>
<div aria-label="Day 4 of 31, March 29, 2026: Up all day" aria-posinset="4" aria-setsize="31" class="
w-1 h-16 bg-up-600 rounded-md
md:w-1.5
" role="listitem" tabindex="-1"></div>
<div aria-label="Day 5 of 31, March 30, 2026: Warning for 15 Minutes" aria-posinset="5" aria-setsize="31" class="
w-1 h-16 flex flex-col gap-1
md:w-1.5
" role="listitem" tabindex="-1" x-data="Tippy({ arrow: true, placement: &#39;top&#39;, theme: &#39;tooltip&#39;, interactive: true, appendTo: () =&gt; document.body })">
<div aria-hidden="true" class="
w-full bg-up-600 first:rounded-t-md last:rounded-b-md
" style="height: 54.0px"></div>
<div aria-hidden="true" class="
w-full bg-warn-700 first:rounded-t-md last:rounded-b-md
" style="height: 6.0px"></div>
<div class="hidden" x-ref="content">
March 30, 2026
<br>
Warning for 15 Minutes
</div>
</div>
<div aria-label="Day 6 of 31, March 31, 2026: Warning for 9 Hours and 27 Minutes" aria-posinset="6" aria-setsize="31" class="
w-1 h-16 flex flex-col gap-1
md:w-1.5
" role="listitem" tabindex="-1" x-data="Tippy({ arrow: true, placement: &#39;top&#39;, theme: &#39;tooltip&#39;, interactive: true, appendTo: () =&gt; document.body })">
<div aria-hidden="true" class="
w-full bg-up-600 first:rounded-t-md last:rounded-b-md
" style="height: 36.0px"></div>
<div aria-hidden="true" class="
w-full bg-warn-700 first:rounded-t-md last:rounded-b-md
" style="height: 24.0px"></div>
<div class="hidden" x-ref="content">
March 31, 2026
<br>
Warning for 9 Hours and 27 Minutes
</div>
</div>
<div aria-label="Day 7 of 31, April 01, 2026: Up all day" aria-posinset="7" aria-setsize="31" class="
w-1 h-16 bg-up-600 rounded-md
md:w-1.5
" role="listitem" tabindex="-1"></div>
<div aria-label="Day 8 of 31, April 02, 2026: Up all day" aria-posinset="8" aria-setsize="31" class="
w-1 h-16 bg-up-600 rounded-md
md:w-1.5
" role="listitem" tabindex="-1"></div>
<div aria-label="Day 9 of 31, April 03, 2026: Up all day" aria-posinset="9" aria-setsize="31" class="
w-1 h-16 bg-up-600 rounded-md
md:w-1.5
" role="listitem" tabindex="-1"></div>
<div aria-label="Day 10 of 31, April 04, 2026: Up all day" aria-posinset="10" aria-setsize="31" class="
w-1 h-16 bg-up-600 rounded-md
md:w-1.5
" role="listitem" tabindex="-1"></div>
<div aria-label="Day 11 of 31, April 05, 2026: Up all day" aria-posinset="11" aria-setsize="31" class="
w-1 h-16 bg-up-600 rounded-md
md:w-1.5
" role="listitem" tabindex="-1"></div>
<div aria-label="Day 12 of 31, April 06, 2026: Up all day" aria-posinset="12" aria-setsize="31" class="
w-1 h-16 bg-up-600 rounded-md
md:w-1.5
" role="listitem" tabindex="-1"></div>
<div aria-label="Day 13 of 31, April 07, 2026: Up all day" aria-posinset="13" aria-setsize="31" class="
w-1 h-16 bg-up-600 rounded-md
md:w-1.5
" role="listitem" tabindex="-1"></div>
<div aria-label="Day 14 of 31, April 08, 2026: Up all day" aria-posinset="14" aria-setsize="31" class="
w-1 h-16 bg-up-600 rounded-md
md:w-1.5
" role="listitem" tabindex="-1"></div>
<div aria-label="Day 15 of 31, April 09, 2026: Up all day" aria-posinset="15" aria-setsize="31" class="
w-1 h-16 bg-up-600 rounded-md
md:w-1.5
" role="listitem" tabindex="-1"></div>
<div aria-label="Day 16 of 31, April 10, 2026: Up all day" aria-posinset="16" aria-setsize="31" class="
w-1 h-16 bg-up-600 rounded-md
md:w-1.5
" role="listitem" tabindex="-1"></div>
<div aria-label="Day 17 of 31, April 11, 2026: Up all day" aria-posinset="17" aria-setsize="31" class="
w-1 h-16 bg-up-600 rounded-md
md:w-1.5
" role="listitem" tabindex="-1"></div>
<div aria-label="Day 18 of 31, April 12, 2026: Up all day" aria-posinset="18" aria-setsize="31" class="
w-1 h-16 bg-up-600 rounded-md
md:w-1.5
" role="listitem" tabindex="-1"></div>
<div aria-label="Day 19 of 31, April 13, 2026: Warning for 43 Minutes" aria-posinset="19" aria-setsize="31" class="
w-1 h-16 flex flex-col gap-1
md:w-1.5
" role="listitem" tabindex="-1" x-data="Tippy({ arrow: true, placement: &#39;top&#39;, theme: &#39;tooltip&#39;, interactive: true, appendTo: () =&gt; document.body })">
<div aria-hidden="true" class="
w-full bg-up-600 first:rounded-t-md last:rounded-b-md
" style="height: 54.0px"></div>
<div aria-hidden="true" class="
w-full bg-warn-700 first:rounded-t-md last:rounded-b-md
" style="height: 6.0px"></div>
<div class="hidden" x-ref="content">
April 13, 2026
<br>
Warning for 43 Minutes
</div>
</div>
<div aria-label="Day 20 of 31, April 14, 2026: Warning for 2 Minutes" aria-posinset="20" aria-setsize="31" class="
w-1 h-16 flex flex-col gap-1
md:w-1.5
" role="listitem" tabindex="-1" x-data="Tippy({ arrow: true, placement: &#39;top&#39;, theme: &#39;tooltip&#39;, interactive: true, appendTo: () =&gt; document.body })">
<div aria-hidden="true" class="
w-full bg-up-600 first:rounded-t-md last:rounded-b-md
" style="height: 54.0px"></div>
<div aria-hidden="true" class="
w-full bg-warn-700 first:rounded-t-md last:rounded-b-md
" style="height: 6.0px"></div>
<div class="hidden" x-ref="content">
April 14, 2026
<br>
Warning for 2 Minutes
</div>
</div>
<div aria-label="Day 21 of 31, April 15, 2026: Up all day" aria-posinset="21" aria-setsize="31" class="
w-1 h-16 bg-up-600 rounded-md
md:w-1.5
" role="listitem" tabindex="-1"></div>
<div aria-label="Day 22 of 31, April 16, 2026: Up all day" aria-posinset="22" aria-setsize="31" class="
w-1 h-16 bg-up-600 rounded-md
md:w-1.5
" role="listitem" tabindex="-1"></div>
<div aria-label="Day 23 of 31, April 17, 2026: Warning for 1 Hour and 2 Minutes" aria-posinset="23" aria-setsize="31" class="
w-1 h-16 flex flex-col gap-1
md:w-1.5
" role="listitem" tabindex="-1" x-data="Tippy({ arrow: true, placement: &#39;top&#39;, theme: &#39;tooltip&#39;, interactive: true, appendTo: () =&gt; document.body })">
<div aria-hidden="true" class="
w-full bg-up-600 first:rounded-t-md last:rounded-b-md
" style="height: 54.0px"></div>
<div aria-hidden="true" class="
w-full bg-warn-700 first:rounded-t-md last:rounded-b-md
" style="height: 6.0px"></div>
<div class="hidden" x-ref="content">
April 17, 2026
<br>
Warning for 1 Hour and 2 Minutes
</div>
</div>
<div aria-label="Day 24 of 31, April 18, 2026: Up all day" aria-posinset="24" aria-setsize="31" class="
w-1 h-16 bg-up-600 rounded-md
md:w-1.5
" role="listitem" tabindex="-1"></div>
<div aria-label="Day 25 of 31, April 19, 2026: Up all day" aria-posinset="25" aria-setsize="31" class="
w-1 h-16 bg-up-600 rounded-md
md:w-1.5
" role="listitem" tabindex="-1"></div>
<div aria-label="Day 26 of 31, April 20, 2026: Up all day" aria-posinset="26" aria-setsize="31" class="
w-1 h-16 bg-up-600 rounded-md
md:w-1.5
" role="listitem" tabindex="-1"></div>
<div aria-label="Day 27 of 31, April 21, 2026: Up all day" aria-posinset="27" aria-setsize="31" class="
w-1 h-16 bg-up-600 rounded-md
md:w-1.5
" role="listitem" tabindex="-1"></div>
<div aria-label="Day 28 of 31, April 22, 2026: Warning for 3 Hours and 10 Minutes" aria-posinset="28" aria-setsize="31" class="
w-1 h-16 flex flex-col gap-1
md:w-1.5
" role="listitem" tabindex="-1" x-data="Tippy({ arrow: true, placement: &#39;top&#39;, theme: &#39;tooltip&#39;, interactive: true, appendTo: () =&gt; document.body })">
<div aria-hidden="true" class="
w-full bg-up-600 first:rounded-t-md last:rounded-b-md
" style="height: 48.0px"></div>
<div aria-hidden="true" class="
w-full bg-warn-700 first:rounded-t-md last:rounded-b-md
" style="height: 12.0px"></div>
<div class="hidden" x-ref="content">
April 22, 2026
<br>
Warning for 3 Hours and 10 Minutes
</div>
</div>
<div aria-label="Day 29 of 31, April 23, 2026: Warning for 1 Hour and 19 Minutes" aria-posinset="29" aria-setsize="31" class="
w-1 h-16 flex flex-col gap-1
md:w-1.5
" role="listitem" tabindex="-1" x-data="Tippy({ arrow: true, placement: &#39;top&#39;, theme: &#39;tooltip&#39;, interactive: true, appendTo: () =&gt; document.body })">
<div aria-hidden="true" class="
w-full bg-up-600 first:rounded-t-md last:rounded-b-md
" style="height: 54.0px"></div>
<div aria-hidden="true" class="
w-full bg-warn-700 first:rounded-t-md last:rounded-b-md
" style="height: 6.0px"></div>
<div class="hidden" x-ref="content">
April 23, 2026
<br>
Warning for 1 Hour and 19 Minutes
</div>
</div>
<div aria-label="Day 30 of 31, April 24, 2026: Up all day" aria-posinset="30" aria-setsize="31" class="
w-1 h-16 bg-up-600 rounded-md
md:w-1.5
" role="listitem" tabindex="-1"></div>
<div aria-label="Day 31 of 31, April 25, 2026: Up all day" aria-posinset="31" aria-setsize="31" class="
w-1 h-16 bg-up-600 rounded-md
md:w-1.5
" role="listitem" tabindex="-1"></div>
</div>
<div class="mt-3 flex items-center justify-between text-base text-text-level3">
<span aria-hidden="true">30 days ago</span>
<span aria-label="97.6% uptime for the last 30 days">
97.6%
<span aria-hidden="true">uptime</span>
</span>
<span aria-hidden="true">Today</span>
</div>
<div aria-label="Status legend" class="
mt-6 flex flex-col gap-2
md:flex-row md:items-center md:gap-6
" role="list">
<div class="flex items-center gap-2" role="listitem">
<div aria-hidden="true" class="w-[10px] h-[10px] rounded-full bg-up-600"></div>
<span class="text-base text-text-level2">
Up
</span>
</div>
<div class="flex items-center gap-2" role="listitem">
<div aria-hidden="true" class="w-[10px] h-[10px] rounded-full bg-down-600"></div>
<span class="text-base text-text-level2">
Down
</span>
</div>
<div class="flex items-center gap-2" role="listitem">
<div aria-hidden="true" class="w-[10px] h-[10px] rounded-full bg-warn-700"></div>
<span class="text-base text-text-level2">
Warn
</span>
</div>
<div class="flex items-center gap-2" role="listitem">
<div aria-hidden="true" class="w-[10px] h-[10px] rounded-full bg-maint-600"></div>
<span class="text-base text-text-level2">
Maintenance
</span>
</div>
<div class="flex items-center gap-2" role="listitem">
<div aria-hidden="true" class="w-[10px] h-[10px] rounded-full bg-icon-low"></div>
<span class="text-base text-text-level2">
Unknown
</span>
</div>
</div>

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

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

</template></turbo-stream>