<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="CAASPP logo" onerror="this.src=&#39;https://static.statusgator.com/assets/service-placeholder-f730d793d6c3df43ed952c21b14c76e20277895680b3ed9790fb708c1283705f.svg&#39;" src="https://favicons.statusgator.com/Yoxame3LTnpWGxBs.png" />
</div>
<p class="
font-semibold text-lg text-text-level1
md:text-2xl
" id="service-details-title">
CAASPP
</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="aarhq4bd54qf9a4rimkmtlahpqbl7zrd"><desc id="aarhq4bd54qf9a4rimkmtlahpqbl7zrd">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: false,
historyOpen: true
}">
<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">
Issue: In the Grades 6–8 Speaking DFAs (Forms 1–6) for the Summarize an Academic Presentation task, the first SAY line in each of two passages contains partially incorrect wording. &quot;You will listen to another recorded presentation,&quot; and the incorrect text in the second passage SAY line reads, &quot;In this part of the test, you will listen to a recorded presentation.&quot;; Issue: In the High School CAST Interim Assessment–Life Sciences I, item number 3, there is a typo in the image depicting a formula.; The California Educator Reporting System (CERS), Custom Aggregate Reports for high school mathematics are displaying “NA” for the Target description. In this case, the NA stands for “Not Available” meaning the data is not available to render in CERS.
</p>
<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>
<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: Up all day" aria-posinset="2" 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 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: 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, March 31, 2026: Up all day" aria-posinset="6" 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 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: Up all day" aria-posinset="19" 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 20 of 31, April 14, 2026: Up all day" aria-posinset="20" 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 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: Up all day" aria-posinset="23" 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 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: Warning for 5 Hours and 45 Minutes" aria-posinset="27" 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: 42.0px"></div>
<div aria-hidden="true" class="
w-full bg-warn-700 first:rounded-t-md last:rounded-b-md
" style="height: 18.0px"></div>
<div class="hidden" x-ref="content">
April 21, 2026
<br>
Warning for 5 Hours and 45 Minutes
</div>
</div>
<div aria-label="Day 28 of 31, April 22, 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 22, 2026
<br>
Warning for 1 Day
</div>
</div>
<div aria-label="Day 29 of 31, April 23, 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 23, 2026
<br>
Warning for 1 Day
</div>
</div>
<div aria-label="Day 30 of 31, April 24, 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 24, 2026
<br>
Warning for 1 Day
</div>
</div>
<div aria-label="Day 31 of 31, April 25, 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 25, 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="86% uptime for the last 30 days">
86%
<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>