{% extends "demo_app/pattern_base.html" %}

{% block component_content %}
<h1 class="font-heading-2xl">{{ component_name }}</h1>
<p class="usa-intro">A table shows information in columns and rows.</p>

<h2 class="font-heading-xl margin-top-4">Default</h2>
<c-table caption="Federal agency budget allocations (in millions)">
    <thead>
        <tr>
            <th scope="col">Agency</th>
            <th scope="col">FY 2024</th>
            <th scope="col">FY 2025</th>
            <th scope="col">FY 2026</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Department of Education</th>
            <td>$79,600</td>
            <td>$82,400</td>
            <td>$84,100</td>
        </tr>
        <tr>
            <th scope="row">Department of Transportation</th>
            <td>$105,200</td>
            <td>$109,800</td>
            <td>$112,500</td>
        </tr>
        <tr>
            <th scope="row">Environmental Protection Agency</th>
            <td>$12,100</td>
            <td>$12,800</td>
            <td>$13,200</td>
        </tr>
        <tr>
            <th scope="row">Department of Veterans Affairs</th>
            <td>$301,400</td>
            <td>$312,600</td>
            <td>$325,100</td>
        </tr>
    </tbody>
</c-table>

<h2 class="font-heading-xl margin-top-4">Compact</h2>
<c-table caption="Application processing times" compact="true">
    <thead>
        <tr>
            <th scope="col">Application type</th>
            <th scope="col">Average processing time</th>
            <th scope="col">Status</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Passport renewal</th>
            <td>6-8 weeks</td>
            <td>Normal</td>
        </tr>
        <tr>
            <th scope="row">Passport new issuance</th>
            <td>8-11 weeks</td>
            <td>Normal</td>
        </tr>
        <tr>
            <th scope="row">Global Entry</th>
            <td>4-6 months</td>
            <td>Delayed</td>
        </tr>
    </tbody>
</c-table>

<h2 class="font-heading-xl margin-top-4">Borderless</h2>
<c-table caption="Federal holidays in 2026" borderless="true">
    <thead>
        <tr>
            <th scope="col">Holiday</th>
            <th scope="col">Date</th>
            <th scope="col">Day</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">New Year's Day</th>
            <td>January 1</td>
            <td>Thursday</td>
        </tr>
        <tr>
            <th scope="row">Martin Luther King Jr. Day</th>
            <td>January 19</td>
            <td>Monday</td>
        </tr>
        <tr>
            <th scope="row">Presidents' Day</th>
            <td>February 16</td>
            <td>Monday</td>
        </tr>
        <tr>
            <th scope="row">Memorial Day</th>
            <td>May 25</td>
            <td>Monday</td>
        </tr>
    </tbody>
</c-table>

<h2 class="font-heading-xl margin-top-4">Striped</h2>
<c-table caption="GS pay scale, Step 1 (2026)" striped="true">
    <thead>
        <tr>
            <th scope="col">Grade</th>
            <th scope="col">Annual salary</th>
            <th scope="col">Hourly rate</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">GS-5</th>
            <td>$33,693</td>
            <td>$16.14</td>
        </tr>
        <tr>
            <th scope="row">GS-7</th>
            <td>$41,737</td>
            <td>$19.99</td>
        </tr>
        <tr>
            <th scope="row">GS-9</th>
            <td>$51,068</td>
            <td>$24.46</td>
        </tr>
        <tr>
            <th scope="row">GS-11</th>
            <td>$61,768</td>
            <td>$29.59</td>
        </tr>
        <tr>
            <th scope="row">GS-13</th>
            <td>$87,198</td>
            <td>$41.77</td>
        </tr>
        <tr>
            <th scope="row">GS-15</th>
            <td>$120,658</td>
            <td>$57.82</td>
        </tr>
    </tbody>
</c-table>

<h2 class="font-heading-xl margin-top-4">Scrollable</h2>
<c-table caption="Quarterly performance metrics by region" scrollable="true">
    <thead>
        <tr>
            <th scope="col">Region</th>
            <th scope="col">Q1 Applications</th>
            <th scope="col">Q1 Processed</th>
            <th scope="col">Q2 Applications</th>
            <th scope="col">Q2 Processed</th>
            <th scope="col">Q3 Applications</th>
            <th scope="col">Q3 Processed</th>
            <th scope="col">Q4 Applications</th>
            <th scope="col">Q4 Processed</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Northeast</th>
            <td>12,450</td>
            <td>11,890</td>
            <td>13,200</td>
            <td>12,750</td>
            <td>11,800</td>
            <td>11,540</td>
            <td>14,100</td>
            <td>13,600</td>
        </tr>
        <tr>
            <th scope="row">Southeast</th>
            <td>15,300</td>
            <td>14,800</td>
            <td>16,100</td>
            <td>15,400</td>
            <td>14,500</td>
            <td>14,200</td>
            <td>17,200</td>
            <td>16,500</td>
        </tr>
        <tr>
            <th scope="row">Midwest</th>
            <td>10,800</td>
            <td>10,500</td>
            <td>11,400</td>
            <td>11,000</td>
            <td>9,900</td>
            <td>9,700</td>
            <td>12,300</td>
            <td>11,900</td>
        </tr>
        <tr>
            <th scope="row">West</th>
            <td>18,700</td>
            <td>17,900</td>
            <td>19,500</td>
            <td>18,800</td>
            <td>17,100</td>
            <td>16,600</td>
            <td>20,400</td>
            <td>19,500</td>
        </tr>
    </tbody>
</c-table>
{% endblock %}