<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="afd7yb9kpuqlqendzmtm2cagf16qek01"><desc id="afd7yb9kpuqlqendzmtm2cagf16qek01">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">
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 aria-label="Service status history over the last 30 days" class="
w-full flex items-center justify-between
" role="list" tabindex="0">
<div aria-label="March 23, 2026: Up all day" class="
w-1 h-16 bg-up-600 rounded-md
md:w-1.5
" role="listitem"></div>
<div aria-label="March 24, 2026: Up all day" class="
w-1 h-16 bg-up-600 rounded-md
md:w-1.5
" role="listitem"></div>
<div aria-label="March 25, 2026: Up all day" class="
w-1 h-16 bg-up-600 rounded-md
md:w-1.5
" role="listitem"></div>
<div aria-label="March 26, 2026: Up all day" class="
w-1 h-16 bg-up-600 rounded-md
md:w-1.5
" role="listitem"></div>
<div aria-label="March 27, 2026: Up all day" class="
w-1 h-16 bg-up-600 rounded-md
md:w-1.5
" role="listitem"></div>
<div aria-label="March 28, 2026: Up all day" class="
w-1 h-16 bg-up-600 rounded-md
md:w-1.5
" role="listitem"></div>
<div aria-label="March 29, 2026: Up all day" class="
w-1 h-16 bg-up-600 rounded-md
md:w-1.5
" role="listitem"></div>
<div aria-label="March 30, 2026: Up all day" class="
w-1 h-16 bg-up-600 rounded-md
md:w-1.5
" role="listitem"></div>
<div aria-label="March 31, 2026: Up all day" class="
w-1 h-16 bg-up-600 rounded-md
md:w-1.5
" role="listitem"></div>
<div aria-label="April 01, 2026: Up all day" class="
w-1 h-16 bg-up-600 rounded-md
md:w-1.5
" role="listitem"></div>
<div aria-label="April 02, 2026: Up all day" class="
w-1 h-16 bg-up-600 rounded-md
md:w-1.5
" role="listitem"></div>
<div aria-label="April 03, 2026: Up all day" class="
w-1 h-16 bg-up-600 rounded-md
md:w-1.5
" role="listitem"></div>
<div aria-label="April 04, 2026: Up all day" class="
w-1 h-16 bg-up-600 rounded-md
md:w-1.5
" role="listitem"></div>
<div aria-label="April 05, 2026: Up all day" class="
w-1 h-16 bg-up-600 rounded-md
md:w-1.5
" role="listitem"></div>
<div aria-label="April 06, 2026: Up all day" class="
w-1 h-16 bg-up-600 rounded-md
md:w-1.5
" role="listitem"></div>
<div aria-label="April 07, 2026: Up all day" class="
w-1 h-16 bg-up-600 rounded-md
md:w-1.5
" role="listitem"></div>
<div aria-label="April 08, 2026: Up all day" class="
w-1 h-16 bg-up-600 rounded-md
md:w-1.5
" role="listitem"></div>
<div aria-label="April 09, 2026: Up all day" class="
w-1 h-16 bg-up-600 rounded-md
md:w-1.5
" role="listitem"></div>
<div aria-label="April 10, 2026: Up all day" class="
w-1 h-16 bg-up-600 rounded-md
md:w-1.5
" role="listitem"></div>
<div aria-label="April 11, 2026: Up all day" class="
w-1 h-16 bg-up-600 rounded-md
md:w-1.5
" role="listitem"></div>
<div aria-label="April 12, 2026: Up all day" class="
w-1 h-16 bg-up-600 rounded-md
md:w-1.5
" role="listitem"></div>
<div aria-label="April 13, 2026: Up all day" class="
w-1 h-16 bg-up-600 rounded-md
md:w-1.5
" role="listitem"></div>
<div aria-label="April 14, 2026: Up all day" class="
w-1 h-16 bg-up-600 rounded-md
md:w-1.5
" role="listitem"></div>
<div aria-label="April 15, 2026: Up all day" class="
w-1 h-16 bg-up-600 rounded-md
md:w-1.5
" role="listitem"></div>
<div aria-label="April 16, 2026: Up all day" class="
w-1 h-16 bg-up-600 rounded-md
md:w-1.5
" role="listitem"></div>
<div aria-label="April 17, 2026: Up all day" class="
w-1 h-16 bg-up-600 rounded-md
md:w-1.5
" role="listitem"></div>
<div aria-label="April 18, 2026: Up all day" class="
w-1 h-16 bg-up-600 rounded-md
md:w-1.5
" role="listitem"></div>
<div aria-label="April 19, 2026: Up all day" class="
w-1 h-16 bg-up-600 rounded-md
md:w-1.5
" role="listitem"></div>
<div aria-label="April 20, 2026: Up all day" class="
w-1 h-16 bg-up-600 rounded-md
md:w-1.5
" role="listitem"></div>
<div aria-label="April 21, 2026: Warning for 5 Hours and 45 Minutes" class="
w-1 h-16 flex flex-col gap-1
md:w-1.5
" role="listitem">
<div class="
w-full bg-up-600 first:rounded-t-md last:rounded-b-md
" style="height: 42.0px"></div>
<div class="
w-full bg-warn-700 first:rounded-t-md last:rounded-b-md
" style="height: 18.0px">
<div class="inline-flex w-full h-full" 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">
<div class="p-3 font-normal text-sm text-left rounded-lg bg-neutral-900 border border-solid border-neutral-800 text-white">
April 21, 2026
<br>
Warning for 5 Hours and 45 Minutes

</div>
</div>
</div>
</div>
</div>
<div class="inline-flex" x-data="Tippy({
        arrow: true,
        placement: &#39;top&#39;,
        theme: &#39;tooltip&#39;,
        interactive: true,
        appendTo: () =&gt; document.body,
      })">
<div aria-label="April 22, 2026: Warning for 23 Hours and 59 Minutes" class="
w-1 h-16 bg-warn-700 rounded-md
md:w-1.5
" role="listitem"></div>

<div class="hidden" x-ref="content">
<div class="p-3 font-normal text-sm text-left rounded-lg bg-neutral-900 border border-solid border-neutral-800 text-white">
April 22, 2026
<br>
Warning for 23 Hours and 59 Minutes

</div>
</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="Uptime over the last 30 days: 96%">96%</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>