<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="Google AI Studio and Gemini API logo" onerror="this.src=&#39;https://static.statusgator.com/assets/service-placeholder-f730d793d6c3df43ed952c21b14c76e20277895680b3ed9790fb708c1283705f.svg&#39;" src="https://favicons.statusgator.com/W5a58WAJvVcu9OHQ.png" />
</div>
<p class="
font-semibold text-lg text-text-level1
md:text-2xl
" id="service-details-title">
Google AI Studio and Gemini API
</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="amw3pmh1pqxialt60yxb8c9abg92b83k"><desc id="amw3pmh1pqxialt60yxb8c9abg92b83k">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">
Gemini API is having some issues serving recently created keys; AI Studio experiencing increased error rates.
</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">

</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="a3x6x7e7sd36szvx0ikuezvabnxwyhve" class="shrink-0 text-warn-600"><desc id="a3x6x7e7sd36szvx0ikuezvabnxwyhve">warn icon</desc>
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.0781 3.71838C10.9961 2.08638 13.3445 2.08638 14.2613 3.71838L20.9573 15.6224C21.8573 17.2232 20.7017 19.1984 18.8669 19.1984H5.47374C3.63774 19.1984 2.48214 17.2232 3.38214 15.6224L10.0781 3.71838ZM13.3697 15.5996C13.3697 15.9178 13.2433 16.2231 13.0183 16.4481C12.7932 16.6732 12.488 16.7996 12.1697 16.7996C11.8515 16.7996 11.5463 16.6732 11.3212 16.4481C11.0962 16.2231 10.9697 15.9178 10.9697 15.5996C10.9697 15.2813 11.0962 14.9761 11.3212 14.7511C11.5463 14.526 11.8515 14.3996 12.1697 14.3996C12.488 14.3996 12.7932 14.526 13.0183 14.7511C13.2433 14.9761 13.3697 15.2813 13.3697 15.5996ZM12.1697 5.99958C11.8515 5.99958 11.5463 6.12601 11.3212 6.35106C11.0962 6.5761 10.9697 6.88132 10.9697 7.19958V10.7996C10.9697 11.1178 11.0962 11.4231 11.3212 11.6481C11.5463 11.8732 11.8515 11.9996 12.1697 11.9996C12.488 11.9996 12.7932 11.8732 13.0183 11.6481C13.2433 11.4231 13.3697 11.1178 13.3697 10.7996V7.19958C13.3697 6.88132 13.2433 6.5761 13.0183 6.35106C12.7932 6.12601 12.488 5.99958 12.1697 5.99958Z" 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-warn-100 border-warn-200 text-warn-800 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="atmcmblj52fmy7onpcedkykt75swipdk"><desc id="atmcmblj52fmy7onpcedkykt75swipdk">warn icon</desc>
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.96968 2.25C7.54668 1.25 8.98968 1.25 9.56768 2.25L14.7637 11.25C14.8953 11.478 14.9646 11.7367 14.9646 12C14.9646 12.2633 14.8953 12.522 14.7637 12.75C14.632 12.978 14.4427 13.1674 14.2147 13.299C13.9866 13.4307 13.728 13.5 13.4647 13.5H3.07268C2.80929 13.5002 2.5505 13.431 2.32234 13.2994C2.09418 13.1678 1.90469 12.9785 1.77292 12.7504C1.64115 12.5224 1.57176 12.2636 1.57172 12.0002C1.57167 11.7369 1.64098 11.4781 1.77268 11.25L6.96968 2.25ZM8.26868 4C8.46759 4 8.65836 4.07902 8.79901 4.21967C8.93966 4.36032 9.01868 4.55109 9.01868 4.75V7.75C9.01868 7.94891 8.93966 8.13968 8.79901 8.28033C8.65836 8.42098 8.46759 8.5 8.26868 8.5C8.06977 8.5 7.879 8.42098 7.73835 8.28033C7.5977 8.13968 7.51868 7.94891 7.51868 7.75V4.75C7.51868 4.55109 7.5977 4.36032 7.73835 4.21967C7.879 4.07902 8.06977 4 8.26868 4ZM8.26868 12C8.53389 12 8.78825 11.8946 8.97578 11.7071C9.16332 11.5196 9.26868 11.2652 9.26868 11C9.26868 10.7348 9.16332 10.4804 8.97578 10.2929C8.78825 10.1054 8.53389 10 8.26868 10C8.00346 10 7.74911 10.1054 7.56157 10.2929C7.37404 10.4804 7.26868 10.7348 7.26868 11C7.26868 11.2652 7.37404 11.5196 7.56157 11.7071C7.74911 11.8946 8.00346 12 8.26868 12Z" fill="currentColor"></path>
</svg>
Warn
</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 29, 2026: Warning for 23 Hours and 59 Minutes" aria-posinset="1" aria-setsize="31" class="
w-1 h-16 bg-warn-700 rounded-md
md:w-1.5
" role="listitem" tabindex="0" x-data="Tippy({ arrow: true, placement: &#39;top&#39;, theme: &#39;tooltip&#39;, interactive: true, appendTo: () =&gt; document.body })">
<div class="hidden" x-ref="content">
March 29, 2026
<br>
Warning for 23 Hours and 59 Minutes
</div>
</div>
<div aria-label="Day 2 of 31, March 30, 2026: Warning for 1 Day" aria-posinset="2" aria-setsize="31" class="
w-1 h-16 bg-warn-700 rounded-md
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 class="hidden" x-ref="content">
March 30, 2026
<br>
Warning for 1 Day
</div>
</div>
<div aria-label="Day 3 of 31, March 31, 2026: Warning for 18 Hours and 38 Minutes" aria-posinset="3" 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: 12.0px"></div>
<div aria-hidden="true" class="
w-full bg-warn-700 first:rounded-t-md last:rounded-b-md
" style="height: 48.0px"></div>
<div class="hidden" x-ref="content">
March 31, 2026
<br>
Warning for 18 Hours and 38 Minutes
</div>
</div>
<div aria-label="Day 4 of 31, April 01, 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, April 02, 2026: Up all day" aria-posinset="5" 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 6 of 31, April 03, 2026: Warning for 1 Hour and 31 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: 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 03, 2026
<br>
Warning for 1 Hour and 31 Minutes
</div>
</div>
<div aria-label="Day 7 of 31, April 04, 2026: Warning for 1 Day" aria-posinset="7" aria-setsize="31" class="
w-1 h-16 bg-warn-700 rounded-md
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 class="hidden" x-ref="content">
April 04, 2026
<br>
Warning for 1 Day
</div>
</div>
<div aria-label="Day 8 of 31, April 05, 2026: Warning for 1 Day" aria-posinset="8" aria-setsize="31" class="
w-1 h-16 bg-warn-700 rounded-md
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 class="hidden" x-ref="content">
April 05, 2026
<br>
Warning for 1 Day
</div>
</div>
<div aria-label="Day 9 of 31, April 06, 2026: Warning for 21 Hours and 18 Minutes" aria-posinset="9" 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: 6.0px"></div>
<div aria-hidden="true" class="
w-full bg-warn-700 first:rounded-t-md last:rounded-b-md
" style="height: 54.0px"></div>
<div class="hidden" x-ref="content">
April 06, 2026
<br>
Warning for 21 Hours and 18 Minutes
</div>
</div>
<div aria-label="Day 10 of 31, April 07, 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 08, 2026: Warning for 1 Hour and 19 Minutes" aria-posinset="11" 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 08, 2026
<br>
Warning for 1 Hour and 19 Minutes
</div>
</div>
<div aria-label="Day 12 of 31, April 09, 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 10, 2026: Warning for 58 Minutes" aria-posinset="13" 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 10, 2026
<br>
Warning for 58 Minutes
</div>
</div>
<div aria-label="Day 14 of 31, April 11, 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 12, 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 13, 2026: Warning for 14 Hours and 1 Minute" aria-posinset="16" 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: 24.0px"></div>
<div aria-hidden="true" class="
w-full bg-warn-700 first:rounded-t-md last:rounded-b-md
" style="height: 36.0px"></div>
<div class="hidden" x-ref="content">
April 13, 2026
<br>
Warning for 14 Hours and 1 Minute
</div>
</div>
<div aria-label="Day 17 of 31, April 14, 2026: Warning for 1 Day" aria-posinset="17" aria-setsize="31" class="
w-1 h-16 bg-warn-700 rounded-md
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 class="hidden" x-ref="content">
April 14, 2026
<br>
Warning for 1 Day
</div>
</div>
<div aria-label="Day 18 of 31, April 15, 2026: Warning for 1 Day" aria-posinset="18" aria-setsize="31" class="
w-1 h-16 bg-warn-700 rounded-md
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 class="hidden" x-ref="content">
April 15, 2026
<br>
Warning for 1 Day
</div>
</div>
<div aria-label="Day 19 of 31, April 16, 2026: Warning for 1 Day" aria-posinset="19" aria-setsize="31" class="
w-1 h-16 bg-warn-700 rounded-md
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 class="hidden" x-ref="content">
April 16, 2026
<br>
Warning for 1 Day
</div>
</div>
<div aria-label="Day 20 of 31, April 17, 2026: Warning for 19 Hours and 59 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: 6.0px"></div>
<div aria-hidden="true" class="
w-full bg-warn-700 first:rounded-t-md last:rounded-b-md
" style="height: 54.0px"></div>
<div class="hidden" x-ref="content">
April 17, 2026
<br>
Warning for 19 Hours and 59 Minutes
</div>
</div>
<div aria-label="Day 21 of 31, April 18, 2026: Warning for 23 Hours and 59 Minutes" aria-posinset="21" aria-setsize="31" class="
w-1 h-16 bg-warn-700 rounded-md
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 class="hidden" x-ref="content">
April 18, 2026
<br>
Warning for 23 Hours and 59 Minutes
</div>
</div>
<div aria-label="Day 22 of 31, April 19, 2026: Warning for 1 Day" aria-posinset="22" aria-setsize="31" class="
w-1 h-16 bg-warn-700 rounded-md
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 class="hidden" x-ref="content">
April 19, 2026
<br>
Warning for 1 Day
</div>
</div>
<div aria-label="Day 23 of 31, April 20, 2026: Warning for 1 Day" aria-posinset="23" aria-setsize="31" class="
w-1 h-16 bg-warn-700 rounded-md
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 class="hidden" x-ref="content">
April 20, 2026
<br>
Warning for 1 Day
</div>
</div>
<div aria-label="Day 24 of 31, April 21, 2026: Warning for 1 Day" aria-posinset="24" aria-setsize="31" class="
w-1 h-16 bg-warn-700 rounded-md
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 class="hidden" x-ref="content">
April 21, 2026
<br>
Warning for 1 Day
</div>
</div>
<div aria-label="Day 25 of 31, April 22, 2026: Warning for 1 Day" aria-posinset="25" aria-setsize="31" class="
w-1 h-16 bg-warn-700 rounded-md
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 class="hidden" x-ref="content">
April 22, 2026
<br>
Warning for 1 Day
</div>
</div>
<div aria-label="Day 26 of 31, April 23, 2026: Warning for 1 Day" aria-posinset="26" aria-setsize="31" class="
w-1 h-16 bg-warn-700 rounded-md
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 class="hidden" x-ref="content">
April 23, 2026
<br>
Warning for 1 Day
</div>
</div>
<div aria-label="Day 27 of 31, April 24, 2026: Warning for 1 Day" aria-posinset="27" aria-setsize="31" class="
w-1 h-16 bg-warn-700 rounded-md
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 class="hidden" x-ref="content">
April 24, 2026
<br>
Warning for 1 Day
</div>
</div>
<div aria-label="Day 28 of 31, April 25, 2026: Warning for 1 Day" aria-posinset="28" aria-setsize="31" class="
w-1 h-16 bg-warn-700 rounded-md
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 class="hidden" x-ref="content">
April 25, 2026
<br>
Warning for 1 Day
</div>
</div>
<div aria-label="Day 29 of 31, April 26, 2026: Warning for 1 Day" aria-posinset="29" aria-setsize="31" class="
w-1 h-16 bg-warn-700 rounded-md
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 class="hidden" x-ref="content">
April 26, 2026
<br>
Warning for 1 Day
</div>
</div>
<div aria-label="Day 30 of 31, April 27, 2026: Warning for 1 Day" aria-posinset="30" aria-setsize="31" class="
w-1 h-16 bg-warn-700 rounded-md
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 class="hidden" x-ref="content">
April 27, 2026
<br>
Warning for 1 Day
</div>
</div>
<div aria-label="Day 31 of 31, April 28, 2026: Warning for 23 Hours and 59 Minutes" aria-posinset="31" aria-setsize="31" class="
w-1 h-16 bg-warn-700 rounded-md
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 class="hidden" x-ref="content">
April 28, 2026
<br>
Warning for 23 Hours and 59 Minutes
</div>
</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="31.2% uptime for the last 30 days">
31.2%
<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>