From 07845d979a914f17c5c04cad8ca51fd6931b0c54 Mon Sep 17 00:00:00 2001
From: Natalia Portillo <claunia@claunia.com>
Date: Wed, 10 Sep 2025 21:15:42 +0100
Subject: [PATCH] Migrate device report to BlazorBootstrap.

---
 .../Components/Pages/Report/View.razor        | 961 +++++++-----------
 1 file changed, 395 insertions(+), 566 deletions(-)

diff --git a/Aaru.Server/Components/Pages/Report/View.razor b/Aaru.Server/Components/Pages/Report/View.razor
index d43c7085..7c657ca5 100644
--- a/Aaru.Server/Components/Pages/Report/View.razor
+++ b/Aaru.Server/Components/Pages/Report/View.razor
@@ -1,11 +1,12 @@
-@page "/Report/View/{Id:int}"
+@page "/Report/{Id:int}"
 @rendermode InteractiveServer
 
 @inject Microsoft.EntityFrameworkCore.IDbContextFactory<DbContext> DbContextFactory
 
 <PageTitle>@PageTitle</PageTitle>
 <style>
-    .list-group-item {
+    .list-group-item
+    {
         background-color: #212529;
         color: white;
         border-color: #373b3e;
@@ -15,7 +16,7 @@
 {
     <div class="stats-section">
         <h1 style="color: red; align-content: center; padding: 2rem">The requested device report has not been
-            found...</h1>
+                                                                     found...</h1>
     </div>
 
     return;
@@ -35,586 +36,450 @@
 
 <div class="stats-section">
     <h3 style="font-weight: bold;">
-        @DeviceType<br/>
+        @DeviceType<br />
     </h3>
     <Accordion>
         @if(UsbItem is not null)
         {
-            <AccordionItem>
-                <AccordionHeader>
-                    <Heading Size="HeadingSize.Is5">
-                        <AccordionToggle>USB characteristics</AccordionToggle>
-                    </Heading>
-                </AccordionHeader>
-                <AccordionBody>
-                    <Table FullWidth>
-                        <TableBody>
-                            <TableRow>
-                                <TableRowHeader class="text-end">Manufacturer</TableRowHeader>
-                                <TableRowCell>@UsbItem.Manufacturer</TableRowCell>
-                            </TableRow>
-                            <TableRow>
-                                <TableRowHeader class="text-end">Product</TableRowHeader>
-                                <TableRowCell>@UsbItem.Product</TableRowCell>
-                            </TableRow>
-                            <TableRow>
-                                <TableRowHeader class="text-end">Vendor ID</TableRowHeader>
-                                <TableRowCell>@UsbItem.VendorDescription</TableRowCell>
-                            </TableRow>
-                            <TableRow>
-                                <TableRowHeader class="text-end">Product ID</TableRowHeader>
-                                <TableRowCell>@UsbItem.ProductDescription</TableRowCell>
-                            </TableRow>
-                        </TableBody>
-                    </Table>
-                </AccordionBody>
+            <AccordionItem Title="USB characteristics">
+                <Content>
+                    <table class="table table-dark table-bordered w-100">
+                        <tbody>
+                        <tr>
+                            <th class="text-end">Manufacturer</th>
+                            <td>@UsbItem.Manufacturer</td>
+                        </tr>
+                        <tr>
+                            <th class="text-end">Product</th>
+                            <td>@UsbItem.Product</td>
+                        </tr>
+                        <tr>
+                            <th class="text-end">Vendor ID</th>
+                            <td>@UsbItem.VendorDescription</td>
+                        </tr>
+                        <tr>
+                            <th class="text-end">Product ID</th>
+                            <td>@UsbItem.ProductDescription</td>
+                        </tr>
+                        </tbody>
+                    </table>
+                </Content>
             </AccordionItem>
         }
         @if(FireWireItem is not null)
         {
-            <AccordionItem>
-                <AccordionHeader>
-                    <Heading Size="HeadingSize.Is5">
-                        <AccordionToggle>FireWire characteristics</AccordionToggle>
-                    </Heading>
-                </AccordionHeader>
-                <AccordionBody>
-                    <Table FullWidth>
-                        <TableBody>
-                            <TableRow>
-                                <TableRowHeader class="text-end">Manufacturer</TableRowHeader>
-                                <TableRowCell>@FireWireItem.Manufacturer</TableRowCell>
-                            </TableRow>
-                            <TableRow>
-                                <TableRowHeader class="text-end">Product</TableRowHeader>
-                                <TableRowCell>@FireWireItem.Product</TableRowCell>
-                            </TableRow>
-                            <TableRow>
-                                <TableRowHeader class="text-end">Vendor ID</TableRowHeader>
-                                <TableRowCell>@FireWireItem.VendorDescription</TableRowCell>
-                            </TableRow>
-                            <TableRow>
-                                <TableRowHeader class="text-end">Product ID</TableRowHeader>
-                                <TableRowCell>@FireWireItem.ProductDescription</TableRowCell>
-                            </TableRow>
-                        </TableBody>
-                    </Table>
-                </AccordionBody>
+            <AccordionItem Title="FireWire characteristics">
+                <Content>
+                    <table class="table table-dark table-bordered w-100">
+                        <tbody>
+                        <tr>
+                            <th class="text-end">Manufacturer</th>
+                            <td>@FireWireItem.Manufacturer</td>
+                        </tr>
+                        <tr>
+                            <th class="text-end">Product</th>
+                            <td>@FireWireItem.Product</td>
+                        </tr>
+                        <tr>
+                            <th class="text-end">Vendor ID</th>
+                            <td>@FireWireItem.VendorDescription</td>
+                        </tr>
+                        <tr>
+                            <th class="text-end">Product ID</th>
+                            <td>@FireWireItem.ProductDescription</td>
+                        </tr>
+                        </tbody>
+                    </table>
+                </Content>
             </AccordionItem>
         }
         @if(PcmciaItem != null)
         {
-            <AccordionItem>
-                <AccordionHeader>
-                    <Heading Size="HeadingSize.Is5">
-                        <AccordionToggle>PCMCIA characteristics</AccordionToggle>
-                    </Heading>
-                </AccordionHeader>
-                <AccordionBody>
-                    <Table FullWidth>
-                        <TableBody>
-                            <TableRow>
-                                <TableRowHeader class="text-end">Manufacturer</TableRowHeader>
-                                <TableRowCell>@PcmciaItem.Manufacturer</TableRowCell>
-                            </TableRow>
-                            <TableRow>
-                                <TableRowHeader class="text-end">Product</TableRowHeader>
-                                <TableRowCell>@PcmciaItem.Product</TableRowCell>
-                            </TableRow>
-                            <TableRow>
-                                <TableRowHeader class="text-end">Manufacturer code</TableRowHeader>
-                                <TableRowCell>@PcmciaItem.VendorDescription</TableRowCell>
-                            </TableRow>
-                            <TableRow>
-                                <TableRowHeader class="text-end">Card code</TableRowHeader>
-                                <TableRowCell>@PcmciaItem.ProductDescription</TableRowCell>
-                            </TableRow>
-                            <TableRow>
-                                <TableRowHeader class="text-end">Compliance</TableRowHeader>
-                                <TableRowCell>@PcmciaItem.Compliance</TableRowCell>
-                            </TableRow>
-                            @if(PcmciaTuples != null)
+            <AccordionItem Title="PCMCIA characteristics">
+                <Content>
+                    <table class="table table-dark table-bordered w-100">
+                        <tbody>
+                        <tr>
+                            <th class="text-end">Manufacturer</th>
+                            <td>@PcmciaItem.Manufacturer</td>
+                        </tr>
+                        <tr>
+                            <th class="text-end">Product</th>
+                            <td>@PcmciaItem.Product</td>
+                        </tr>
+                        <tr>
+                            <th class="text-end">Manufacturer code</th>
+                            <td>@PcmciaItem.VendorDescription</td>
+                        </tr>
+                        <tr>
+                            <th class="text-end">Card code</th>
+                            <td>@PcmciaItem.ProductDescription</td>
+                        </tr>
+                        <tr>
+                            <th class="text-end">Compliance</th>
+                            <td>@PcmciaItem.Compliance</td>
+                        </tr>
+                        @if(PcmciaTuples != null)
+                        {
+                            foreach(KeyValuePair<string, string> kvp in PcmciaTuples)
                             {
-                                foreach(KeyValuePair<string, string> kvp in PcmciaTuples)
-                                {
-                                    <TableRow>
-                                        <TableRowHeader class="text-end">@kvp.Key</TableRowHeader>
-                                        <TableRowCell>@kvp.Value</TableRowCell>
-                                    </TableRow>
-                                }
+                                <tr>
+                                    <th class="text-end">@kvp.Key</th>
+                                    <td>@kvp.Value</td>
+                                </tr>
                             }
-                        </TableBody>
-                    </Table>
-                </AccordionBody>
+                        }
+                        </tbody>
+                    </table>
+                </Content>
             </AccordionItem>
         }
         @if(DeviceIdentification != null)
         {
-            <AccordionItem>
-                <AccordionHeader>
-                    <Heading Size="HeadingSize.Is5">
-                        <AccordionToggle>Device identification</AccordionToggle>
-                    </Heading>
-                </AccordionHeader>
-                <AccordionBody>
-                    <Table class="table-borderless table-dark" FullWidth>
-                        <TableBody>
-                            @foreach(KeyValuePair<string, string> kvp in DeviceIdentification)
-                            {
-                                <TableRow>
-                                    <TableRowHeader>@kvp.Key</TableRowHeader>
-                                    <TableRowCell>@kvp.Value</TableRowCell>
-                                </TableRow>
-                            }
-                        </TableBody>
-                    </Table>
-                </AccordionBody>
+            <AccordionItem Title="Device identification">
+                <Content>
+                    <table class="table table-dark table-borderless w-100">
+                        <tbody>
+                        @foreach(KeyValuePair<string, string> kvp in DeviceIdentification)
+                        {
+                            <tr>
+                                <th>@kvp.Key</th>
+                                <td>@kvp.Value</td>
+                            </tr>
+                        }
+                        </tbody>
+                    </table>
+                </Content>
             </AccordionItem>
         }
         @if(SupportedAtaVersions != null)
         {
-            <AccordionItem>
-                <AccordionHeader>
-                    <Heading Size="HeadingSize.Is5">
-                        <AccordionToggle>Supported ATA versions</AccordionToggle>
-                    </Heading>
-                </AccordionHeader>
-                <AccordionBody>
-                    <ListGroup>
+            <AccordionItem Title="Supported ATA versions">
+                <Content>
+                    <ul class="list-group">
                         @foreach(string version in SupportedAtaVersions)
                         {
-                            <ListGroupItem>@version</ListGroupItem>
+                            <li class="list-group-item">@version</li>
                         }
-                    </ListGroup>
+                    </ul>
                     @if(MaximumAtaRevision is not null)
                     {
                         <span style="font-style: italic">Maximum ATA revision supported:</span>
                         <span> @MaximumAtaRevision</span>
                     }
-                </AccordionBody>
+                </Content>
             </AccordionItem>
         }
         @if(AtaTransport != null)
         {
-            <AccordionItem>
-                <AccordionHeader>
-                    <Heading Size="HeadingSize.Is5">
-                        <AccordionToggle>@AtaTransport</AccordionToggle>
-                    </Heading>
-                </AccordionHeader>
-                @if(AtaTransportVersions is not null)
-                {
-                    <AccordionBody>
-                        <ListGroup>
+            <AccordionItem Title="@AtaTransport">
+                <Content>
+                    @if(AtaTransportVersions is not null)
+                    {
+                        <ul class="list-group">
                             @foreach(string version in AtaTransportVersions)
                             {
-                                <ListGroupItem>@version</ListGroupItem>
+                                <li class="list-group-item">@version</li>
                             }
-                        </ListGroup>
-                    </AccordionBody>
-                }
+                        </ul>
+                    }
+                </Content>
             </AccordionItem>
         }
         @if(GeneralConfiguration != null)
         {
-            <AccordionItem>
-                <AccordionHeader>
-                    <Heading Size="HeadingSize.Is5">
-                        <AccordionToggle>General configuration</AccordionToggle>
-                    </Heading>
-                </AccordionHeader>
-                <AccordionBody>
-                    <ListGroup>
+            <AccordionItem Title="General configuration">
+                <Content>
+                    <ul class="list-group">
                         @foreach(string cfg in GeneralConfiguration)
                         {
-                            <ListGroupItem>@cfg</ListGroupItem>
+                            <li class="list-group-item">@cfg</li>
                         }
-                    </ListGroup>
-                </AccordionBody>
+                    </ul>
+                </Content>
             </AccordionItem>
         }
         @if(SpecificConfiguration != null)
         {
-            <AccordionItem>
-                <AccordionHeader>
-                    <Heading Size="HeadingSize.Is5">
-                        <AccordionToggle>Specific configuration</AccordionToggle>
-                    </Heading>
-                </AccordionHeader>
-                <AccordionBody>
-                    <ListGroup>
+            <AccordionItem Title="Specific configuration">
+                <Content>
+                    <ul class="list-group">
                         @foreach(string cfg in SpecificConfiguration)
                         {
-                            <ListGroupItem>@cfg</ListGroupItem>
+                            <li class="list-group-item">@cfg</li>
                         }
-                    </ListGroup>
-                </AccordionBody>
+                    </ul>
+                </Content>
             </AccordionItem>
         }
         @if(DeviceCapabilities != null)
         {
-            <AccordionItem>
-                <AccordionHeader>
-                    <Heading Size="HeadingSize.Is5">
-                        <AccordionToggle>Device capabilities</AccordionToggle>
-                    </Heading>
-                </AccordionHeader>
-                <AccordionBody>
-                    <ListGroup>
+            <AccordionItem Title="Device capabilities">
+                <Content>
+                    <ul class="list-group">
                         @foreach(string cap in DeviceCapabilities)
                         {
-                            <ListGroupItem>@cap</ListGroupItem>
+                            <li class="list-group-item">@cap</li>
                         }
-                    </ListGroup>
-                </AccordionBody>
+                    </ul>
+                </Content>
             </AccordionItem>
         }
         @if(PioTransferModes != null)
         {
-            <AccordionItem>
-                <AccordionHeader>
-                    <Heading Size="HeadingSize.Is5">
-                        <AccordionToggle>Programmed I/O (PIO) transfer modes</AccordionToggle>
-                    </Heading>
-                </AccordionHeader>
-                <AccordionBody>
-                    <ListGroup>
+            <AccordionItem Title="Programmed I/O (PIO) transfer modes">
+                <Content>
+                    <ul class="list-group">
                         @foreach(string cap in PioTransferModes)
                         {
-                            <ListGroupItem>@cap</ListGroupItem>
+                            <li class="list-group-item">@cap</li>
                         }
-                    </ListGroup>
-                </AccordionBody>
+                    </ul>
+                </Content>
             </AccordionItem>
         }
         @if(DmaTransferModes != null)
         {
-            <AccordionItem>
-                <AccordionHeader>
-                    <Heading Size="HeadingSize.Is5">
-                        <AccordionToggle>Single-word DMA (DMA) transfer modes</AccordionToggle>
-                    </Heading>
-                </AccordionHeader>
-                <AccordionBody>
-                    <ListGroup>
+            <AccordionItem Title="Single-word DMA (DMA) transfer modes">
+                <Content>
+                    <ul class="list-group">
                         @foreach(string cap in DmaTransferModes)
                         {
                             if(cap.Contains("active"))
                             {
-                                <ListGroupItem class="active">@cap</ListGroupItem>
+                                <li class="list-group-item active">@cap</li>
                             }
                             else
                             {
-                                <ListGroupItem>@cap</ListGroupItem>
+                                <li class="list-group-item">@cap</li>
                             }
                         }
-                    </ListGroup>
-                </AccordionBody>
+                    </ul>
+                </Content>
             </AccordionItem>
         }
         @if(MDmaTransferModes != null)
         {
-            <AccordionItem>
-                <AccordionHeader>
-                    <Heading Size="HeadingSize.Is5">
-                        <AccordionToggle>Multi-word DMA (MDMA) transfer modes</AccordionToggle>
-                    </Heading>
-                </AccordionHeader>
-                <AccordionBody>
-                    <ListGroup>
+            <AccordionItem Title="Multi-word DMA (MDMA) transfer modes">
+                <Content>
+                    <ul class="list-group">
                         @foreach(string cap in MDmaTransferModes)
                         {
                             if(cap.Contains("active"))
                             {
-                                <ListGroupItem class="active">@cap</ListGroupItem>
+                                <li class="list-group-item active">@cap</li>
                             }
                             else
                             {
-                                <ListGroupItem>@cap</ListGroupItem>
+                                <li class="list-group-item">@cap</li>
                             }
                         }
-                    </ListGroup>
-                </AccordionBody>
+                    </ul>
+                </Content>
             </AccordionItem>
         }
         @if(UltraDmaTransferModes != null)
         {
-            <AccordionItem>
-                <AccordionHeader>
-                    <Heading Size="HeadingSize.Is5">
-                        <AccordionToggle>Ultra DMA transfer modes</AccordionToggle>
-                    </Heading>
-                </AccordionHeader>
-                <AccordionBody>
-                    <ListGroup>
+            <AccordionItem Title="Ultra DMA transfer modes">
+                <Content>
+                    <ul class="list-group">
                         @foreach(string cap in UltraDmaTransferModes)
                         {
                             if(cap.Contains("active"))
                             {
-                                <ListGroupItem class="active">@cap</ListGroupItem>
+                                <li class="list-group-item active">@cap</li>
                             }
                             else
                             {
-                                <ListGroupItem>@cap</ListGroupItem>
+                                <li class="list-group-item">@cap</li>
                             }
                         }
-                    </ListGroup>
-                </AccordionBody>
+                    </ul>
+                </Content>
             </AccordionItem>
         }
         @if(CommandSetAndFeatures != null)
         {
-            <AccordionItem>
-                <AccordionHeader>
-                    <Heading Size="HeadingSize.Is5">
-                        <AccordionToggle>Command set and features</AccordionToggle>
-                    </Heading>
-                </AccordionHeader>
-                <AccordionBody>
-                    <ListGroup>
+            <AccordionItem Title="Command set and features">
+                <Content>
+                    <ul class="list-group">
                         @foreach(string feature in CommandSetAndFeatures)
                         {
-                            <ListGroupItem>@feature</ListGroupItem>
+                            <li class="list-group-item">@feature</li>
                         }
-                    </ListGroup>
-                </AccordionBody>
+                    </ul>
+                </Content>
             </AccordionItem>
         }
         @if(Security != null)
         {
-            <AccordionItem>
-                <AccordionHeader>
-                    <Heading Size="HeadingSize.Is5">
-                        <AccordionToggle>Security</AccordionToggle>
-                    </Heading>
-                </AccordionHeader>
-                <AccordionBody>
-                    <ListGroup>
+            <AccordionItem Title="Security">
+                <Content>
+                    <ul class="list-group">
                         @foreach(string feature in Security)
                         {
-                            <ListGroupItem>@feature</ListGroupItem>
+                            <li class="list-group-item">@feature</li>
                         }
-                    </ListGroup>
-                </AccordionBody>
+                    </ul>
+                </Content>
             </AccordionItem>
         }
         @if(Streaming != null)
         {
-            <AccordionItem>
-                <AccordionHeader>
-                    <Heading Size="HeadingSize.Is5">
-                        <AccordionToggle>Streaming</AccordionToggle>
-                    </Heading>
-                </AccordionHeader>
-                <AccordionBody>
-                    <ListGroup>
+            <AccordionItem Title="Streaming">
+                <Content>
+                    <ul class="list-group">
                         @foreach(string feature in Streaming)
                         {
-                            <ListGroupItem>@feature</ListGroupItem>
+                            <li class="list-group-item">@feature</li>
                         }
-                    </ListGroup>
-                </AccordionBody>
+                    </ul>
+                </Content>
             </AccordionItem>
         }
         @if(SmartCommandTransport != null)
         {
-            <AccordionItem>
-                <AccordionHeader>
-                    <Heading Size="HeadingSize.Is5">
-                        <AccordionToggle>S.M.A.R.T. Command Transport (SCT)</AccordionToggle>
-                    </Heading>
-                </AccordionHeader>
-                <AccordionBody>
-                    <ListGroup>
+            <AccordionItem Title="S.M.A.R.T. Command Transport (SCT)">
+                <Content>
+                    <ul class="list-group">
                         @foreach(string feature in SmartCommandTransport)
                         {
-                            <ListGroupItem>@feature</ListGroupItem>
+                            <li class="list-group-item">@feature</li>
                         }
-                    </ListGroup>
-                </AccordionBody>
+                    </ul>
+                </Content>
             </AccordionItem>
         }
         @if(NvCache != null)
         {
-            <AccordionItem>
-                <AccordionHeader>
-                    <Heading Size="HeadingSize.Is5">
-                        <AccordionToggle>Non-Volatile Cache</AccordionToggle>
-                    </Heading>
-                </AccordionHeader>
-                <AccordionBody>
-                    <ListGroup>
+            <AccordionItem Title="Non-Volatile Cache">
+                <Content>
+                    <ul class="list-group">
                         @foreach(string feature in NvCache)
                         {
-                            <ListGroupItem>@feature</ListGroupItem>
+                            <li class="list-group-item">@feature</li>
                         }
-                    </ListGroup>
-                </AccordionBody>
+                    </ul>
+                </Content>
             </AccordionItem>
         }
         @if(Cid != null)
         {
-            <AccordionItem>
-                <AccordionHeader>
-                    <Heading Size="HeadingSize.Is5">
-                        <AccordionToggle>Card Identification Register</AccordionToggle>
-                    </Heading>
-                </AccordionHeader>
-                <AccordionBody>
+            <AccordionItem Title="Card Identification Register">
+                <Content>
                     @((MarkupString)Cid)
-                </AccordionBody>
+                </Content>
             </AccordionItem>
         }
         @if(Csd != null)
         {
-            <AccordionItem>
-                <AccordionHeader>
-                    <Heading Size="HeadingSize.Is5">
-                        <AccordionToggle>Card Specific Data Register</AccordionToggle>
-                    </Heading>
-                </AccordionHeader>
-                <AccordionBody>
+            <AccordionItem Title="Card Specific Data Register">
+                <Content>
                     @((MarkupString)Csd)
-                </AccordionBody>
+                </Content>
             </AccordionItem>
         }
         @if(ExtendedCsd != null)
         {
-            <AccordionItem>
-                <AccordionHeader>
-                    <Heading Size="HeadingSize.Is5">
-                        <AccordionToggle>Extended Device Specific Data Register</AccordionToggle>
-                    </Heading>
-                </AccordionHeader>
-                <AccordionBody>
+            <AccordionItem Title="Extended Device Specific Data Register">
+                <Content>
                     @((MarkupString)ExtendedCsd)
-                </AccordionBody>
+                </Content>
             </AccordionItem>
         }
         @if(Scr != null)
         {
-            <AccordionItem>
-                <AccordionHeader>
-                    <Heading Size="HeadingSize.Is5">
-                        <AccordionToggle>Card configuration register</AccordionToggle>
-                    </Heading>
-                </AccordionHeader>
-                <AccordionBody>
+            <AccordionItem Title="Card configuration register">
+                <Content>
                     @((MarkupString)Scr)
-                </AccordionBody>
+                </Content>
             </AccordionItem>
         }
         @if(Ocr != null)
         {
-            <AccordionItem>
-                <AccordionHeader>
-                    <Heading Size="HeadingSize.Is5">
-                        <AccordionToggle>Operation Conditions Register</AccordionToggle>
-                    </Heading>
-                </AccordionHeader>
-                <AccordionBody>
+            <AccordionItem Title="Operation Conditions Register">
+                <Content>
                     @((MarkupString)Ocr)
-                </AccordionBody>
+                </Content>
             </AccordionItem>
         }
 
         @if(ReadCapabilitiesDictionary is not null && ReadCapabilitiesList is not null)
         {
-            <AccordionItem>
-                <AccordionHeader>
-                    <Heading Size="HeadingSize.Is5">
-                        <AccordionToggle>Read capabilities</AccordionToggle>
-                    </Heading>
-                </AccordionHeader>
-                <AccordionBody>
-                    <Table class="table-borderless table-dark" FullWidth>
-                        <TableBody>
-                            @foreach(KeyValuePair<string, string> kvp in ReadCapabilitiesDictionary)
-                            {
-                                <TableRow>
-                                    <TableRowHeader>@kvp.Key</TableRowHeader>
-                                    <TableRowCell>@kvp.Value</TableRowCell>
-                                </TableRow>
-                            }
-                        </TableBody>
-                    </Table>
-                    <ListGroup>
+            <AccordionItem Title="Read capabilities">
+                <Content>
+                    <table class="table table-dark table-borderless w-100">
+                        <tbody>
+                        @foreach(KeyValuePair<string, string> kvp in ReadCapabilitiesDictionary)
+                        {
+                            <tr>
+                                <th>@kvp.Key</th>
+                                <td>@kvp.Value</td>
+                            </tr>
+                        }
+                        </tbody>
+                    </table>
+                    <ul class="list-group">
                         @foreach(string cap in ReadCapabilitiesList)
                         {
-                            <ListGroupItem>@cap</ListGroupItem>
+                            <li class="list-group-item">@cap</li>
                         }
-                    </ListGroup>
-                </AccordionBody>
+                    </ul>
+                </Content>
             </AccordionItem>
         }
         @if(DeviceInquiry is not null)
         {
-            <AccordionItem>
-                <AccordionHeader>
-                    <Heading Size="HeadingSize.Is5">
-                        <AccordionToggle>Device inquiry</AccordionToggle>
-                    </Heading>
-                </AccordionHeader>
-                <AccordionBody>
-                    <Table class="table-borderless table-dark" FullWidth>
-                        <TableBody>
-                            @foreach(KeyValuePair<string, string> kvp in DeviceInquiry)
-                            {
-                                <TableRow>
-                                    <TableRowHeader>@kvp.Key</TableRowHeader>
-                                    <TableRowCell>@kvp.Value</TableRowCell>
-                                </TableRow>
-                            }
-                        </TableBody>
-                    </Table>
+            <AccordionItem Title="Device inquiry">
+                <Content>
+                    <table class="table table-dark table-borderless w-100">
+                        <tbody>
+                        @foreach(KeyValuePair<string, string> kvp in DeviceInquiry)
+                        {
+                            <tr>
+                                <th>@kvp.Key</th>
+                                <td>@kvp.Value</td>
+                            </tr>
+                        }
+                        </tbody>
+                    </table>
                     @if(InquiryCapabilities is not null)
                     {
-                        <ListGroup>
+                        <ul class="list-group">
                             @foreach(string cap in InquiryCapabilities)
                             {
-                                <ListGroupItem>@cap</ListGroupItem>
+                                <li class="list-group-item">@cap</li>
                             }
-                        </ListGroup>
+                        </ul>
                     }
-                </AccordionBody>
+                </Content>
             </AccordionItem>
         }
         @if(ModeSenseCapabilities is not null || ModeSensePages is not null)
         {
-            <AccordionItem>
-                <AccordionHeader>
-                    <Heading Size="HeadingSize.Is5">
-                        <AccordionToggle>MODE SENSE pages</AccordionToggle>
-                    </Heading>
-                </AccordionHeader>
-                <AccordionBody>
+            <AccordionItem Title="MODE SENSE pages">
+                <Content>
                     @if(ModeSenseCapabilities is not null)
                     {
-                        <ListGroup>
+                        <ul class="list-group">
                             @foreach(string cap in ModeSenseCapabilities)
                             {
-                                <ListGroupItem>@cap</ListGroupItem>
+                                <li class="list-group-item">@cap</li>
                             }
-                        </ListGroup>
+                        </ul>
                     }
                     @if(BlockDescriptors is not null)
                     {
                         <Accordion>
-                            <AccordionItem>
-
-                                <AccordionHeader>
-                                    <Heading Size="HeadingSize.Is6">
-                                        <AccordionToggle>Block descriptors</AccordionToggle>
-                                    </Heading>
-                                </AccordionHeader>
-                                <AccordionBody>
-                                    <ListGroup>
+                            <AccordionItem Title="Block descriptors">
+                                <Content>
+                                    <ul class="list-group">
                                         @foreach(string descriptor in BlockDescriptors)
                                         {
-                                            <ListGroupItem>@descriptor</ListGroupItem>
+                                            <li class="list-group-item">@descriptor</li>
                                         }
-                                    </ListGroup>
-                                </AccordionBody>
+                                    </ul>
+                                </Content>
                             </AccordionItem>
                         </Accordion>
                     }
@@ -623,179 +488,147 @@
                         foreach(KeyValuePair<string, List<string>> kvp in ModeSensePages)
                         {
                             <Accordion>
-                                <AccordionItem>
-                                    <AccordionHeader>
-                                        <Heading Size="HeadingSize.Is6">
-                                            <AccordionToggle>@kvp.Key</AccordionToggle>
-                                        </Heading>
-                                    </AccordionHeader>
-                                    @if(kvp.Value.Count > 0)
-                                    {
-                                        <AccordionBody>
-                                            <ListGroup>
+                                <AccordionItem Title=@kvp.Key>
+                                    <Content>
+                                        @if(kvp.Value.Count > 0)
+                                        {
+                                            <ul class="list-group">
                                                 @foreach(string cap in kvp.Value)
                                                 {
-                                                    <ListGroupItem>@cap</ListGroupItem>
+                                                    <li class="list-group-item">@cap</li>
                                                 }
-                                            </ListGroup>
-                                        </AccordionBody>
-                                    }
+                                            </ul>
+                                        }
+                                    </Content>
                                 </AccordionItem>
                             </Accordion>
                         }
                     }
-                </AccordionBody>
+                </Content>
             </AccordionItem>
         }
         @if(EvpdPages?.Count > 0)
         {
-            <AccordionItem>
-                <AccordionHeader>
-                    <Heading Size="HeadingSize.Is5">
-                        <AccordionToggle>Extended Vital Product Data pages</AccordionToggle>
-                    </Heading>
-                </AccordionHeader>
-                <AccordionBody>
+            <AccordionItem Title="Extended Vital Product Data pages">
+                <Content>
                     @foreach(KeyValuePair<string, List<string>> kvp in EvpdPages)
                     {
                         <Accordion>
-                            <AccordionItem>
-                                <AccordionHeader>
-                                    <Heading Size="HeadingSize.Is6">
-                                        <AccordionToggle>@kvp.Key</AccordionToggle>
-                                    </Heading>
-                                </AccordionHeader>
-                                @if(kvp.Value.Count > 0)
-                                {
-                                    <AccordionBody>
-                                        <ListGroup>
+                            <AccordionItem Title=@kvp.Key>
+                                <Content>
+                                    @if(kvp.Value.Count > 0)
+                                    {
+                                        <ul class="list-group">
                                             @foreach(string cap in kvp.Value)
                                             {
-                                                <ListGroupItem>@cap</ListGroupItem>
+                                                <li class="list-group-item">@cap</li>
                                             }
-                                        </ListGroup>
-                                    </AccordionBody>
-                                }
+                                        </ul>
+                                    }
+                                </Content>
                             </AccordionItem>
                         </Accordion>
                     }
-                </AccordionBody>
+                </Content>
             </AccordionItem>
         }
         @if(MmcModeList?.Count > 0)
         {
-            <AccordionItem>
-                <AccordionHeader>
-                    <Heading Size="HeadingSize.Is5">
-                        <AccordionToggle>CD-ROM capabilities</AccordionToggle>
-                    </Heading>
-                </AccordionHeader>
-                <AccordionBody>
-                    <ListGroup>
+            <AccordionItem Title="CD-ROM capabilities">
+                <Content>
+                    <ul class="list-group">
                         @foreach(string cap in MmcModeList)
                         {
-                            <ListGroupItem>@cap</ListGroupItem>
+                            <li class="list-group-item">@cap</li>
                         }
-                    </ListGroup>
-                </AccordionBody>
+                    </ul>
+                </Content>
             </AccordionItem>
         }
         @if(MmcFeaturesList?.Count > 0)
         {
-            <AccordionItem>
-                <AccordionHeader>
-                    <Heading Size="HeadingSize.Is5">
-                        <AccordionToggle>MMC features</AccordionToggle>
-                    </Heading>
-                </AccordionHeader>
-                <AccordionBody>
-                    <ListGroup>
+            <AccordionItem Title="MMC features">
+                <Content>
+                    <ul class="list-group">
                         @foreach(string feature in MmcFeaturesList)
                         {
-                            <ListGroupItem>@feature</ListGroupItem>
+                            <li class="list-group-item">@feature</li>
                         }
-                    </ListGroup>
-                </AccordionBody>
+                    </ul>
+                </Content>
             </AccordionItem>
         }
         @if(ScsiSscVisible)
         {
-            <AccordionItem>
-                <AccordionHeader>
-                    <Heading Size="HeadingSize.Is5">
-                        <AccordionToggle>SCSI Streaming device capabilities:</AccordionToggle>
-                    </Heading>
-                </AccordionHeader>
-                <AccordionBody>
-                    <Table class="table-borderless table-dark" FullWidth>
-                        <TableBody>
-                            <TableRow>
-                                <TableRowHeader>Block size granularity</TableRowHeader>
-                                <TableRowCell>@ScsiSscGranularity</TableRowCell>
-                            </TableRow>
-                            <TableRow>
-                                <TableRowHeader>Maximum block length</TableRowHeader>
-                                <TableRowCell>@ScsiSscMaxBlock bytes</TableRowCell>
-                            </TableRow>
-                            <TableRow>
-                                <TableRowHeader>Minimum block length</TableRowHeader>
-                                <TableRowCell>@ScsiSscMinBlock bytes</TableRowCell>
-                            </TableRow>
-                        </TableBody>
-                    </Table>
+            <AccordionItem Title="SCSI Streaming device capabilities:">
+                <Content>
+                    <table class="table table-dark table-borderless w-100">
+                        <tbody>
+                        <tr>
+                            <th>Block size granularity</th>
+                            <td>@ScsiSscGranularity</td>
+                        </tr>
+                        <tr>
+                            <th>Maximum block length</th>
+                            <td>@ScsiSscMaxBlock bytes</td>
+                        </tr>
+                        <tr>
+                            <th>Minimum block length</th>
+                            <td>@ScsiSscMinBlock bytes</td>
+                        </tr>
+                        </tbody>
+                    </table>
                     @if(ScsiSscDensities?.Count > 0)
                     {
                         foreach(SupportedDensity density in ScsiSscDensities)
                         {
                             <Accordion>
                                 <AccordionItem>
-                                    <AccordionHeader>
-                                        <Heading Size="HeadingSize.Is6">
-                                            <AccordionToggle>Information for supported density with primary
-                                                code @($"{density.PrimaryCode:X2}h") and secondary
-                                                code @($"{density.SecondaryCode:X2}h")</AccordionToggle>
-                                        </Heading>
-                                    </AccordionHeader>
-                                    <AccordionBody>
-                                        <Table class="table-borderless table-dark" FullWidth>
-                                            <TableBody>
-                                                <TableRow>
-                                                    <TableRowHeader>Drive can write this density</TableRowHeader>
-                                                    <TableRowCell>@density.Writable</TableRowCell>
-                                                </TableRow>
-                                                <TableRow>
-                                                    <TableRowHeader>Duplicate density</TableRowHeader>
-                                                    <TableRowCell>@density.Duplicate</TableRowCell>
-                                                </TableRow>
-                                                <TableRow>
-                                                    <TableRowHeader>Default density</TableRowHeader>
-                                                    <TableRowCell>@density.DefaultDensity</TableRowCell>
-                                                </TableRow>
-                                                <TableRow>
-                                                    <TableRowHeader>Name</TableRowHeader>
-                                                    <TableRowCell>@density.Name</TableRowCell>
-                                                </TableRow>
-                                                <TableRow>
-                                                    <TableRowHeader>Organization</TableRowHeader>
-                                                    <TableRowCell>@density.Organization</TableRowCell>
-                                                </TableRow>
-                                                <TableRow>
-                                                    <TableRowHeader>Description</TableRowHeader>
-                                                    <TableRowCell>@density.Description</TableRowCell>
-                                                </TableRow>
-                                                <TableRow>
-                                                    <TableRowHeader>Maximum capacity</TableRowHeader>
-                                                    <TableRowCell>@density.Capacity megabytes</TableRowCell>
-                                                </TableRow>
-                                                <TableRow>
-                                                    <TableRowCell ColumnSpan="2">Density has @density.BitsPerMm bits per
-                                                        mm, with @density.Tracks tracks in a @density.Width mm width
-                                                        tape
-                                                    </TableRowCell>
-                                                </TableRow>
-                                            </TableBody>
-                                        </Table>
-                                    </AccordionBody>
+                                    <TitleTemplate>
+                                        Information for supported density with primary
+                                        code @($"{density.PrimaryCode:X2}h") and secondary
+                                        code @($"{density.SecondaryCode:X2}h")
+                                    </TitleTemplate>
+                                    <Content>
+                                        <table class="table table-dark table-borderless w-100">
+                                            <tbody>
+                                            <tr>
+                                                <th>Drive can write this density</th>
+                                                <td>@density.Writable</td>
+                                            </tr>
+                                            <tr>
+                                                <th>Duplicate density</th>
+                                                <td>@density.Duplicate</td>
+                                            </tr>
+                                            <tr>
+                                                <th>Default density</th>
+                                                <td>@density.DefaultDensity</td>
+                                            </tr>
+                                            <tr>
+                                                <th>Name</th>
+                                                <td>@density.Name</td>
+                                            </tr>
+                                            <tr>
+                                                <th>Organization</th>
+                                                <td>@density.Organization</td>
+                                            </tr>
+                                            <tr>
+                                                <th>Description</th>
+                                                <td>@density.Description</td>
+                                            </tr>
+                                            <tr>
+                                                <th>Maximum capacity</th>
+                                                <td>@density.Capacity megabytes</td>
+                                            </tr>
+                                            <tr>
+                                                <td colspan="2">Density has @density.BitsPerMm bits per
+                                                                mm, with @density.Tracks tracks in a @density.Width mm
+                                                                width tape
+                                                </td>
+                                            </tr>
+                                            </tbody>
+                                        </table>
+                                    </Content>
                                 </AccordionItem>
                             </Accordion>
                         }
@@ -806,40 +639,38 @@
                         {
                             <Accordion>
                                 <AccordionItem>
-                                    <AccordionHeader>
-                                        <Heading Size="HeadingSize.Is6">
-                                            <AccordionToggle>Information for supported media with type
-                                                code @($"{media.MediumType:X2}h")</AccordionToggle>
-                                        </Heading>
-                                    </AccordionHeader>
-                                    <AccordionBody>
-                                        <Table class="table-borderless table-dark" FullWidth>
-                                            <TableBody>
-                                                <TableRow>
-                                                    <TableRowCell ColumnSpan="2">Media is @media.Length m long in
-                                                        a @media.Width mm width tape
-                                                    </TableRowCell>
-                                                </TableRow>
-                                                <TableRow>
-                                                    <TableRowHeader>Name</TableRowHeader>
-                                                    <TableRowCell>@media.Name</TableRowCell>
-                                                </TableRow>
-                                                <TableRow>
-                                                    <TableRowHeader>Organization</TableRowHeader>
-                                                    <TableRowCell>@media.Organization</TableRowCell>
-                                                </TableRow>
-                                                <TableRow>
-                                                    <TableRowHeader>Description</TableRowHeader>
-                                                    <TableRowCell>@media.Description</TableRowCell>
-                                                </TableRow>
-                                            </TableBody>
-                                        </Table>
-                                    </AccordionBody>
+                                    <TitleTemplate>
+                                        Information for supported media with type
+                                        code @($"{media.MediumType:X2}h")
+                                    </TitleTemplate>
+                                    <Content>
+                                        <table class="table table-dark table-borderless w-100">
+                                            <tbody>
+                                            <tr>
+                                                <td colspan="2">Media is @media.Length m long in a @media.Width mm width
+                                                                tape
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <th>Name</th>
+                                                <td>@media.Name</td>
+                                            </tr>
+                                            <tr>
+                                                <th>Organization</th>
+                                                <td>@media.Organization</td>
+                                            </tr>
+                                            <tr>
+                                                <th>Description</th>
+                                                <td>@media.Description</td>
+                                            </tr>
+                                            </tbody>
+                                        </table>
+                                    </Content>
                                 </AccordionItem>
                             </Accordion>
                         }
                     }
-                </AccordionBody>
+                </Content>
             </AccordionItem>
         }
     </Accordion>
@@ -849,37 +680,35 @@
 {
     <div class="stats-section">
         <h3 style="font-weight: bold;">
-            Tested media information<br/>
+            Tested media information<br />
         </h3>
 
         <Accordion>
             @foreach(KeyValuePair<string, (Dictionary<string, string> Table, List<string> List)> mediaInfo in MediaInformation)
             {
                 <AccordionItem>
-                    <AccordionHeader>
-                        <Heading Size="HeadingSize.Is5">
-                            <AccordionToggle>@mediaInfo.Key</AccordionToggle>
-                        </Heading>
-                    </AccordionHeader>
-                    <AccordionBody>
-                        <Table class="table-borderless table-dark" FullWidth>
-                            <TableBody>
-                                @foreach(KeyValuePair<string, string> kvp in mediaInfo.Value.Table)
-                                {
-                                    <TableRow>
-                                        <TableRowHeader>@kvp.Key</TableRowHeader>
-                                        <TableRowCell>@kvp.Value</TableRowCell>
-                                    </TableRow>
-                                }
-                            </TableBody>
-                        </Table>
-                        <ListGroup>
+                    <TitleTemplate>
+                        @mediaInfo.Key
+                    </TitleTemplate>
+                    <Content>
+                        <table class="table table-dark table-borderless w-100">
+                            <tbody>
+                            @foreach(KeyValuePair<string, string> kvp in mediaInfo.Value.Table)
+                            {
+                                <tr>
+                                    <th>@kvp.Key</th>
+                                    <td>@kvp.Value</td>
+                                </tr>
+                            }
+                            </tbody>
+                        </table>
+                        <ul class="list-group">
                             @foreach(string cap in mediaInfo.Value.List)
                             {
-                                <ListGroupItem>@cap</ListGroupItem>
+                                <li class="list-group-item">@cap</li>
                             }
-                        </ListGroup>
-                    </AccordionBody>
+                        </ul>
+                    </Content>
                 </AccordionItem>
             }
         </Accordion>